Hi,
I've been working with the onClick example. As background, what I'm trying to achieve is the following:
I have a time chart with two time series being displayed. The initial navigation unit is a day and the data spans more than a year.
For the time chart in (1), I would like a custom zoom action on a single click, supported only when the time-scale is set to 1 day. For this, based on your guidance, I'm able to achieve a 30 day range "zoom-in" when I click on a point.
After the zoom in (2) has occurred, I want to update a corresponding data table on the same page. The data table update occurs with a Javascript call that takes the new date range established for the 30 day zoom-in in (2). For this part, I'm able to achieve the desired table update.
To complete my requirement, I would like things to reset when the user invokes the "back" button on the toolbar. That is, the chart should revert to initial loaded state (showing the full year+ of data at the day time unit).
What I'm observing with the code below is that I can't seem to recover the same time values I start with. I'm seeing the following sequence of console log output:
Initial Load:
onChartUpdate: origin = data
onChartUpdate: time[0]=1422230400000, time[1]=1470873600000
Single click zoom-in to 30 day range:
onClick: time[0]=1448150400000, time[1]=1450742400000
onChartUpdate: origin = api
onChartUpdate: time[0]=1430004364224.4255, time[1]=1463099635775.5745
(here time has changed between the call to onClick and onChartUpdate - why?)
Back button:
onChartUpdate: origin = user
onChartUpdate: time[0]=1440703885517.0964, time[1]=1458188914482.9036
(why is the time range different here than the initial load?)
My event handling code is below. We're running ZoomCharts version 1.15.3. Please let me know if I can provide any additional information.
Thanks,
-Andy
events: {
onClick: function(e, args) {
console.log(e, args);
if (args.hoverStart === null) {
// handle clicks outside the chart area
return;
}
if (args.hoverStart === args.selectionStart) {
// allow custom zoom periods from selection
return;
}
if (args.displayUnit !== "1 d") {
// only custom handle clicks on the 1 day unit.
return;
}
var mouseTime = getTimeFromMouse(tc, e.x, args.displayUnit);
// zoom into a custom range
var timeRange = 30*24*3600*1000; // 30 days
tc.time(mouseTime - timeRange / 2, mouseTime + timeRange / 2);
var time = tc.time();
console.log("onClick: time[0]=" + tc.time()[0] +", time[1]=" + tc.time()[1]);
updateDataTable([{name: 'beginDate', value: time[0]},
{name: 'endDate', value: time[1]}]);
e.preventDefault();
},
onChartUpdate: function(e, args) {
// Debug
console.log("onChartUpdate: origin = "+args.origin);
console.log("onChartUpdate: time[0]=" + tc.time()[0] +", time[1]=" + tc.time()[1]);
if (args.origin !== 'user') {
// Don't update the risk spike chart on initial load or
// via api call from onClick
return;
}
var time = tc.time();
// Debug
console.log("onChartUpdate: time[0]=" + time[0] + ", time[1]=" + time[1]);
updateDataTable([{name: 'beginDate', value: time[0]},
{name: 'endDate', value: time[1]}]);
e.preventDefault();
}
}