Array Dojo 1.6 charting with datastores
by zemanel
HTML
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css">
<div id="memoryChart" class="chart"></div>
CSS
body {
background: #F6F6F6;
}
h1, h2, h3, h4, h5, h6, embed, object, svg {
font-family: LeagueGothic, Impact, sans-serif;
font-weight: normal;
margin-bottom: 16px;
}
h3 {
color: #666666;
margin-bottom: 3px;
}
div.chart {
width: 500px;
height: 250px;
margin: 5px auto 0px auto;
}
JavaScript
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.charting.DataChart");
dojo.require("dojox.charting.themes.PlotKit.blue");
dojo.require("dojox.charting.DataSeries");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Lines");
dojo.ready(function(){
var sampleData = {
'identifier': 'processID',
'idAttribute': 'processID',
'label': 'tabTitle',
'items': [
{
'processID' : 1,
'tabTitle' : "Tab 1",
'memory' : [1,2,3,45, 47],
'cpu' : 10,
'network' : 14
},
{
'processID' : 2,
'tabTitle' : "Tab 2",
'memory' : [1,8,3,24, 51],
'cpu' : 50,
'network' : 40
}
]
};
var datastore = new dojo.data.ItemFileWriteStore({data: sampleData});
var chart1 = new dojox.charting.DataChart("memoryChart",{
//displayRange:20,
yaxis: {to: 100, vertical: true, fixLower: "major", fixUpper: "major", includeZero: true,natural:true},
type: dojox.charting.plot2d.Lines
});
chart1.setStore(datastore, {processID:"*"}, "memory");
});