Date-Time values are most commonly used along x-axis in StockChart. Below example uses Candlestick Chart with closing values for Navigator. Try changing the range using Range Buttons, Navigator & Input Fields.
window.onload = function () {
var dps1 = [], dps2= [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
theme: "light2",
exportEnabled: true,
title:{
text:"StockChart with Date-Time Axis"
},
subtitles: [{
text: "Bitcoin Price (in USD)"
}],
charts: [{
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
prefix: "$"
},
data: [{
type: "candlestick",
yValueFormatString: "$#,###.##",
dataPoints : dps1
}]
}],
navigator: {
data: [{
dataPoints: dps2
}],
slider: {
minimum: new Date(2018, 04, 01),
maximum: new Date(2018, 06, 01)
}
}
});
$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {
for(var i = 0; i < data.length; i++){
dps1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
dps2.push({x: new Date(data[i].date), y: Number(data[i].close)});
}
stockChart.render();
});
}