This is the histogram chart module from elm-chart-builder.
The histogram bar chart can both generate the histogram data automatically or accept preprocessed data.
dataAccessor : Steps -> (data -> Basics.Float) -> Chart.Internal.Type.AccessorHistogram data
The data accessor for generating a histogram. It takes a config that is separate from the general config, because it is only used when generating a histogram and not for bucketed pre-processed data.
steps : Steps
steps =
[ 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 ]
dataAccessor =
Histo.dataAccessor steps accessor
preProcessedDataAccessor : (data -> Histogram.Bin Basics.Float Basics.Float) -> Chart.Internal.Type.AccessorHistogram data
The data accessor for generating a histogram from pre-processed data.
Meaning the data has already been bucketed and counted.
values
here is not used and always passed as an empty array.
preProcessedDataAccessor =
Histo.preProcessedDataAccessor
(\d ->
{ x0 = d.bucket
, x1 = d.bucket + 0.1
, values = []
, length = d.count
}
)
init : RequiredConfig -> Config msg validation
Initializes the histogram bar chart with a default config.
Histo.init requiredConfig
|> Histo.render ( data, accessor )
render : ( List data, Chart.Internal.Type.AccessorHistogram data ) -> Config msg validation -> Html msg
Renders the histogram
Histo.init requiredConfig
|> Histo.render ( data, accessor )
Chart.Internal.Type.Config msg validation
The Config opaque type
{ margin : Chart.Internal.Type.Margin
, width : Basics.Float
, height : Basics.Float
}
The required config, passed as an argument to the init
function
withBarStyle : List ( String, String ) -> Config msg validation -> Config msg validation
Sets the style for the bars The styles set here have precedence over css.
Histo.init requiredConfig
|> Histo.withBarStyle [ ( "fill", "none" ), ( "stroke-width", "2" ) ]
|> Histo.render ( data, accessor )
withColor : Color -> Config msg validation -> Config msg validation
Set the histogram color
Histo.init requiredConfig
|> Histo.withColor (Color.rgb255 240 59 32)
|> Histo.render ( data, accessor )
withColumnTitle : Chart.Internal.Type.ColumnTitle -> Config msg validation -> Config msg validation
Set the chart columns title value
It takes one of: yColumnTitle
It takes a formatter function.
defaultLayoutConfig
|> Bar.withColumnTitle (Bar.yColumnTitle String.fromFloat)
withDesc : String -> Config msg validation -> Config msg validation
Sets an accessible, long-text description for the svg chart. Default value: ""
Histo.init requiredConfig
|> Histo.withDesc "This is an accessible chart, with a desc element"
|> Histo.render ( data, accessor )
withDomain : ( Basics.Float, Basics.Float ) -> Config msg validation -> Config msg validation
Set the domain for the HistogramGenerator. All values falling outside the domain will be ignored.
Histo.init requiredConfig
|> Histo.withDomain ( 0, 1 )
|> Histo.render ( data, accessor )
withTableFloatFormat : (Basics.Float -> String) -> Config msg validation -> Config msg validation
An optional formatter for all float values in the alternative table content for accessibility.
Defaults to String.fromFloat
Histo.init requiredConfig
|> Histo.withTableFloatFormat String.fromFloat
|> Histo.render ( data, accessor )
withoutTable : Config msg validation -> Config msg validation
Do not build an alternative table content for accessibility
⚠ By default an alternative table is always being rendered. Use this option to not build the table.
Histo.init requiredConfig
|> Histo.withoutTable
|> Histo.render ( data, accessor )
withTitle : String -> Config msg validation -> Config msg validation
Sets an accessible title for the svg chart. Default value: ""
Histo.init requiredConfig
|> Histo.withTitle "This is a chart"
|> Histo.render ( data, accessor )
Chart.Internal.Axis.XAxis value
The XAxis type
Chart.Internal.Axis.YAxis value
The YAxis type
axisBottom : List (Axis.Attribute value) -> Chart.Internal.Axis.XAxis value
It returns an XAxis Bottom type
Histo.axisBottom [ Axis.tickCount 5 ]
axisLeft : List (Axis.Attribute value) -> Chart.Internal.Axis.YAxis value
A YAxis Left type
Histo.axisLeft [ Axis.tickCount 5 ]
axisRight : List (Axis.Attribute value) -> Chart.Internal.Axis.YAxis value
It returns an YAxis Right type
Histo.axisRight [ Axis.tickCount 5 ]
hideAxis : Config msg validation -> Config msg validation
Hide all axis.
Histo.init requiredConfig
|> Histo.hideAxis
|> Histo.render ( data, accessor )
hideXAxis : Config msg validation -> Config msg validation
Hide the X aixs.
Histo.init requiredConfig
|> Histo.hideXAxis
|> Histo.render ( data, accessor )
hideYAxis : Config msg validation -> Config msg validation
Hide the Y aixs.
Histo.init requiredConfig
|> Histo.hideYAxis
|> Histo.render ( data, accessor )
withXAxis : Chart.Internal.Axis.XAxis Basics.Float -> Config msg validation -> Config msg validation
Customise the xAxis
Histo.init requiredConfig
|> Histo.withXAxis (Histo.axisBottom [ Axis.tickCount 5 ])
|> Histo.render ( data, accessor )
withYAxis : Chart.Internal.Axis.YAxis Basics.Float -> Config msg validation -> Config msg validation
Customise the yAxis
Histo.init requiredConfig
|> Histo.withYAxis (Histo.axisRight [ Axis.tickCount 5 ])
|> Histo.render ( data, accessor )
yColumnTitle : (Basics.Float -> String) -> Chart.Internal.Type.ColumnTitle