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: "#2A9FBC"}, ...}]

dataSorting: { enabled: true, sortKey: 'y' } Sorting Data

Loading External Data JSON CSV Google HTML Spreadsheet

new Highcharts.Chart({ chart: { events: { t Load data once chart is ready load: pullData } } } chart.series[0] t Access first series .addPoint( t Add data point [x, y], t Coordinates true, t Redraw false, t Shift off one point true); t Animate

t h s Demo Create server API to produce random data Periodically call server API

Useful Resources https://www.highcharts.com/demo https://www.highcharts.com/use-cases/ https://api.highcharts.com/highcharts/

t h s Summary Explore more chart options Connect external data sources Periodically update charts with new data