view1 : (data -> Basics.Float) -> (data -> Basics.Float) -> List data -> Svg msg
Show a line chart
type alias Point =
{ x : Float, y : Float }
chart : Html msg
chart =
Chart.Dots.view1 .x .y
[ Point 0 2, Point 5 5, Point 10 10 ]
See the full example here.
Choosing your variables
Notice that we provide .x
and .y
to specify which data we want to show.
So if we had more complex data structures, like a human with an age
, weight
,
height
, and income
, we can easily pick which two properties we want to plot:
chart : Html msg
chart =
Chart.Dots.view1 .age .weight
[ Human 4 24 0.94 0
, Human 25 75 1.73 25000
, Human 43 83 1.75 40000
]
-- Try changing .weight to .height
See the full example here.
Use any function to determine inputs
Rather than using data like .weight
directly, you can make a
function like bmi human = human.weight / human.height ^ 2
and create a
chart of .age
vs bmi
. This allows you to keep your data set nice and minimal!
The whole chart is just a function
view1
is just a function, so it will update as your data changes.
If you get more data points or some data points are changed, the chart
refreshes automatically!
view2 : (data -> Basics.Float) -> (data -> Basics.Float) -> List data -> List data -> Svg msg
Show a line chart with two lines
Say you have two humans and you would like to see how their weight relates to their age. Here's how you could plot it.
chart : Html msg
chart =
Chart.Dots.view2 .age .weight alice chuck
See the full example here.
view3 : (data -> Basics.Float) -> (data -> Basics.Float) -> List data -> List data -> List data -> Svg msg
Show a line chart with three lines
It works just like view1
and view2
.
chart : Html msg
chart =
Chart.Dots.view3 .age .weight alice bob chuck
See the full example here.
But what if you have more people? What if you have four people?! In that case,
check out view
.
view : (data -> Basics.Float) -> (data -> Basics.Float) -> List (Series data) -> Svg msg
Internal.Dot.Series data
series : Color -> Chart.Dot.Shape -> String -> List data -> Series data
viewCustom : Config data msg -> List (Series data) -> Html msg
Customize everything
See the Config
type for information about the available customizations.
Or copy and play with the example below. No one will tell.
Example customiztion
The example below makes the line chart an area chart.
chart : Html msg
chart =
Chart.Dots.viewCustom chartConfig
[ Chart.Dots.line Colors.blueLight Dots.square "Chuck" chuck
, Chart.Dots.line Colors.pinkLight Dots.plus "Alice" alice
, Chart.Dots.line Colors.goldLight Dots.diamond "Bobby" bobby
]
chartConfig : Config Info msg
chartConfig =
{ y = Axis.default 400 "Age" .age
, x = Axis.default 700 "Weight" .weight
, container = Container.default "line-chart-1"
, interpolation = Interpolation.default
, intersection = Intersection.default
, legends = Legends.default
, events = Events.default
, junk = Junk.default
, grid = Grid.default
, dots = Dots.default
}
See the full example here.
Speaking of area charts
Remember that area charts are for data where the area under the curve matters.
Typically, this would be when you have a quantity accumulating over time.
Think profit over time or velocity over time!
In the case of profit over time, the area under the curve shows the total amount
of money earned in that time frame.
If the that total amount is not important for the relationship you're
trying to visualize, it's best to leave it out!
{ x : Chart.Axis.Config Basics.Float data msg
, y : Chart.Axis.Config Basics.Float data msg
, container : Chart.Container.Config msg
, intersection : Chart.Axis.Intersection.Config
, legends : Chart.Legends.Config msg
, events : Chart.Events.Config Chart.Element.Dot data msg
, trend : Chart.Trend.Config data
, grid : Chart.Grid.Config
, dots : Chart.Dot.Config data
, junk : Chart.Junk.Config data msg
}
Available customizations
Use with viewCustom
.
x: Customizes your horizontal axis.
See Chart.Dots.Axis
for more information and examples.
y: Customizes your vertical axis.
See Chart.Dots.Axis
for more information and examples.
intersection: Determines where your axes meet.
See Chart.Dots.Axis.Intersection
for more information and examples.
interpolation: Customizes the curve of your Chart.Dots.
See Chart.Dots.Interpolation
for more information and examples.
container: Customizes the container of your chart.
See Chart.Dots.Container
for more information and examples.
legends: Customizes your chart's legends.
See Chart.Dots.Legends
for more information and examples.
events: Customizes your chart's events, allowing you to easily
make your chart interactive (adding tooltips, selection states etc.).
See Chart.Dots.Events
for more information and examples.
grid: Customizes the style of your grid.
See Chart.Dots.Grid
for more information and examples.
area: Customizes the area under your group.
See Chart.Dots.Area
for more information and examples.
line: Customizes your lines' width and color.
See Chart.Dots.Line
for more information and examples.
dots: Customizes your dots' size and style.
See Chart.Dots.Dot
for more information and examples.
junk: Gets its name from
Edward Tufte's concept of "chart junk".
Here you are finally allowed set your creativity loose and add whatever
SVG or HTML fun you can imagine.
See Chart.Dots.Junk
for more information and examples.
Example configuration
A good start would be to copy it and play around with customizations available for each property.
chartConfig : Config Info msg
chartConfig =
{ y = Axis.default 400 "Age" .age
, x = Axis.default 700 "Weight" .weight
, container = Container.default "line-chart-1"
, interpolation = Interpolation.default
, intersection = Intersection.default
, legends = Legends.default
, events = Events.default
, junk = Junk.default
, grid = Grid.default
, area = Area.default
, dots = Dots.default
}
See the full example here.