• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

How To Create Bar Chart Using DOJO?

September 11, 2013 //  by Krishna Srinivasan//  Leave a Comment

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:

  • Learning DOJO
  • JavaScript Pocket Reference
  • Head First jquery

Category: DOJOTag: DOJO

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.

Previous Post: « How To Create Pie Chart Using DOJO?
Next Post: How to check the java compiler version from a java class file? »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact