Your cookie preferences were saved
This double line chart (called CHART) plots the following data:
[{"Date":"2017-11-01", "Gender":"Boy", "Count":1}, {"Date":"2017-11-01", "Gender":"Boy", "Count":1}, {"Date":"2017-11-01", "Gender":"Boy", "Count":1}, {"Date":"2017-11-01", "Gender":"Girl", "Count":1}, {"Date":"2017-11-02", "Gender":"Boy", "Count":1}, {"Date":"2017-11-02", "Gender":"Girl", "Count":1}, {"Date":"2017-11-02", "Gender":"Girl", "Count":1}, {"Date":"2017-11-02", "Gender":"Girl", "Count":1}, {"Date":"2017-11-02", "Gender":"Girl", "Count":1}, {"Date":"2017-11-03", "Gender":"Girl", "Count":1}, {"Date":"2017-11-03", "Gender":"Girl", "Count":1}, {"Date":"2017-11-03", "Gender":"Girl", "Count":1}, {"Date":"2017-11-03", "Gender":"Girl", "Count":1}, {"Date":"2017-11-03", "Gender":"Boy", "Count":1}, {"Date":"2017-11-03", "Gender":"Boy", "Count":1}, {"Date":"2017-11-04", "Gender":"Girl", "Count":1}, {"Date":"2017-11-04", "Gender":"Girl", "Count":1}, {"Date":"2017-11-04", "Gender":"Girl", "Count":1}, {"Date":"2017-11-04", "Gender":"Boy", "Count":1}, {"Date":"2017-11-04", "Gender":"Boy", "Count":1}]
For the sake of this example the data is set in the chart's default function. It would be more common for the default function to call an End Point (or other worker) to return the data.
In the script function we set up the x-axis and y-axis, then assign colours to the data and add a legend. The chart is also redrawn if the window changes size. You can find documentation of the various axis properties in the dimple.axis documentation.
helper.registerCustomFieldFn("CHART","manipulateData",function(data){ return data;});helper.registerCustomFieldFn("CHART","initChart",function(chart){ var xaxis = chart.addTimeAxis("x", "Date", "%Y-%m-%d", "%d/%m/%Y"); xaxis.fontSize = "12px"; var yaxis = chart.addMeasureAxis("y", "Count"); yaxis.title = "Number of Births"; yaxis.ticks = 5; yaxis.tickFormat = ""; yaxis.fontSize = "12px"; chart.addLegend(0, 10, "100%", 20, "right"); chart.addSeries("Gender", dimple.plot.line); chart.assignColor("Boy", "#C4D79B", "#8CB23A", 1); chart.assignColor("Girl", "#FABF8F", "#F49446", 1); window.onresize = function () { chart.draw(0, true); };});
Share this page
Print
