SLIDE 1
@chwenz
CONSULTANT, SOFTWARE ARCHITECT
[2, 3, 5, 8] [[1, 1], [2, 4], [3, 9], [4, 16]] [{ x: 1, y: 1, name: "Q1", color: "#2A9FBC"}, ...}]
t Y coordinates t X/Y coordinates t More options
Creating More Complex Charts Christian Wenz CONSULTANT, SOFTWARE - - PowerPoint PPT Presentation
Creating More Complex Charts Christian Wenz CONSULTANT, SOFTWARE - - PowerPoint PPT Presentation
Creating More Complex Charts Christian Wenz CONSULTANT, SOFTWARE ARCHITECT @chwenz [2, 3, 5, 8] t Y coordinates [[1, 1], [2, 4], [3, 9], [4, 16]] t X/Y coordinates [{ t More options x: 1, y: 1, name: "Q1", color:
SLIDE 2
SLIDE 3
dataSorting: { enabled: true, sortKey: 'y' }
Sorting Data
SLIDE 4
JSON
Loading External Data
CSV Google Spreadsheet HTML
SLIDE 5
new Highcharts.Chart({ chart: { events: { load: pullData } } } chart.series[0] .addPoint( [x, y], true, false, true);
t Load data once chart is ready t Access first series t Add data point t Coordinates t Redraw t Shift off one point t Animate
SLIDE 6
Demo
t h s
Create server API to produce random data Periodically call server API
SLIDE 7
Useful Resources
https://www.highcharts.com/demo https://www.highcharts.com/use-cases/ https://api.highcharts.com/highcharts/
SLIDE 8
t h s