• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download
    • Download Chart
    • Download StockChart
  • Integrations
    • Front End Technology Samples
      • React Charts
      • Angular Charts
      • Vue.js Charts New!
      • jQuery Charts
      • Dashboards
    • Server Side Technology Samples
      • PHP Charts
      • Python Charts New!
      • ASP.NET MVC Charts
      • Spring MVC Charts
      • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
  • My Account
  • KEY FEATURES
    • StockChart with Numeric Axis
    • StockChart with Date-Time Axis
    • StockChart with Annotation / Indexlabel
    • StockChart with Print & Export as Image
    • Multi-Series StockChart with Navigator
    • StockChart with Async Data Loading
    • StockChart with Price & Volume
    • StockChart with Tooltip & Crosshair Syncing
    • StockChart with Combination Charts
    • Dynamic / Live StockChart
    • Dynamic / Live StockChart with StripLine
    • Stock Chart with DatePicker
  • CHART TYPES
    • StockChart with Line using JSON Data
    • StockChart with Spline Chart
    • StockChart with Area Chart
    • StockChart with Spline Area & Navigator
    • StockChart with Candlestick & Range Selector
    • StockChart with OHLC using JSON Data
    • StockChart with Range Spline Area
  • TECHNICAL INDICATORS
    • StockChart with SMA
    • StockChart with EMA
    • StockChart with MACD
    • StockChart with Technical Indicators

JavaScript StockChart with Async Data Loading

Download JavaScript StockChart Samples
  • JavaScript StockChart Samples
  • JavaScript Chart Samples
  • React Chart Samples
  • Angular Chart Samples
  • Vue.js Chart Samples
  • jQuery Chart Samples
  • PHP Chart Samples
  • Python Django Chart Samples
  • ASP.NET Chart Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples

Loading data asynchronously is useful when there is huge data and has the advantage of not slowing the page down. It's recommended to fetch data asynchronously for better User Experience. This also allows you to control resolution of data from the server side based on the range selected. In the below example, try changing range using navigator to load data of new range asynchronously.

Try Editing The Code

window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    title:{
      text:"Async Data Loading in StockChart"
    },
    rangeChanged: rangeChanged,
    charts: [{
      axisY2: {
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.##",
        axisYType: "secondary",
        dataPoints : dataPoints1
      }]
    }],
    navigator: {
      dynamicUpdate: false,
      data: [{
        dataPoints: dataPoints2
      }],
      slider: {
        minimum: new Date(2015, 05, 01),
        maximum: new Date(2019, 05, 01)
      }
    }
  });
  function addData(data) {
    stockChart.options.charts[0].data[0].dataPoints = [];
    for(var i = 0; i < data.length; i++){
      stockChart.options.charts[0].data[0].dataPoints.push({x: new Date(data[i].dateTime*1000), y: [ Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close) ]});
    }
    stockChart.render();
  }
  function rangeChanged(e) {
    var minimum = parseInt(e.minimum / 1000);
    var maximum = parseInt(e.maximum / 1000);
    var url = "https://canvasjs.com/services/data/datapoints-bitcoinusd.php?minimum="+minimum+"&maximum="+maximum;
    $("#loader").css("display", "block");
    $.getJSON(url, function(data) {
      addData(data);
      $("#loader").css("display", "none");
    });
  }
  $("#loader").css("display", "block");
  $.getJSON("https://canvasjs.com/services/data/datapoints-bitcoinusd.php", function(data) {
    for(var i = 0; i < data.length; i++){
      dataPoints1.push({x: new Date(data[i].dateTime*1000), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
      dataPoints2.push({x: new Date(data[i].dateTime*1000), y: Number(data[i].close)});
    }
    $("#loader").css("display", "none");
    stockChart.render();
  });
}                            

Related Customizations in StockChart

  • navigator.dynamicUpdate
  • rangeChanged
  • rangeChanging
  • Updating StockChart Options
  • © fenopix
    • About Us
    • FAQs
    • Careers
    • Privacy Policy
    Server Side Technologies
    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts
    Front End Technologies
    • JavaScript Charts
    • jQuery Charts
    • React Charts
    • Angular Charts
    • JavaScript StockCharts
    Contact
    • Fenopix, Inc.
    • 2093 Philadelphia Pike,
    • #5678, Claymont,
    • Delaware 19703
    • United States Of America