Your cookie preferences were saved
In this example the values of the five number input fields are plotted on a bar graph. The handler function of each field updates a helper variable (with the value OK), which in turn uses its handler to query the values of all of the number fields, pass them to the chart, then draw the chart. The helper variable is called DrawGraph, the chart field BARCHART.
The helper variable field's function:
function (helper, fieldName, value, valid, eventName) { if (value == 'OK') { helper.updateFieldValue('BARCHART', [ { "Topping":"Mushrooms", "Amount":Number(helper.queryFieldValue("MUSHROOMS")) }, { "Topping":"Onions", "Amount":Number(helper.queryFieldValue("ONIONS")) }, { "Topping":"Olives", "Amount":Number(helper.queryFieldValue("OLIVES")) }, { "Topping":"Courgette", "Amount":Number(helper.queryFieldValue("COURGETTE")) }, { "Topping":"Pepperoni", "Amount":Number(helper.queryFieldValue("PEPPERONI")) } ]); helper.invokeCustomFieldFn("BARCHART", "drawChart"); helper.setVariable("DrawGraph", ""); }}
The Dimple field's script function looks like this:
helper.registerCustomFieldFn("BARCHART","manipulateData",function(data){return data;}); helper.registerCustomFieldFn("BARCHART", "initChart", function(chart) { chart.addCategoryAxis("x", "Topping"); chart.addMeasureAxis("y", "Amount"); chart.addSeries(null, dimple.plot.bar);});
It sets the x and y axis as named properties in the data, then adds the series. See addCategoryAxis, addMeasureAxis and addSeries in the Dimple documentation.
Change a value to see the graph update.
Share this page
Print
