Dojo Tutorials: Dojo Simple Build tutorial mobile Pie Chart

Author:Kiran Ignatius+

In this Tutorial, i will be running through a Step by Step , simple programtically generating Pie Chart in Dojo, and Creating a simple build Profile and through Command SDK making a build.

First download the DOJO latest version 1.7.1 or 1.7.2 SRC version (source version)
Download Click Here Version 1.7.2

Extract to a any folder , the Structure much contain 4 folders , DIJIT, DOJOX, DOJO, util.
Create a new folder named "demos" , the structure will look like below picture.

Now go into "demos" folder and create a new directory(folder) named "simpleChart"
inside that create a new file "index.html"

the contect of it will be as below
File name: "index.html"

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Basic Programmatic Chart</title>
<link rel="stylesheet" href="style.css" media="screen">

<script src="../../dojo/dojo.js"
data-dojo-config="async: true, isDebug: true, parseOnLoad: true">
</script>
<script src="src.js"></script>
<script>

// x and y coordinates used for easy understanding of where they should display
// Data represents website visits over a week period
chartData = [
{ x: 1, y: 19021 },
{ x: 1, y: 12837 },
{ x: 1, y: 12378 },
{ x: 1, y: 21882 },
{ x: 1, y: 17654 },
{ x: 1, y: 15833 },
{ x: 1, y: 16122 }
];
</script>
</head>
<body>
<h1>Demo: Basic Programmatic Chart</h1>


<div id="chartNode" style="width: 550px; height: 550px;"></div>

</body>
</html>

Now create a new file called "src.js" where we will be putting all the Script for creating the Pie Chart, the contents/source is as below.
File Name: "src.js"

require([
// Require the basic 2d chart resource
"dojox/charting/Chart",

// Require the theme of our choosing
"dojox/charting/themes/Claro",

// Charting plugins:

// Require the Pie type of Plot
"dojox/charting/plot2d/Pie",

// Wait until the DOM is ready
"dojo/domReady!"], function(Chart, theme, PiePlot) {

// Create the chart within it's "holding" node
var pieChart = new Chart("chartNode");

// Set the theme
pieChart.setTheme(theme);

// Add the only/default plot
pieChart.addPlot("default", {
type : PiePlot, // our plot2d/Pie module reference as type value
radius : 200,
fontColor : "black",
labelOffset : "-20"
});

// Add the series of data
pieChart.addSeries("January", chartData);

// Render the chart!
pieChart.render();

});

Now once u open the "index.html" in a browser it would look like

Now we will start writing the code for Build, in other words we will create a simple profile file for our project and then make a build.

First create a new file called "build.profile.js" and type in the code below,
file Name: "build.profile.js"

dependencies = {
layers: [
{
name: "../demos/simpleChart/src.js",
resourceName: "demos.simpleChart.src",
dependencies: [
"demos.simpleChart.src"
]
}
],

prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "demos", "../demos" ]
]
}

Now it time to make a build, open command promt, by typing "cmd" in run command, or directly opening CMD

In command promt, first go to location of our root directory
the folder which contains : dojo, dojox, dijit, util, and demos folder

Further get into : util/buildscripts

Now start typing the run command
"build profile=../../demos/simpleChart/build action=release releaseDir="simpleChartRelease"

*build is the command to initiate the build (build.bat for windows or build.sh for Mac or only build)
*profile name i have give only build, but if u observe the file name is "build.profile.js" the compiler which dojo has automatically appends .profile.js to any profile name we give, but if u want to give full name, no issues.
*action=release
*releaseDir is the directory were ur release files will gets generated/written

and hit enter on keyboard
after some minutes it will display finished as below

Now goto the folder util/buildscripts/simpleChartRelease/dojo
you will find the entire release folder which you can deploy for your project.

Sunday, 1 April 2012

Dojo Simple Build tutorial mobile Pie Chart

2 comments: