How To Create Bar Chart Using DOJO?

In my previous article I have explained about how to create Pie Chart using DOJO. In this article I will explain about the another variant of charts that is Bar Chart. Bar Chart is another most popular chart for representing the data. This chart is mostly used for comparing the two data in the various periods or various sections (Read: How to Setup DOJO Application?).

Look at the following code:

HTML Code:

<div id="reportTotalsChartDiv" style='display:block; clear:none; z-index:999;
width:100%; height:100%;'></div>

Java Script Code (DOJO):

require(["dojox/charting/Chart2D",
    "dojox/charting/plot2d/Columns",
    "dojox/charting/themes/Wetland",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/CubanShirts",
    "dojo/ready"],
function (Chart2D, Columns, Wetland, Highlight, Tooltip, CubanShirts, ready) {
    ready(function () {
        var c = new dojox.charting.Chart2D("reportTotalsChartDiv");
        c.addPlot("default", {
            type: "Columns",
            tension: 3,
            gap: 10
        });
        c.addAxis("x", {
            labels: [{
                value: 1,
                text: "Larger Bar"
            }, {
                value: 2,
                text: "Splited Bar"
            }],
            fixLower: "major",
            fixUpper: "major"
        });
        c.addAxis("y", {
           vertical: true,
            fixLower: "major",
            fixUpper: "major",
            min: 0
        });
        c.setTheme(dojox.charting.themes.Wetland);
        c.addSeries("Splited 1", [{
            x: 1,
            y: 0
        }, {
            y: 100,
            x: 2,
            tooltip: "Splited 1 ",
            text: "Splited 1"
        }], {
            stroke: {
                color: "red",
                width: 2
            },
            fill: "orange"
        });
        c.addSeries("Larger", [{
            y: 1000,
            x: 1,
            tooltip: "Larger",
            text: "Larger",
            stroke: {
                color: "blue",
                width: 2
            },
            fill: "lightblue"
        }, ]);
        c.addSeries("Splited 2", [{
            x: 1,
            y: 1
        }, {
            y: 300,
            x: 2,
            tooltip: "Splited 2",
            text: "Splited 2",
            color: "lightgreen",
            stroke: {
                color: "green",
                width: 2
            }
        }]);
        var a1 = new dojox.charting.action2d.Tooltip(c, "default");
        var a2 = new dojox.charting.action2d.Highlight(c, "default");
        c.render();
    });
});

The above code is declarative style of creating the charting widget. This is the best practice for writing the DOJO coding. The creation of the chart follows a simple steps – create the chart, add a plot, add x and y axis, add the data series and render the chart.  In this case the chart is rendered into the div with the id of “reportTotalsChartDiv”.

dojox.charting.Chart2D(“reportTotalsChartDiv”) would create the chart object and attach to the div element. Once you have created the chart object, start attaching other properties to the chart. Plot, theme, axis, series, etc. can be added individually to the chart object which is great to enhance your chart instance. Finally call to method  render will output the chart. Hope this example helps you to understand the basics of the DOJO Bar Chart.

You can view the live demo of DOJO Bar Chart.

Reference Books:

• Learning DOJO
• JavaScript Pocket Reference
• Head First jquery