Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Customer Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers

Highcharts Configuration Preview

/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

    var chart = Highcharts.charts[0];

    chart.showLoading('Loading data from server...');
    $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
            '&end=' + Math.round(e.max) + '&callback=?', function (data) {

        chart.series[0].setData(data);
        chart.hideLoading();
    });
}

// See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {

    // Add a null value for the end date
    data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);

    // create the chart
    Highcharts.stockChart('container', {
        chart: {
            type: 'candlestick',
            zoomType: 'x'
        },

        navigator: {
            adaptToUpdatedData: false,
            series: {
                data: data
            }
        },

        scrollbar: {
            liveRedraw: false
        },

        title: {
            text: 'AAPL history by the minute from 1998 to 2011'
        },

        subtitle: {
            text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
        },

        rangeSelector: {
            buttons: [{
                type: 'hour',
                count: 1,
                text: '1h'
            }, {
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false, // it supports only days
            selected: 4 // all
        },

        xAxis: {
            events: {
                afterSetExtremes: afterSetExtremes
            },
            minRange: 3600 * 1000 // one hour
        },

        yAxis: {
            floor: 0
        },

        series: [{
            data: data,
            dataGrouping: {
                enabled: false
            }
        }]
    });
});

Highstock Demos › 1.7 million points with async loading

Default Dark Unica Sand Signika Grid Light
  • General
    • Advanced stock chart
    • Single line series
    • Two panes, candlestick and volume
    • Compare multiple series
    • 52,000 points with data grouping
    • 1.7 million points with async loading
    • Intraday area
    • Intraday with breaks
    • Intraday candlestick
    • Flags marking events
    • Responsive chart
    • Dynamically updated data
  • Chart types
    • Line with markers and shadow
    • Spline
    • Step line
    • Area
    • Area spline
    • Area range
    • Area spline range
    • Candlestick
    • OHLC
    • Column
    • Column range
    • Point markers only
  • Various features
    • Plot lines on Y axis
    • Plot bands on Y axis
    • Reversed Y axis
    • Styled scrollbar
    • Disabled scrollbar
    • Disabled navigator
  • Flags and Indicators
    • MACD pivot points
    • SMA volume by price
    • Flags placement
    • Flags shapes and colors
Hide Menu More...

1.7 million points with async loading

Edit in jsFiddle Edit in CodePen Edit in Highcharts Cloud
© 2018 Highcharts. All rights reserved.