jQuery StockChart with Date-Time Axis

Download jQuery Chart Samples

Below StockChart uses jQuery to show Price & Volume using multiple charts with Date-Time axis.

Try Editing The Code

Download Copy JSFiddle 
  1. $(function () {
  2.   var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
  3.   var stockChartOptions = {
  4.     theme: "light2",
  5.     exportEnabled: true,
  6.     title:{
  7.       text:"Litecoin Price & Volume"
  8.     },
  9.     charts: [{
  10.       toolTip: {
  11.         shared: true
  12.       },
  13.       axisX: {
  14.         lineThickness: 5,
  15.         tickLength: 0,
  16.         labelFormatter: function(e) {
  17.           return "";
  18.         }
  19.       },
  20.       axisY: {
  21.         prefix: "€",
  22.         tickLength: 0
  23.       },
  24.       legend: {
  25.         verticalAlign: "top"
  26.       },
  27.       data: [{
  28.         showInLegend: true,
  29.         name: "Price (in EUR)",
  30.         yValueFormatString: "€#,###.##",
  31.         type: "candlestick",
  32.         dataPoints : dataPoints1
  33.       }]
  34.     },{
  35.       height: 100,
  36.       toolTip: {
  37.         shared: true
  38.       },
  39.       axisY: {
  40.         prefix: "€",
  41.         tickLength: 0,
  42.         labelFormatter: addSymbols
  43.       },
  44.       legend: {
  45.         verticalAlign: "top"
  46.       },
  47.       data: [{
  48.         showInLegend: true,
  49.         name: "Volume (LTC/EUR)",
  50.         yValueFormatString: "€#,###.##",
  51.         dataPoints : dataPoints2
  52.       }]
  53.     }],
  54.     navigator: {
  55.       data: [{
  56.         dataPoints: dataPoints3
  57.       }],
  58.       slider: {
  59.         minimum: new Date(2018, 02, 01),
  60.         maximum: new Date(2018, 04, 01)
  61.       }
  62.     }
  63.   }
  64.   $.getJSON("https://canvasjs.com/data/docs/ltceur2018.json", function(data) {
  65.     for(var i = 0; i < data.length; i++){
  66.       dataPoints1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});;
  67.       dataPoints2.push({x: new Date(data[i].date), y: Number(data[i].volume_eur)});
  68.       dataPoints3.push({x: new Date(data[i].date), y: Number(data[i].close)});
  69.     }
  70.     $("#chartContainer").CanvasJSStockChart(stockChartOptions);
  71.   });
  72.   function addSymbols(e){
  73.     var suffixes = ["", "K", "M", "B"];
  74.     var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
  75.     if(order > suffixes.length - 1)
  76.       order = suffixes.length - 1;
  77.     var suffix = suffixes[order];
  78.     return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
  79.   }
  80. });

Related Customizations in StockChart

Note   For step by step instructions, follow our jQuery Integration Tutorial