Dojox charting

1. Dojox charting • Karthick S

2. Dojo Charting • Presenting statistical data in a readable, eye-catching manner is important, but it can also be difficult. • The dojox/charting system was created to alleviate those pains by allowing developers to create dynamic, unique, and functional charts from varying sets of data. • In addition, dojox/charting provides numerous themes and chart types to allow developers to display their data any way they'd like. • This tutorial will show you how to create basic charts with varying data, plots, axes, and themes.

3. dojox/charting • Allows charts to be created with HTML (declaratively) or with JavaScript (programmatically) • Works on almost all devices • Can render charts in SVG, VML, Silverlight, and Canvas. An effort to allow SVGWeb rendering is also under way. • Allows for the developer to decide which renderer to use • Evaluates the client and uses an appropriate renderer based on what the client supports • Creates charts with dojox/gfx, a powerful vector graphic library capable of making your charts animate in a wide variety of ways • Comes packaged with dozens of attractive, diverse themes • Allows for linear and radial gradients within chart themes (and even works in Internet Explorer!)

4. Configuring dojox/charting • Before creating these wonderful charts, it's important to make chart resources available within the page. • require([ • // Require the basic 2d chart resource • "dojox/charting/Chart", • // Require the theme of our choosing • "dojox/charting/themes/Claro", • ], function(Chart, theme){ • // .... • } • If a specific rendering priority is preferred, it may be added to the dojoConfig object that's created before loading Dojo: • dojoConfig = { • parseOnLoad: true, //enables declarative chart creation • gfxRenderer: "svg,silverlight,vml" // svg is first priority • }; • </script> • <script src="/path/to/dojo/dojo/dojo.js"></script>

5. Line Chart • <div id="simplechart" style="width: 250px; height: 150px;"></div> • require([ • "dojox/charting/Chart", • "dojox/charting/plot2d/Lines", • "dojox/charting/axis2d/Default", • "dojo/domReady!" • ], • function (Chart) { • var chart = new Chart("simplechart"); • chart.addPlot("default", {type: "Lines"}); • chart.addAxis("x"); • chart.addAxis("y", {vertical: true}); • chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); • chart.render(); • }); • </script> • </body> • </html>

6. addPlot() • The addPlot() call determines what type of chart you are going to produce, and there are a variety of options to select. • addPlot() accepts 2 arguments, a name and an options object. The name is important if you want to have more than 1 plot type on your chart. • Note that your choice of plot type may define appropriate default options. • type is the main option, and the default value is a basic line chart, but it doesn’t hurt to indicate it anyway so that for other developers (or future-you) your intentions are clear: • chart.addPlot("default", {type: “Lines"}); • chart.addPlot("default", {type: "StackedAreas", lines: true, areas: true, markers: false});

7. Available 2D chart types • Areas – Area under data line(s) will be filled • Bars – Horizontal bars. • ClusteredBars – Horizontal bars with clustered data sets • ClusteredColumns – Vertical bars with clustered data sets • Columns – Vertical bars • Grid – For adding a grid layer to you chart • Lines – Basic line chart • Markers – Lines with markers • MarkersOnly – Markers, sans lines • Pie – Goes great with punch! • Scatter – Cooler name for MarkersOnly • Stacked – Data sets charted in relation to the previous data set. • StackedAreas – Stacked data sets with filled areas under chart lines • StackedBars – Stacked data sets with horizontal bars • StackedColumns – Stacked data sets with vertical bars • StackedLines – Stacked data sets using lines

8. Multiple Plots • require([ • "dojox/charting/Chart", • "dojox/charting/plot2d/Lines", • "dojox/charting/plot2d/Areas", • "dojox/charting/axis2d/Default", • "dojo/domReady!" • ], • function (Chart) { • var chart = new Chart("simplechart"); • chart.addPlot("default", {type: "Lines"}); • chart.addPlot("someOtherPlot", {type: "Areas"}); • chart.addAxis("x"); • chart.addAxis("y", {vertical: true}); • chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); • chart.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3], • {plot: "someOtherPlot", stroke: {color:"blue"}, fill: "blue"}); • chart.render(); • });

9. Accessing the Axis • The addAxis() call on a chart has several options for defining axes. • Similar to addPlot(), this call takes 2 parameters, a name and an options object. You will need to use “x” and “y” as your axes names unless you gave them custom names in your addPlot() call.

10. Accessing the Axis • The first option is vertical, which determines if the axis is vertical or horizontal, and defaults to false, which of course means the axis would be horizontal. Make sure that your alignment matches with values set for hAxis and vAxis, which are “x” and “y” by default, on your plot or your chart will not render. • chart.addPlot("default", {type: "Lines", hAxis: "x", vAxis: "y"}); • chart.addAxis("x"); • chart.addAxis("y", {vertical: true});

11. addSeries • Finally, we get to addSeries(), where we define the data sets that will be displayed on our chart. addSeries() accepts 3 parameters, a name, a data array and an options object. • There is also an updateSeries() call that takes a name and data array for when you want to refresh your data. • Let’s run through the parameters available in the addSeries() call, then look at the data array.

12. addSeries • There are only a few parameters to cover for the addSeries() call. First up is stroke, which covers the color and width of your line or the border of your bar and column type graphs. Along with stroke we have fill, and it determines the color under the line in Areas type line graphs and determines the bar fill color for Bar and Column type graphs. If you are familiar with SVG or dojox.gfx, stroke and fill should be very familiar. • chart.addSeries( • "Series 1", • [1, 2, 4, 5, 5, 7], • {stroke: {color: "red", width: 2}, fill: "blue"} • );