- Download source files
- Run
npm installto install all dependencies. - Run
node buildornpm run buildto bundleapp.jsintobundle.js
- Open
index.htmlin a browser.
Last active
November 18, 2016 13:40
-
-
Save jon-a-nygaard/be9eb01f644998a15a5b51e0d45d68cf to your computer and use it in GitHub Desktop.
Example of Highcharts and its boost module loaded using Webpack.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| const Highcharts = require('highcharts'); | |
| require('highcharts/modules/boost')(Highcharts); | |
| const range = n => Array.from({ length: n }).map((_, i) => i); | |
| const getData = (n) => { | |
| let arr = [], | |
| a, | |
| b, | |
| c, | |
| spike; | |
| return arr = range(n).reduce((arr, i) => { | |
| if (i % 100 === 0) { | |
| a = 2 * Math.random(); | |
| } | |
| if (i % 1000 === 0) { | |
| b = 2 * Math.random(); | |
| } | |
| if (i % 10000 === 0) { | |
| c = 2 * Math.random(); | |
| } | |
| if (i % 50000 === 0) { | |
| spike = 10; | |
| } else { | |
| spike = 0; | |
| } | |
| arr.push([ | |
| i, | |
| 2 * Math.sin(i / 100) + a + b + c + spike + Math.random() | |
| ]); | |
| return arr; | |
| }, []) | |
| }; | |
| const data = getData(500000); | |
| console.time('area'); | |
| Highcharts.chart('container', { | |
| chart: { | |
| type: 'area', | |
| zoomType: 'x' | |
| }, | |
| title: { | |
| text: 'Trimmed Highcharts drawing ' + data.length + ' points' | |
| }, | |
| subtitle: { | |
| text: 'Using the experimental Highcharts Boost module' | |
| }, | |
| tooltip: { | |
| valueDecimals: 2 | |
| }, | |
| series: [{ | |
| data: data | |
| }] | |
| }) | |
| console.timeEnd('area'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| const webpack = require('webpack'); | |
| webpack({ | |
| entry: "./app.js", | |
| output: { | |
| path: __dirname, | |
| filename: "bundle.js" | |
| }, | |
| }, (err) => { | |
| if (err) { | |
| console.log(err) | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Highcharts Boost module with Webpack</title> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script src="./bundle.js" type="text/javascript"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "highcharts-boost-webpack", | |
| "version": "1.0.0", | |
| "description": "Load Highcharts Boost Module with Webpack", | |
| "main": "index.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "build": "node build.js" | |
| }, | |
| "author": "Jon Arild Nygård", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "webpack": "^1.13.3" | |
| }, | |
| "dependencies": { | |
| "highcharts": "^5.0.3" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment