Tuesday, October 23, 2012

Simple x y dojo chart example

This is a very simple x, y, chart using Dojo and sourcing the js and css from Google.  Copy the next part and save as a html file.


<!DOCTYPE html>
<html >
<head>
<script 
type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" 
dojoConfig = "{parseOnLoad: true}"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css"/>

<script type="text/javascript" >
dojo.require( "dojox.charting.Chart" );
dojo.require( "dojox.charting.axis2d.Default" );
dojo.require( "dojox.charting.plot2d.Lines" );

  dojo.ready(function(){
    var chart1 = new dojox.charting.Chart("simplechart",{title: "Basic XY chart" });
    chart1.addPlot("default", {type: dojox.charting.plot2d.Lines});
    chart1.addAxis("x", {title: "X axis", titleOrientation: "away"});
    chart1.addAxis("y", {vertical: true, title: "Y axis"});
    chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
    chart1.render();
  });
</script>
</head>
<body class="claro">
    <div id="simplechart" style="float:left; width: 350px; height: 350px; margin: 5px auto 0px auto;"></div>
</body>
</html>