• 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 Pie Chart Using DOJO?

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

DOJO is one of the greatest JavaScript framework for building the charting applications. But, it is not widely used in many applications due to the lack of popularity and lack of community awareness for the DOJO framework. However, the recent developments with this framework offers wide range of options for drawing the charting tools. I would write series of articles on DOJO framework and charting capabilities in detail. Subscribe to our blog here to get the latest updates from our website. This article explores the Pie Chart functionality in the DOJO charting API. It is only the very basic how to start creating the simple Pie Chart with the limited set of data. In my next articles, I would come up with few advanced charts with dynamic data. (Read: How to setup DOJO application?)

DOJO ToolKit

Pie Charts are most widely used for representing the data in the graphical way. WikiPedia defines pie chart as follows “A pie chart (or a circle graph) is a circular chart divided into sectors, illustrating numerical proportion“. In DOJO, charting can be done using the API dojox.charting.Chart. This is the common API which has set of attributes to define the different type of charts. I have used DOJO 1.9 for writing this example program. Look into the following sample code:

HTML Code:


<!--Green Pie Chart -->
<div id="pieChart1" style="width: 600px; height: 200px; "></div>
<!--Blue Pie Chart-->
<div id="pieChart2" style="width: 600px; height: 200px;"></div>

JavaScript Code (DOJO):


require(["dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Pie",
"dojox/charting/themes/PlotKit/green",
"dojox/charting/themes/PlotKit/blue",
"dojox/charting/action2d/MoveSlice",
"dojo/ready"],
function(Chart, Default, Pie,green,blue,MoveSlice, ready){
ready(function(){
var chart1 = new Chart("pieChart1");
chart1.addPlot("default", {type: Pie});
chart1.setTheme(green);
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
var mag1 = new dojox.charting.action2d.MoveSlice(chart1,"default");
chart1.render();

var chart2 = new Chart("pieChart2");
chart2.addPlot("default", {type: Pie});
chart2.setTheme(blue);
chart2.addAxis("x");
chart2.addAxis("y", {vertical: true});
chart2.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
var mag2 = new dojox.charting.action2d.MoveSlice(chart2,"default");
chart2.render();

});
});

dojox.charting.Chart

This is the JavaScript class used for creating the chart widget. This can be created any number of times depends on how many widgets required. In the above examples, I have created two pie chart widgets named as green and blue.

dojox.charting.themes.PlotKit.green

This is the theme for the background color and styles. DOJO has the predefined set of themes and its API reference which can be initiated and used for your charts. You can find the list of available themes here.

dojox.charting.action2d.MoveSlice

This is very nice effect while moving the mouse over to the pie chart. A slice will be moved out and indicate the selection area. This appearance gives very good feel for the widget.

DOJO Pie Chart Example

You can view the live demo of DOJO Pie Chart.

Reference:
  • DOJO Charting
  • Dojo Charts Part 1 – Pie Charts

Recommended Books:

  • Learning DOJOnofollow
  • JavaScript Pocket Referencenofollow
  • 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 Tooltip in DOJO?
Next Post: How To Create Bar Chart Using DOJO? »

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