Enterprise Charts application with Dojo Toolkit & HTML 5 ,CSS 3 for iOS, Android,BlackBerry,Windows Phone Web apps


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 :

  • iPad View :

  • 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”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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:

 

  • iPhone 4s View:

 

  • Android View:

 

  • BlackBerry 9800 View :

  • 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”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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:

  • iPhone 4s View  :

  • Android 3 Tablet View: 

 

  • for 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:

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

2 Responses to Enterprise Charts application with Dojo Toolkit & HTML 5 ,CSS 3 for iOS, Android,BlackBerry,Windows Phone Web apps

  1. Pingback: Enterprise Charts application with Dojo Toolkit & HTML 5 ,CSS 3 for … - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications

  2. Pingback: Nature Inspired

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: