Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 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>