1<html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 7 <!-- AmCharts includes --> 8 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 9 <script src="http://www.amcharts.com/lib/3/serial.js"></script> 10 <script src="http://www.amcharts.com/lib/3/amstock.js"></script> 11 12 <!-- Export plugin includes and styles --> 13 <script src="../export.js"></script> 14 <link type="text/css" href="../export.css" rel="stylesheet"> 15 16 <style> 17 body, html { 18 height: 100%; 19 padding: 0; 20 margin: 0; 21 overflow: hidden; 22 font-size: 11px; 23 font-family: Verdana; 24 } 25 #chartdiv { 26 width: 100%; 27 height: 100%; 28 } 29 </style> 30 31 <script type="text/javascript"> 32 var chartData1 = []; 33 var chartData2 = []; 34 var chartData3 = []; 35 var chartData4 = []; 36 37 generateChartData(); 38 39 function generateChartData() { 40 var firstDate = new Date(); 41 firstDate.setDate( firstDate.getDate() - 500 ); 42 firstDate.setHours( 0, 0, 0, 0 ); 43 44 for ( var i = 0; i < 500; i++ ) { 45 var newDate = new Date( firstDate ); 46 newDate.setDate( newDate.getDate() + i ); 47 48 var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i; 49 var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2; 50 51 var a2 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i; 52 var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2; 53 54 var a3 = Math.round( Math.random() * ( 100 + i ) ) + 200; 55 var b3 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2; 56 57 var a4 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i; 58 var b4 = Math.round( Math.random() * ( 100 + i ) ) + 600 + i; 59 60 chartData1.push( { 61 date: newDate, 62 value: a1, 63 volume: b1 64 } ); 65 chartData2.push( { 66 date: newDate, 67 value: a2, 68 volume: b2 69 } ); 70 chartData3.push( { 71 date: newDate, 72 value: a3, 73 volume: b3 74 } ); 75 chartData4.push( { 76 date: newDate, 77 value: a4, 78 volume: b4 79 } ); 80 } 81 } 82 83 var chart = AmCharts.makeChart( "chartdiv", { 84 "type": "stock", 85 86 "dataSets": [ { 87 "title": "first data set", 88 "fieldMappings": [ { 89 "fromField": "value", 90 "toField": "value" 91 }, { 92 "fromField": "volume", 93 "toField": "volume" 94 } ], 95 "dataProvider": chartData1, 96 "categoryField": "date" 97 }, 98 99 { 100 "title": "second data set", 101 "fieldMappings": [ { 102 "fromField": "value", 103 "toField": "value" 104 }, { 105 "fromField": "volume", 106 "toField": "volume" 107 } ], 108 "dataProvider": chartData2, 109 "categoryField": "date" 110 }, 111 112 { 113 "title": "third data set", 114 "fieldMappings": [ { 115 "fromField": "value", 116 "toField": "value" 117 }, { 118 "fromField": "volume", 119 "toField": "volume" 120 } ], 121 "dataProvider": chartData3, 122 "categoryField": "date" 123 }, 124 125 { 126 "title": "fourth data set", 127 "fieldMappings": [ { 128 "fromField": "value", 129 "toField": "value" 130 }, { 131 "fromField": "volume", 132 "toField": "volume" 133 } ], 134 "dataProvider": chartData4, 135 "categoryField": "date" 136 } 137 ], 138 139 "panels": [ { 140 141 "showCategoryAxis": false, 142 "title": "Value", 143 "percentHeight": 70, 144 145 "stockGraphs": [ { 146 "id": "g1", 147 "valueField": "value", 148 "comparable": true, 149 "compareField": "value", 150 "balloonText": "[[title]]:<b>[[value]]</b>", 151 "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>" 152 } ], 153 154 "stockLegend": { 155 "periodValueTextComparing": "[[percents.value.close]]%", 156 "periodValueTextRegular": "[[value.close]]" 157 } 158 }, 159 160 { 161 "title": "Volume", 162 "percentHeight": 30, 163 "stockGraphs": [ { 164 "valueField": "volume", 165 "type": "column", 166 "showBalloon": false, 167 "fillAlphas": 1 168 } ], 169 170 171 "stockLegend": { 172 "periodValueTextRegular": "[[value.close]]" 173 } 174 } 175 ], 176 177 "chartScrollbarSettings": { 178 "graph": "g1" 179 }, 180 181 "chartCursorSettings": { 182 "valueBalloonsEnabled": true, 183 "fullWidth": true, 184 "cursorAlpha": 0.1, 185 "valueLineBalloonEnabled": true, 186 "valueLineEnabled": true, 187 "valueLineAlpha": 0.5 188 }, 189 190 "periodSelector": { 191 "position": "left", 192 "periods": [ { 193 "period": "MM", 194 "selected": true, 195 "count": 1, 196 "label": "1 month" 197 }, { 198 "period": "YYYY", 199 "count": 1, 200 "label": "1 year" 201 }, { 202 "period": "YTD", 203 "label": "YTD" 204 }, { 205 "period": "MAX", 206 "label": "MAX" 207 } ] 208 }, 209 210 "dataSetSelector": { 211 "position": "left" 212 }, 213 214 "export": { 215 "enabled": true 216 } 217 } ); 218 </script> 219 </head> 220 <body> 221 <div id="chartdiv"></div> 222 </body> 223</html>