Showing posts with label dojo Build. Show all posts
Showing posts with label dojo Build. Show all posts

Sunday, 1 April 2012

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">
<!-- load dojo and provide config via data attribute -->
<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>

<!-- create the chart -->
<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.