JavaScript StockChart with Numeric Axis

Download JavaScript StockChart Samples

Below StockChart uses data with Numeric values on x-axis. But you can also use Date-Time values instead. Try changing the range using Range Buttons, Navigator & Input Fields.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {  
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    title:{
      text:"StockChart with Numeric Axis"
    },
    animationEnabled: true,
    exportEnabled: true,
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        crosshair: {
          enabled: true,
          //snapToDataPoint: true
        }
      },
      data: data
    }],    
    rangeSelector: {
      inputFields: {
        startValue: 4000,
        endValue: 6000,
        valueFormatString: "###0"
      },
      
      buttons: [{
        label: "1000",
        range: 1000,
        rangeType: "number"
      },{
        label: "2000",
        range: 2000,
        rangeType: "number"
      },{
        label: "5000",
        range: 5000,
        rangeType: "number"
      },{
        label: "All",        
        rangeType: "all"
      }]
    }
  });

  stockChart.render();    
}

var limit = 10000;    //increase number of dataPoints by increasing this
var y = 1000;
var data = []; var dataSeries = { type: "spline" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
  y += Math.round((Math.random() * 10 - 5));
  dataPoints.push({ x: i, y: y });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

Related Customizations in StockChart