leojpod / elm-apex-charts-link / Charts.Plot

Use this module to create historgrams, bar charts, scatter plots, line plots, area plots and the like (basically anything that does not come in a round-like shape).

Building a chart


type Plot

This is an internal type to make sure we're keeping the definitions and list handling coherent and free from outside manipulation

Start

You should start by creating an empty chart with:

plot : Plot

This is the entry point to create a plot chart.

It creates an empty chart which you can use as basis, adding series to it, tuning axis and such...

Adding data

Once you have your plot/chart, you can start adding data to it. At the moment this is done with addColumnSeries and addLineSeries

addColumnSeries : String -> List Point -> Plot -> Plot

as the name suggest, this add a new column series to your chart using the given name and by adding a bar for each of the given points.

addLineSeries : String -> List Point -> Plot -> Plot

as the name suggest, this add a line to your chart by creating a series with the given name and by linking the given points together.


type alias Point =
{ x : Basics.Float, y : Basics.Float }

A simple record type to make things a bit clearer when writing series

Customizations

NOTE: this part is still heavy a work in progress.

withXAxisType : XAxisType -> Plot -> Plot

change the type of x-axis used in you graph


type XAxisType
    = Category
    | DateTime
    | Numeric

Describe how the x-axis of your graph should be labelled.

It can be either a Category, a DateTime or a Numeric value

NOTE: for the DateTime to properly work I suggest that the x-values in your series should be turned into miliseconds via Time.posixToMillis. I hope to find something better in due time but that's the best option until then.

Internals

These are stuff you should never have to care about


type SeriesType
    = LineSeries
    | ColumnSeries

internal type to track the type of series present in the chart.

Do not use this type without a really good reason.

chartData : Plot -> PlotChartData

internal method to grab the internal plot reprensentation

this is use to transform the underlying reprensentation to an Apex chart definition


type alias XAxisOptions =
XAxisType

internal type that represent all the possible options that can be supported by the chart library

Do not use this type without a really good reason.