<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><title>Demo: StoreSeries - Coordinate Series</title><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" media="screen"></head><body><h1>Demo: StoreSeries - Coordinate Series</h1><p>The chart below shows the sequence of point coordinate over a minute's time.</p><div id="chartNode" style="width:800px;height:400px;"></div><div id="legend"/><!-- load dojo and provide config via data attribute --><script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script><script>// Require all dependenciesrequire(["dojox/charting/Chart", "dojox/charting/themes/Claro", "dojo/store/Observable", "dojo/store/Memory", "dojox/charting/StoreSeries", "dojox/charting/action2d/Tooltip","dojox/charting/widget/Legend","dojox/charting/plot2d/Lines", "dojox/charting/axis2d/Default", "dojo/domReady!"], function(Chart, Claro, Observable, Memory, StoreSeries, Tooltip, Legend) {// Initial datavar data = [// This information, presumably, would come from a database or web service{ id: 1, x: 2, y: 20, site: 1 },{ id: 2, x: 3, y: 16, site: 1 },{ id: 3, x: 5, y: 11, site: 1 },{ id: 4, x: 8, y: 18, site: 1 },{ id: 5, x: 9, y: 26, site: 1 },{ id: 6, x: 10, y: 19, site: 1 },{ id: 7, x: 12, y: 20, site: 2 },{ id: 8, x: 13, y: 28, site: 2 },{ id: 9, x: 18, y: 12, site: 2 },{ id: 10, x: 21, y: 4, site: 2 },{ id: 11, x: 24, y: 17, site: 2 },{ id: 12, x: 25, y: 6, site: 2 }];// Create the data store// Store information in a data store on the client sidevar store = Observable(new Memory({data: {identifier: "id",label: "Site data-pair sequence",items: data}}));// Create the chart within it's "holding" node// Global so users can hit it from the consolechart = new Chart("chartNode");// Set the themechart.setTheme(Claro);// Add the only/default plot chart.addPlot("default", {type: "Lines",markers: true});// Add axeschart.addAxis("x", { microTickStep: 1, minorTickStep: 1, max: 60 });chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", minorTickStep: 1 });// Add tooltip for chartnew Tooltip(chart, "default", {text: function( o ) {return "x: " + o.x + "<br />" + "y: " + o.y;}});// Add the storeseries - Query for all datachart.addSeries("site 1", new StoreSeries(store, { query: { site: 1 } }, { x: "x", y: "y" }));chart.addSeries("site 2", new StoreSeries(store, { query: { site: 2 } }, { x: "x", y: "y" }));// Render the chart!chart.render();// Add legend for chartvar legend = new Legend({ chart: chart, horizontal: false}, 'legend');// Simulate a data chage from a store or servicevar startNumber = data.length, xOfSite1 = 10, xOfSite2 = 25;var interval = setInterval(function() {// Notify the store of a data changestore.notify({ id: ++startNumber, x: ++xOfSite1, y: Math.ceil(Math.random() * 60), site: 1 });store.notify({ id: ++startNumber, x: ++xOfSite2, y: Math.ceil(Math.random() * 60), site: 2 });if (startNumber == 120) {clearInterval(interval);}},1000);});</script></body></html>
