Convert a table of data to a chart be used with a charting library
Morris.js Chartist
There are three external libraries required. The libraries should be placed in your "libraries" directory.
Make sure to enable the display extender attributes in views.
admin/structure/views/settings/advanced
- Add the class "table-chart" to the wrapping element around your table
- Ensure the table_chart library is attached to your page. ['#attached']['library'][] = 'table_chart/tabletochart' ['#attached']['library'][] = 'table_chart/' NAME OF CHARING LIBRARY (chartist, morrijs)
- You have a chart!
- Use the Views to generate your table
- Add the class "table-chart" to your view
- Set the charting library to use in the Advanced/Other section, set the "Charting library"
- You have a chart!
You can control the display of the chart and the columns used using data attributes on your table and columns. Take any of the following options and preface with 'data-*'.
Ex:
<div class="table-chart">
<table data-morris-type="line" data-morris-colors="red">...</table>
</div>
Here are the available options:
morris-type : The type of chart: Options include bar, line, donut and area. Default is line.
morris-colors : Comma separated list of colors. Hex values (including the # symbol) or a default color (red, green, blue, etc...)
morris-resize : Boolean value to enable automatic resizing (i.e. responsive charts, requires latest dev version of Morris.js
morris-lineWidth : Specify line width
morris-pointSize : Specify the point size
morris-pointFillColors : Specify point fill colours
morris-pointStrokeColors : Specify point stroke colours
morris-ymax : Y max value
morris-ymin : Y min value
morris-smooth : Boolean smooth flag
morris-hideHover : Boolean flag hide hover
morris-hoverCallback : Hover callback function
morris-parseTime : Boolean parse time
morris-postUnits : Post units
morris-preUnits : Pre units
morris-dateFormat : Date format
morris-xLabels : X Labels
morris-xLabelFormat : X Lable format
morris-yLabelFormat : Y Lable format
morris-goals : Goals
morris-goalStrokeWidth : Goal stroke width
morris-goalLineColors : Goal line colors
morris-events : Morris events
morris-eventStrokeWidth : Event stroke width
morris-eventLineColors : Event line colors
morris-continuousLine : Continuous Line
morris-axes : Axes
morris-grid : Grid
morris-gridTextColor : Grid text colour
morris-gridTextSize : Grid text size
morris-gridTextFamily : Grid text family
morris-gridTextWeight : Gride text weight
morris-fillOpacity : Fill opacity
morris-behaveLikeLine : Boolean behave like line
morris-formatter : Formatter
morris-xkey : A string containing the name of the attribute that contains date (X) values. (See morris js docs for more details). xKey will default to first column if omitted.
morris-ykeys : A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted). yKeys will default to second column and beyond if omitted.
morris-labels : A list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option). Labels will be automatically generated if omitted.
morris-stacked : Set to true to draw bars stacked vertically.
For more details on each option see https://github.com/lightswitch05/table-to-json
tabletojson-ignoreColumns : Comma separated list of columns to ignore. Use index values starting at zero (0) (e.g. Ignore the first, third and sixth columns - 0,2,5)
tabletojson-onlyColumns : Comma separated list of columns to include.
tabletojson-ignoreHiddenRows : Boolean value. Set to "true" or "false" accordingly. (e.g. data-tabletojson-ignoreHiddenRows=true)
tabletojson-headings : Comma separated list of headings to use. See https://github.com/lightswitch05/table-to-json for more details.
chartist-type : Available Options, bar, line, pie low high width height seriesBarDistance referenceValue stackBars stackMode horizontalBars distributeSeries reverseData showGridBackground showLine showPoint showArea areaBase lineSmooth showGridBackground fullWidth reverseData chartPadding startAngle total donut donutSolid donutWidth showLabel labelOffset labelPosition labelDirection reverseData ignoreEmptyValues