Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | jQuery(document).ready(function() { |
| 2 | // HIGHSTOCK DEMOS |
||
| 3 | |||
| 4 | // COMPARE MULTIPLE SERIES |
||
| 5 | var seriesOptions = [], |
||
| 6 | seriesCounter = 0, |
||
| 7 | names = ['MSFT', 'AAPL', 'GOOG'], |
||
| 8 | // create the chart when all data is loaded |
||
| 9 | createChart = function () { |
||
| 10 | |||
| 11 | $('#highstock_1').highcharts('StockChart', { |
||
| 12 | chart : { |
||
| 13 | style: { |
||
| 14 | fontFamily: 'Open Sans' |
||
| 15 | } |
||
| 16 | }, |
||
| 17 | |||
| 18 | rangeSelector: { |
||
| 19 | selected: 4 |
||
| 20 | }, |
||
| 21 | |||
| 22 | yAxis: { |
||
| 23 | labels: { |
||
| 24 | formatter: function () { |
||
| 25 | return (this.value > 0 ? ' + ' : '') + this.value + '%'; |
||
| 26 | } |
||
| 27 | }, |
||
| 28 | plotLines: [{ |
||
| 29 | value: 0, |
||
| 30 | width: 2, |
||
| 31 | color: 'silver' |
||
| 32 | }] |
||
| 33 | }, |
||
| 34 | |||
| 35 | plotOptions: { |
||
| 36 | series: { |
||
| 37 | compare: 'percent' |
||
| 38 | } |
||
| 39 | }, |
||
| 40 | |||
| 41 | tooltip: { |
||
| 42 | pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', |
||
| 43 | valueDecimals: 2 |
||
| 44 | }, |
||
| 45 | |||
| 46 | series: seriesOptions |
||
| 47 | }); |
||
| 48 | }; |
||
| 49 | |||
| 50 | $.each(names, function (i, name) { |
||
| 51 | |||
| 52 | $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) { |
||
| 53 | |||
| 54 | seriesOptions[i] = { |
||
| 55 | name: name, |
||
| 56 | data: data |
||
| 57 | }; |
||
| 58 | |||
| 59 | // As we're loading the data asynchronously, we don't know what order it will arrive. So |
||
| 60 | // we keep a counter and create the chart when all the data is loaded. |
||
| 61 | seriesCounter += 1; |
||
| 62 | |||
| 63 | if (seriesCounter === names.length) { |
||
| 64 | createChart(); |
||
| 65 | } |
||
| 66 | }); |
||
| 67 | }); |
||
| 68 | |||
| 69 | // CANDLESTICK CHART |
||
| 70 | $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) { |
||
| 71 | |||
| 72 | // split the data set into ohlc and volume |
||
| 73 | var ohlc = [], |
||
| 74 | volume = [], |
||
| 75 | dataLength = data.length, |
||
| 76 | // set the allowed units for data grouping |
||
| 77 | groupingUnits = [[ |
||
| 78 | 'week', // unit name |
||
| 79 | [1] // allowed multiples |
||
| 80 | ], [ |
||
| 81 | 'month', |
||
| 82 | [1, 2, 3, 4, 6] |
||
| 83 | ]], |
||
| 84 | |||
| 85 | i = 0; |
||
| 86 | |||
| 87 | for (i; i < dataLength; i += 1) { |
||
| 88 | ohlc.push([ |
||
| 89 | data[i][0], // the date |
||
| 90 | data[i][1], // open |
||
| 91 | data[i][2], // high |
||
| 92 | data[i][3], // low |
||
| 93 | data[i][4] // close |
||
| 94 | ]); |
||
| 95 | |||
| 96 | volume.push([ |
||
| 97 | data[i][0], // the date |
||
| 98 | data[i][5] // the volume |
||
| 99 | ]); |
||
| 100 | } |
||
| 101 | |||
| 102 | |||
| 103 | // create the chart |
||
| 104 | $('#highstock_2').highcharts('StockChart', { |
||
| 105 | chart : { |
||
| 106 | style: { |
||
| 107 | fontFamily: 'Open Sans' |
||
| 108 | } |
||
| 109 | }, |
||
| 110 | |||
| 111 | rangeSelector: { |
||
| 112 | selected: 1 |
||
| 113 | }, |
||
| 114 | |||
| 115 | title: { |
||
| 116 | text: 'AAPL Historical' |
||
| 117 | }, |
||
| 118 | |||
| 119 | yAxis: [{ |
||
| 120 | labels: { |
||
| 121 | align: 'right', |
||
| 122 | x: -3 |
||
| 123 | }, |
||
| 124 | title: { |
||
| 125 | text: 'OHLC' |
||
| 126 | }, |
||
| 127 | height: '60%', |
||
| 128 | lineWidth: 2 |
||
| 129 | }, { |
||
| 130 | labels: { |
||
| 131 | align: 'right', |
||
| 132 | x: -3 |
||
| 133 | }, |
||
| 134 | title: { |
||
| 135 | text: 'Volume' |
||
| 136 | }, |
||
| 137 | top: '65%', |
||
| 138 | height: '35%', |
||
| 139 | offset: 0, |
||
| 140 | lineWidth: 2 |
||
| 141 | }], |
||
| 142 | |||
| 143 | series: [{ |
||
| 144 | type: 'candlestick', |
||
| 145 | name: 'AAPL', |
||
| 146 | data: ohlc, |
||
| 147 | dataGrouping: { |
||
| 148 | units: groupingUnits |
||
| 149 | } |
||
| 150 | }, { |
||
| 151 | type: 'column', |
||
| 152 | name: 'Volume', |
||
| 153 | data: volume, |
||
| 154 | yAxis: 1, |
||
| 155 | dataGrouping: { |
||
| 156 | units: groupingUnits |
||
| 157 | } |
||
| 158 | }] |
||
| 159 | }); |
||
| 160 | }); |
||
| 161 | |||
| 162 | // OHLC CHART |
||
| 163 | $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function (data) { |
||
| 164 | |||
| 165 | // create the chart |
||
| 166 | $('#highstock_3').highcharts('StockChart', { |
||
| 167 | chart : { |
||
| 168 | style: { |
||
| 169 | fontFamily: 'Open Sans' |
||
| 170 | } |
||
| 171 | }, |
||
| 172 | |||
| 173 | rangeSelector : { |
||
| 174 | selected : 2 |
||
| 175 | }, |
||
| 176 | |||
| 177 | title : { |
||
| 178 | text : 'AAPL Stock Price' |
||
| 179 | }, |
||
| 180 | |||
| 181 | series : [{ |
||
| 182 | type : 'ohlc', |
||
| 183 | name : 'AAPL Stock Price', |
||
| 184 | data : data, |
||
| 185 | dataGrouping : { |
||
| 186 | units : [[ |
||
| 187 | 'week', // unit name |
||
| 188 | [1] // allowed multiples |
||
| 189 | ], [ |
||
| 190 | 'month', |
||
| 191 | [1, 2, 3, 4, 6] |
||
| 192 | ]] |
||
| 193 | } |
||
| 194 | }] |
||
| 195 | }); |
||
| 196 | }); |
||
| 197 | |||
| 198 | // LINE CHART WITH FLAGS |
||
| 199 | $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { |
||
| 200 | |||
| 201 | var year = new Date(data[data.length - 1][0]).getFullYear(); // Get year of last data point |
||
| 202 | |||
| 203 | // Create the chart |
||
| 204 | $('#highstock_4').highcharts('StockChart', { |
||
| 205 | chart : { |
||
| 206 | style: { |
||
| 207 | fontFamily: 'Open Sans' |
||
| 208 | } |
||
| 209 | }, |
||
| 210 | |||
| 211 | rangeSelector: { |
||
| 212 | selected: 1 |
||
| 213 | }, |
||
| 214 | |||
| 215 | title: { |
||
| 216 | text: 'USD to EUR exchange rate' |
||
| 217 | }, |
||
| 218 | |||
| 219 | yAxis: { |
||
| 220 | title: { |
||
| 221 | text: 'Exchange rate' |
||
| 222 | } |
||
| 223 | }, |
||
| 224 | |||
| 225 | series: [{ |
||
| 226 | name: 'USD to EUR', |
||
| 227 | data: data, |
||
| 228 | id: 'dataseries', |
||
| 229 | tooltip: { |
||
| 230 | valueDecimals: 4 |
||
| 231 | } |
||
| 232 | }, { |
||
| 233 | type: 'flags', |
||
| 234 | data: [{ |
||
| 235 | x: Date.UTC(year, 1, 22), |
||
| 236 | title: 'A', |
||
| 237 | text: 'Shape: "squarepin"' |
||
| 238 | }, { |
||
| 239 | x: Date.UTC(year, 3, 28), |
||
| 240 | title: 'A', |
||
| 241 | text: 'Shape: "squarepin"' |
||
| 242 | }], |
||
| 243 | onSeries: 'dataseries', |
||
| 244 | shape: 'squarepin', |
||
| 245 | width: 16 |
||
| 246 | }, { |
||
| 247 | type: 'flags', |
||
| 248 | data: [{ |
||
| 249 | x: Date.UTC(year, 2, 1), |
||
| 250 | title: 'B', |
||
| 251 | text: 'Shape: "circlepin"' |
||
| 252 | }, { |
||
| 253 | x: Date.UTC(year, 3, 1), |
||
| 254 | title: 'B', |
||
| 255 | text: 'Shape: "circlepin"' |
||
| 256 | }], |
||
| 257 | shape: 'circlepin', |
||
| 258 | width: 16 |
||
| 259 | }, { |
||
| 260 | type: 'flags', |
||
| 261 | data: [{ |
||
| 262 | x: Date.UTC(year, 2, 10), |
||
| 263 | title: 'C', |
||
| 264 | text: 'Shape: "flag"' |
||
| 265 | }, { |
||
| 266 | x: Date.UTC(year, 3, 11), |
||
| 267 | title: 'C', |
||
| 268 | text: 'Shape: "flag"' |
||
| 269 | }], |
||
| 270 | color: Highcharts.getOptions().colors[0], // same as onSeries |
||
| 271 | fillColor: Highcharts.getOptions().colors[0], |
||
| 272 | onSeries: 'dataseries', |
||
| 273 | width: 16, |
||
| 274 | style: { // text style |
||
| 275 | color: 'white' |
||
| 276 | }, |
||
| 277 | states: { |
||
| 278 | hover: { |
||
| 279 | fillColor: '#395C84' // darker |
||
| 280 | } |
||
| 281 | } |
||
| 282 | }] |
||
| 283 | }); |
||
| 284 | }); |
||
| 285 | |||
| 286 | }); |