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?).

DOJO ToolKit

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.

DOJO Bar Chart ExampleYou can view the live demo of DOJO Bar Chart.

Reference Books:

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Trackbacks

  1. […] my previous article I have explained about the pie chart, bar chart and how to setup DOJO framework. These examples are written with very basic concepts to make the […]

  2. […] Bar Chart (Bar Chart Using DOJO) […]

Speak Your Mind

*