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>