| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|---|
| 2 | <html style="height: 100%;"> |
|---|
| 3 | <head> |
|---|
| 4 | |
|---|
| 5 | <title>DataPresentation widget example</title> |
|---|
| 6 | |
|---|
| 7 | <style type="text/css"> |
|---|
| 8 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 9 | @import "../../../dojox/grid/resources/tundraGrid.css"; |
|---|
| 10 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 11 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 12 | </style> |
|---|
| 13 | |
|---|
| 14 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script> |
|---|
| 15 | <script type="text/javascript"> |
|---|
| 16 | |
|---|
| 17 | dojo.require("dojox.widget.DataPresentation"); |
|---|
| 18 | dojo.require("dojox.charting.themes.Minty"); |
|---|
| 19 | |
|---|
| 20 | var jsondata0 = { |
|---|
| 21 | "title" : "Softdrink Sales (2007)", |
|---|
| 22 | "footer" : "North America only", |
|---|
| 23 | "range" : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], |
|---|
| 24 | "series" : [ |
|---|
| 25 | { "legend" : "Cola", "line" : true, "values" : [ "35", "37", "44", "41", "43", "57", "62", "69", "74", "86", "101", "124" ] }, |
|---|
| 26 | { "legend" : "Lemonade", "values" : [ "122", "99", "111", "98", "82", "77", "76", "67", "72", "75", "66", "67" ] }, |
|---|
| 27 | { "legend" : "Dandelion and burdock", "values" : [ "99", "98", "98", "99", "97", "102", "100", "99", "102", "97", "95", "98" ] }, |
|---|
| 28 | { "legend" : "Ginger ale", "values" : [ "54", "59", "76", "84", "98", "110", "126", "121", "115", "109", "104", "99" ] }, |
|---|
| 29 | { "legend" : "Creme soda", "values" : [ "44", "58", "44", "36", "48", "54", "34", "38", "24", "56", "48", "34" ] }, |
|---|
| 30 | { "legend" : "Orangeade", "values" : [ "45", "25", "45", "31", "42", "33", "49", "34", "46", "25", "44", "37" ] }, |
|---|
| 31 | { "legend" : "Diet lemonade", "values" : [ "34", "17", "38", "13", "33", "14", "22", "39", "26", "17", "35", "21" ] }, |
|---|
| 32 | { "legend" : "Shandy", "values" : [ "14", "23", "16", "32", "12", "24", "18", "25", "13", "33", "15", "25" ] } |
|---|
| 33 | ] |
|---|
| 34 | }; |
|---|
| 35 | |
|---|
| 36 | // shake things up a bit, just for fun |
|---|
| 37 | setInterval(function() { |
|---|
| 38 | var series = Math.floor(jsondata0.series.length * Math.random()); |
|---|
| 39 | var value = Math.floor(jsondata0.series[series].values.length * Math.random()); |
|---|
| 40 | var newvalue = parseInt(jsondata0.series[series].values[value]) + Math.floor(11 * Math.random()) - 5; |
|---|
| 41 | jsondata0.series[series].values[value] = "" + newvalue; |
|---|
| 42 | }, 100); |
|---|
| 43 | |
|---|
| 44 | var jsondata1 = { |
|---|
| 45 | "title" : "Softdrink Sales (2007)", |
|---|
| 46 | "footer" : "North America only", |
|---|
| 47 | "sales" : [ |
|---|
| 48 | { "month": "Jan", "cola": "84", "lemonade": "75", "dandelionandburdock": "64", "gingerale": "54" }, |
|---|
| 49 | { "month": "Feb", "cola": "108", "lemonade": "65", "dandelionandburdock": "47", "gingerale": "43" }, |
|---|
| 50 | { "month": "Mar", "cola": "24", "lemonade": "85", "dandelionandburdock": "68", "gingerale": "76" }, |
|---|
| 51 | { "month": "Apr", "cola": "56", "lemonade": "75", "dandelionandburdock": "73", "gingerale": "92" }, |
|---|
| 52 | { "month": "May", "cola": "78", "lemonade": "82", "dandelionandburdock": "43", "gingerale": "32" }, |
|---|
| 53 | { "month": "Jun", "cola": "124", "lemonade": "43", "dandelionandburdock": "34", "gingerale": "54" }, |
|---|
| 54 | { "month": "Jul", "cola": "84", "lemonade": "59", "dandelionandburdock": "42", "gingerale": "78" }, |
|---|
| 55 | { "month": "Aug", "cola": "108", "lemonade": "34", "dandelionandburdock": "69", "gingerale": "65" }, |
|---|
| 56 | { "month": "Sep", "cola": "24", "lemonade": "76", "dandelionandburdock": "86", "gingerale": "43" }, |
|---|
| 57 | { "month": "Oct", "cola": "56", "lemonade": "65", "dandelionandburdock": "77", "gingerale": "43" }, |
|---|
| 58 | { "month": "Nov", "cola": "78", "lemonade": "34", "dandelionandburdock": "65", "gingerale": "45" }, |
|---|
| 59 | { "month": "Dec", "cola": "124", "lemonade": "67", "dandelionandburdock": "41", "gingerale": "65" } |
|---|
| 60 | ] |
|---|
| 61 | }; |
|---|
| 62 | |
|---|
| 63 | var salesnumbers = function(value, index){ |
|---|
| 64 | var ivalue = parseInt(value); |
|---|
| 65 | |
|---|
| 66 | if (ivalue > 100){ |
|---|
| 67 | return '<div style="text-align: right; background-color: #ddffcc; width: ' + (((ivalue * 80) / 130) + 20) + '%;">' + value + '</div>'; |
|---|
| 68 | }else{ |
|---|
| 69 | return '<div style="text-align: right; background-color: #ffddcc; width: ' + (((ivalue * 80) / 130) + 20) + '%;">' + value + '</div>'; |
|---|
| 70 | } |
|---|
| 71 | } |
|---|
| 72 | |
|---|
| 73 | var makeseries = function(data){ |
|---|
| 74 | if(!data.sales){ |
|---|
| 75 | return [ |
|---|
| 76 | { datapoints: "range", name: "Month", type: "range", chart: false }, |
|---|
| 77 | { datapoints: "series[0].values", namefield: "series[0].legend", gridformatter: salesnumbers }, |
|---|
| 78 | { datapoints: "series[1].values", name: "Lemonade (fizzy)", charttype: "line", gridformatter: salesnumbers }, |
|---|
| 79 | { datapoints: "series[2].values", namefield: "series[2].legend", gridformatter: salesnumbers }, |
|---|
| 80 | { datapoints: "series[3].values", namefield: "series[3].legend", gridformatter: salesnumbers } |
|---|
| 81 | ]; |
|---|
| 82 | }else{ |
|---|
| 83 | return [ |
|---|
| 84 | { datapoints: "sales", field: "month", name: "Month", type: "range", chart: false }, |
|---|
| 85 | { datapoints: "sales", field: "lemonade", name: "Lemonade (fizzy)" }, |
|---|
| 86 | { datapoints: "sales", field: "dandelionandburdock", name: "Dandelion and burdock" }, |
|---|
| 87 | { datapoints: "sales", field: "cola", name: "Cola" }, |
|---|
| 88 | { datapoints: "sales", field: "gingerale", name: "Ginger ale" } |
|---|
| 89 | ]; |
|---|
| 90 | } |
|---|
| 91 | } |
|---|
| 92 | |
|---|
| 93 | var dp; |
|---|
| 94 | |
|---|
| 95 | dojo.addOnLoad(function() { |
|---|
| 96 | |
|---|
| 97 | var jsondata = jsondata0; // (or jsondata1) |
|---|
| 98 | |
|---|
| 99 | dp = new dojox.widget.DataPresentation("chartdiv", { |
|---|
| 100 | type: "chart", |
|---|
| 101 | chartType: "Hybrid", |
|---|
| 102 | data: jsondata, |
|---|
| 103 | refreshInterval: 3000, |
|---|
| 104 | series: makeseries(jsondata), |
|---|
| 105 | legendNode: "legenddiv", |
|---|
| 106 | legendHorizontal: 2, |
|---|
| 107 | //labelMod: 2, // display every other x-axis label |
|---|
| 108 | //labelMod: 0, // suppress x-axis labels |
|---|
| 109 | gridNode: "griddiv", |
|---|
| 110 | titleNode: "title", |
|---|
| 111 | footerNode: "footer", |
|---|
| 112 | theme: "dojox.charting.themes.Minty", |
|---|
| 113 | labelMod: 2, |
|---|
| 114 | tooltip: "The value for this {0} for '{1}' in {2} is <b>{3}</b>" |
|---|
| 115 | }); |
|---|
| 116 | |
|---|
| 117 | }); |
|---|
| 118 | </script> |
|---|
| 119 | </head> |
|---|
| 120 | <body style="font-family: arial; font-size: 12px; height: 100%;" class="tundra"> |
|---|
| 121 | |
|---|
| 122 | <h1>An example of DataPresentation widget</h1> |
|---|
| 123 | |
|---|
| 124 | <p>This example shows automatic refresh (every 3 seconds), although this is |
|---|
| 125 | most useful in conjunction with a URL where the data may change each time. |
|---|
| 126 | To make something visible, some background code is tweaking the values randomly |
|---|
| 127 | so that the automatic refresh always pulls changed data. |
|---|
| 128 | </p> |
|---|
| 129 | |
|---|
| 130 | <p>To see how the widget can cope with different data shapes, switch from |
|---|
| 131 | jsondata0 to jsondata1 as the input data. jsondata0 is structured as complete |
|---|
| 132 | 'series' of values, gathered into an array with series titles. jsondata1 is |
|---|
| 133 | structures as 'data points', each containing multiple sales values. |
|---|
| 134 | </p> |
|---|
| 135 | |
|---|
| 136 | <p>Note that the widget is driving its own DOM node (the chart, in this case, |
|---|
| 137 | although it could be any of the components) and is also driving other nodes |
|---|
| 138 | containing the grid, legend, etc. |
|---|
| 139 | </p> |
|---|
| 140 | |
|---|
| 141 | <div style="width:400px; text-align: center;"> |
|---|
| 142 | <h2 id="title" style="margin-bottom: 0;"></h2> |
|---|
| 143 | <p id="footer" style="color: gray; font-size: 0.85em; margin-top: 0.2em;"></p> |
|---|
| 144 | </div> |
|---|
| 145 | |
|---|
| 146 | <div style="width: 450px; position: relative;"> |
|---|
| 147 | <div id="chartdiv" style="width: 400px; height: 300px;"></div> |
|---|
| 148 | <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);"> |
|---|
| 149 | <div id="legenddiv" style="z-index: 1;"></div> |
|---|
| 150 | </div> |
|---|
| 151 | </div> |
|---|
| 152 | |
|---|
| 153 | <p>Now here is the same data displayed in a grid (also driven by the same DataPresentation widget):</p> |
|---|
| 154 | |
|---|
| 155 | <div style="width:400px; height:240px;"> |
|---|
| 156 | <div id="griddiv"></div> |
|---|
| 157 | </div> |
|---|
| 158 | |
|---|
| 159 | </body> |
|---|
| 160 | </html> |
|---|
