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