Search code examples
javascriptphphtmlcsszingchart

Zing Charts : How to automatically set zoom between two timestamps on form post?

I have a Zingchart Area Graph plotted with Time on X-Axis. it just displays the events that happens on a timescale. like this :

enter image description here

as you can see on x-axis there is date and time. I have a form in which user can select starttime and endtime I want the chart to display only that timeframe on graph, much like the zooming funtionality but should happen automaticlly when form is posted.

here is the out put which i want

graph between 8 AM to 10 AM Date : 15-2-2017

enter image description here

I have tried by selecting time in query w.r.t runtime(green bar). but it is breaking the graph as sometimes graph do not understand from where to plot the next value as it does not come under user selected time frame.

SQL Query is : 

 $query = "SELECT * FROM `Admill1` WHERE ((Date>='$from' AND Date<='$to') AND (RunTime BETWEEN '$fr_time' AND '$to_time' )) ORDER BY SNo ASC";

so the only option is to do it on front end. i want to dynamically set the graph zoom to that time-frame which user has posted in form.

Please let me know if u need any more information. any help would be appreciated, Thanks.

Solution

  • Zooming to a specific set of time on your area chart is pretty straightforward.

    You likely have something similar to this for your scaleX configuration:

    scaleX:{ minValue:1262308703000, step: 86400000, zooming: true, zoomToValues: [1262654303000,1264727903000], //timestamps transform:{ type: 'date' } },

    zoomToValues:[starting timestamp, ending timestamp] is the attribute you need to leverage to zoom into a specific time range. The values must be within the minValue and maxValue of the scale to work. You simply need to pass the zoom range (beginning and ending timestamps in milliseconds).

    Here is a demo:

    https://demos.zingchart.com/view/G1US5EP7