You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
7.3 KiB
160 lines
7.3 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
<html style="height: 100%;"> |
|
<head> |
|
|
|
<title>DataPresentation widget example</title> |
|
|
|
<style type="text/css"> |
|
@import "../../../dijit/themes/tundra/tundra.css"; |
|
@import "../../../dojox/grid/resources/tundraGrid.css"; |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script> |
|
<script type="text/javascript"> |
|
|
|
dojo.require("dojox.widget.DataPresentation"); |
|
dojo.require("dojox.charting.themes.Minty"); |
|
|
|
var jsondata0 = { |
|
"title" : "Softdrink Sales (2007)", |
|
"footer" : "North America only", |
|
"range" : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], |
|
"series" : [ |
|
{ "legend" : "Cola", "line" : true, "values" : [ "35", "37", "44", "41", "43", "57", "62", "69", "74", "86", "101", "124" ] }, |
|
{ "legend" : "Lemonade", "values" : [ "122", "99", "111", "98", "82", "77", "76", "67", "72", "75", "66", "67" ] }, |
|
{ "legend" : "Dandelion and burdock", "values" : [ "99", "98", "98", "99", "97", "102", "100", "99", "102", "97", "95", "98" ] }, |
|
{ "legend" : "Ginger ale", "values" : [ "54", "59", "76", "84", "98", "110", "126", "121", "115", "109", "104", "99" ] }, |
|
{ "legend" : "Creme soda", "values" : [ "44", "58", "44", "36", "48", "54", "34", "38", "24", "56", "48", "34" ] }, |
|
{ "legend" : "Orangeade", "values" : [ "45", "25", "45", "31", "42", "33", "49", "34", "46", "25", "44", "37" ] }, |
|
{ "legend" : "Diet lemonade", "values" : [ "34", "17", "38", "13", "33", "14", "22", "39", "26", "17", "35", "21" ] }, |
|
{ "legend" : "Shandy", "values" : [ "14", "23", "16", "32", "12", "24", "18", "25", "13", "33", "15", "25" ] } |
|
] |
|
}; |
|
|
|
// shake things up a bit, just for fun |
|
setInterval(function() { |
|
var series = Math.floor(jsondata0.series.length * Math.random()); |
|
var value = Math.floor(jsondata0.series[series].values.length * Math.random()); |
|
var newvalue = parseInt(jsondata0.series[series].values[value]) + Math.floor(11 * Math.random()) - 5; |
|
jsondata0.series[series].values[value] = "" + newvalue; |
|
}, 100); |
|
|
|
var jsondata1 = { |
|
"title" : "Softdrink Sales (2007)", |
|
"footer" : "North America only", |
|
"sales" : [ |
|
{ "month": "Jan", "cola": "84", "lemonade": "75", "dandelionandburdock": "64", "gingerale": "54" }, |
|
{ "month": "Feb", "cola": "108", "lemonade": "65", "dandelionandburdock": "47", "gingerale": "43" }, |
|
{ "month": "Mar", "cola": "24", "lemonade": "85", "dandelionandburdock": "68", "gingerale": "76" }, |
|
{ "month": "Apr", "cola": "56", "lemonade": "75", "dandelionandburdock": "73", "gingerale": "92" }, |
|
{ "month": "May", "cola": "78", "lemonade": "82", "dandelionandburdock": "43", "gingerale": "32" }, |
|
{ "month": "Jun", "cola": "124", "lemonade": "43", "dandelionandburdock": "34", "gingerale": "54" }, |
|
{ "month": "Jul", "cola": "84", "lemonade": "59", "dandelionandburdock": "42", "gingerale": "78" }, |
|
{ "month": "Aug", "cola": "108", "lemonade": "34", "dandelionandburdock": "69", "gingerale": "65" }, |
|
{ "month": "Sep", "cola": "24", "lemonade": "76", "dandelionandburdock": "86", "gingerale": "43" }, |
|
{ "month": "Oct", "cola": "56", "lemonade": "65", "dandelionandburdock": "77", "gingerale": "43" }, |
|
{ "month": "Nov", "cola": "78", "lemonade": "34", "dandelionandburdock": "65", "gingerale": "45" }, |
|
{ "month": "Dec", "cola": "124", "lemonade": "67", "dandelionandburdock": "41", "gingerale": "65" } |
|
] |
|
}; |
|
|
|
var salesnumbers = function(value, index){ |
|
var ivalue = parseInt(value); |
|
|
|
if (ivalue > 100){ |
|
return '<div style="text-align: right; background-color: #ddffcc; width: ' + (((ivalue * 80) / 130) + 20) + '%;">' + value + '</div>'; |
|
}else{ |
|
return '<div style="text-align: right; background-color: #ffddcc; width: ' + (((ivalue * 80) / 130) + 20) + '%;">' + value + '</div>'; |
|
} |
|
} |
|
|
|
var makeseries = function(data){ |
|
if(!data.sales){ |
|
return [ |
|
{ datapoints: "range", name: "Month", type: "range", chart: false }, |
|
{ datapoints: "series[0].values", namefield: "series[0].legend", gridformatter: salesnumbers }, |
|
{ datapoints: "series[1].values", name: "Lemonade (fizzy)", charttype: "line", gridformatter: salesnumbers }, |
|
{ datapoints: "series[2].values", namefield: "series[2].legend", gridformatter: salesnumbers }, |
|
{ datapoints: "series[3].values", namefield: "series[3].legend", gridformatter: salesnumbers } |
|
]; |
|
}else{ |
|
return [ |
|
{ datapoints: "sales", field: "month", name: "Month", type: "range", chart: false }, |
|
{ datapoints: "sales", field: "lemonade", name: "Lemonade (fizzy)" }, |
|
{ datapoints: "sales", field: "dandelionandburdock", name: "Dandelion and burdock" }, |
|
{ datapoints: "sales", field: "cola", name: "Cola" }, |
|
{ datapoints: "sales", field: "gingerale", name: "Ginger ale" } |
|
]; |
|
} |
|
} |
|
|
|
var dp; |
|
|
|
dojo.addOnLoad(function() { |
|
|
|
var jsondata = jsondata0; // (or jsondata1) |
|
|
|
dp = new dojox.widget.DataPresentation("chartdiv", { |
|
type: "chart", |
|
chartType: "Hybrid", |
|
data: jsondata, |
|
refreshInterval: 3000, |
|
series: makeseries(jsondata), |
|
legendNode: "legenddiv", |
|
legendHorizontal: 2, |
|
//labelMod: 2, // display every other x-axis label |
|
//labelMod: 0, // suppress x-axis labels |
|
gridNode: "griddiv", |
|
titleNode: "title", |
|
footerNode: "footer", |
|
theme: "dojox.charting.themes.Minty", |
|
labelMod: 2, |
|
tooltip: "The value for this {0} for '{1}' in {2} is <b>{3}</b>" |
|
}); |
|
|
|
}); |
|
</script> |
|
</head> |
|
<body style="font-family: arial; font-size: 12px; height: 100%;" class="tundra"> |
|
|
|
<h1>An example of DataPresentation widget</h1> |
|
|
|
<p>This example shows automatic refresh (every 3 seconds), although this is |
|
most useful in conjunction with a URL where the data may change each time. |
|
To make something visible, some background code is tweaking the values randomly |
|
so that the automatic refresh always pulls changed data. |
|
</p> |
|
|
|
<p>To see how the widget can cope with different data shapes, switch from |
|
jsondata0 to jsondata1 as the input data. jsondata0 is structured as complete |
|
'series' of values, gathered into an array with series titles. jsondata1 is |
|
structures as 'data points', each containing multiple sales values. |
|
</p> |
|
|
|
<p>Note that the widget is driving its own DOM node (the chart, in this case, |
|
although it could be any of the components) and is also driving other nodes |
|
containing the grid, legend, etc. |
|
</p> |
|
|
|
<div style="width:400px; text-align: center;"> |
|
<h2 id="title" style="margin-bottom: 0;"></h2> |
|
<p id="footer" style="color: gray; font-size: 0.85em; margin-top: 0.2em;"></p> |
|
</div> |
|
|
|
<div style="width: 450px; position: relative;"> |
|
<div id="chartdiv" style="width: 400px; height: 300px;"></div> |
|
<div style="position: absolute; top: 40px; right: 0px; padding: 0.2em 0.5em; border: 1px solid gray; background-color: rgba(255, 255, 221, 0.8);"> |
|
<div id="legenddiv" style="z-index: 1;"></div> |
|
</div> |
|
</div> |
|
|
|
<p>Now here is the same data displayed in a grid (also driven by the same DataPresentation widget):</p> |
|
|
|
<div style="width:400px; height:240px;"> |
|
<div id="griddiv"></div> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|