dashboard-charts

Dashboard Charts

A JavaScript library containing all of the default charts for use within the Dashboard Framework.

Click here to open an interactive example.

Adding a chart

1. Copy ./src/_template_ and rename in hyphenated-lowcase to the new chart's name: cp -R ./src/_template_ ./src/new-chart.
2. Update function name in ./src/new-chart/wrapper.js to newChart.
3. Update configuration files:
   • ./src/new-chart/configuration/rendererSettings.js: renderer-specific settings, like data mappings
   • ./src/new-chart/configuration/webchartsSettings.js: Webcharts chart settings that define the chart
   • ./src/new-chart/configuration/controlInputs.js: Webcharts controls settings
   • ./src/new-chart/configuration/syncSettings.js: sync renderer-specific settings and Webcharts chart settings, like applying data mappings
   • ./src/new-chart/configuration/syncControlInputs.js: sync renderer-specific settings and Webcharts controls settings, like applying data mappings
4. Update chart callbacks in ./src/new-chart/callbacks.
5. Update ./src/new-chart/settings-schema.js:
   • replace all instances of [ chart title ] with chart title
   • replace all instances of [ chart name ] with chart name (newChart in this example)
   • replace [ data structure ] with the input data structure
   • replace [ data file ] with the name of the test data file, e.g. dashboard-new-chart for a chart named newChart
   • for each setting in ./src/new-chart/configuration/rendererSettings, add a property to the properties object of the same name with these properties:
     • title
     • description
     • type
     • default
     • data-mapping
     • data-type
     • required
6. Update test page:
   • Run npm run build-test-pages from the command line, or...
   • In ./src/new-chart/test-page/index.html replace all instances of _ title _ with the chart title.
   • In ./src/new-chart/test-page/index.js:
     • Replace _ csv _ with the URL of the test data file.
     • Replace _main_ with the chart name (newChart in this example).

Links

• Interactive Example