Enterprise applications cant be imgined without the DataGrids / Charts view. The Open – source Mobile web development frameworks like Sencha Touch, RhoMobile, Dojo Toolkits all have excellent support for this enterprise wide charts & datagrids support for mobile web apps.
- Line Charts for Mobile Web with Dojo Mobile : Line charts provide excellent support for displaying Linear graphs with enterprise data & to view the data analysis for apps.
- Code Samples for Line Graphs with Dojo Mobile:
<!DOCTYPE HTML>
<html>
<head>
<title>Dojo Toolkit Mobile Charting</title>
<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”
djConfig=”parseOnLoad: true, isDebug: false”></script>
<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”
djConfig=”parseOnLoad:true, isDebug: false”></script>
<script>
dojo.require( “dojox.charting.Chart2D”);
dojo.require(“dojox.charting.themes.Tom”);
var chartData = [10000, 9200, 11811, 12000, 7662, 13887, 14200, 12222, 12000, 10009, 11288, 12099];
dojo.ready(
function () {
var chart = new dojox.charting.Chart2D(“chartNode”);
chart.setTheme(dojox.charting.themes.Tom);
chart.addPlot( “default”, {
type: “Lines”,
markers: true
});
chart.addAxis(“x”);
chart.addAxis( “y”, { min: 5000, max: 15000, vertical: true, fixLower: “major”, fixUpper: “major” });
chart.addSeries(“SalesThisDecade”, chartData);
chart.render();
});
</script>
<div id=”chartNode”style=”width:800px;height:400px;”></div>
- Lets View the Line Graph in iPhone 4S & iPad :
- Code Samples for Pie Charts with Dojo Mobile:
- Sample Code :
<!DOCTYPEhtmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Dojo Toolkit Mobile Charting</title>
<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”
djConfig=”parseOnLoad: true, isDebug: false”></script>
<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”
djConfig=”parseOnLoad:true, isDebug: false”></script>
<script>
dojo.require(“dojox.charting.Chart2D”);
dojo.require(“dojox.charting.action2d.Tooltip”);
dojo.require(“dojox.charting.action2d.MoveSlice”);
dojo.require(“dojox.charting.themes.Claro”);
var chartData=[10000,9200,11811,12000,7662,13887,14200,12223,13000,10004,11233,12088];
dojo.ready(
function() {
var chart = new dojox.charting.Chart2D(“chartNode”);
chart.setTheme(dojox.charting.themes.Claro);
chart.addPlot(“default”, {
type:“Pie”,
markers:true
});
chart.addAxis(“x”);
chart.addAxis(“y”,{min:5000,max:30000,vertical:true,fixLower:“major”,fixUpper:“major” });
chart.addSeries(“Monthly Sales-2010”, chartData);
var tip = new dojox.charting.action2d.Tooltip(chart,“default”);
var mag = new dojox.charting.action2d.MoveSlice(chart,“default”);
chart.render();
});
</script>
<div id=”chartNode”style=”width:800px;height:400px;”></div>
</head>
<body>
</body>
</html>
Lets View Pie Charts in iPhone, iPad & Android:
- Columnar Chart for Mobile Web with Dojo Mobile: Developing Columnar chart with HTML 5, CSS 3 media queries with Dojo toolkit is spectacular for Mobile web apps.
- Sample Code for Columnar Chart:
<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Dojo Toolkit Mobile Charting</title>
<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”
djConfig=”parseOnLoad: true, isDebug: false”></script>
<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”
djConfig=”parseOnLoad:true, isDebug: false”></script>
<script>
dojo.require(“dojox.charting.Chart2D”);
dojo.require(“dojox.charting.themes.MiamiNice”);
dojo.require(“dojox.charting.widget.Legend”);
dojo.require(“dojox.charting.action2d.Tooltip”);
dojo.require(“dojox.charting.action2d.Magnify”);
dojo.require(“dojox.charting.themes.Claro”);
// Define the Data
var chartData = [10000,9400,11874,13090,7665,13665,14677,12235,18000,11233,13077,10009];
//When the DOM is ready ready and resources are loaded
dojo.ready(
function () {
var chart = new dojox.charting.Chart2D(“chartNode”);
var legend1 = new dojox.charting.widget.Legend({ chart: chart }, “legend”);
// Set the theme
chart.setTheme(dojox.charting.themes.MiamiNice);
//Add the only /default plot
chart.addPlot(
“default”, {
type:
“Columns”,
markers:
true,
gap: 5
});
// Add axes
chart.addAxis(
“x”);
chart.addAxis(
“y”, { vertical: true, fixLower: “major”, fixUpper: “major” });
// Add the series of data
chart.addSeries(
“Monthly Sales”, chartData);
// Render the chart
chart.render();
});
</script>
<div id=”chartNode”style=”width:800px;height:400px;”></div>
<div id=”legend”></div>
</head>
<body>
</body>
</html>
- Lets View the Graph in iPhone, iPad , Android & Windows Phone:
- Lets add some Tooltip , Magnify , Highlight section for Enterprise Columnar Chart for Mobile:
<!DOCTYPEHTML>
<html>
<head>
<title>Dojo Toolkit Mobile Charting</title>
<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>
<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”
djConfig=”parseOnLoad: true, isDebug: false”></script>
<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”
djConfig=”parseOnLoad:true, isDebug: false”></script>
<script>
dojo.require(“dojox.charting.Chart2D”);
dojo.require(“dojox.charting.widget.Legend”);
dojo.require(“dojox.charting.action2d.Tooltip”);
dojo.require(“dojox.charting.action2d.Magnify”);
dojo.require(“dojox.charting.themes.Claro”);
var chartData1 = [10000, 9200, 11811, 12000, 7662, 13887, 14200, 12222, 12000, 10009, 11288, 12099];
var chartData2 = [3000, 12000, 17733, 9876, 12783, 12899, 13888, 13277, 14299, 12345, 12365, 15560];
var chartData3 = [4000, 12000, 16755, 14355, 13988, 13277, 14299, 12345, 12865, 18965, 57499, 14299].reverse();
dojo.ready(
function () {
var chart = new dojox.charting.Chart2D(“chartNode”);
chart.setTheme(dojox.charting.themes.Claro);
chart.addPlot(“default”, {
type:“Lines”,
markers:true
});
chart.addAxis(“x”);
chart.addAxis(“y”, { min: 5000, max: 30000, vertical: true, fixLower: “major”, fixUpper: “major” });
chart.addSeries(“SalesThisYear -2009”, chartData1);
chart.addSeries(“SalesThisYear – 2010”, chartData2);
chart.addSeries(“SalesThisYear -2011”, chartData3);
var tip = new dojox.charting.action2d.Tooltip(chart, “default”);
var mag = new dojox.charting.action2d.Magnify(chart, “default”);
chart.render();
var legend = new dojox.charting.widget.Legend({ chart: chart }, “legend”);
});
</script>
<div id=”chartNode”style=”width:800px;height:400px;”></div>
- Lets View the output in ipad 2:
- Android Tablet View for Columnar Chart with Dojo Mobile:
- Windows Phone 7.1 Landscape View for Columnar Charts with Maginify view, Tooltips:
Anindita's Blog 
You must be logged in to post a comment.