How can I toggle my ZingChart between monthly/quarterly/semi-annual increments?

Question

I have a dataset of dates and scores, with one score per month, that looks something like this:

Date        Score
...
11/16/2012  14.30
12/14/2012  14.40
01/25/2013  12.10
02/22/2013  12.30
03/22/2013  16.10
04/26/2013  13.60
05/24/2013  16.80
06/21/2013  16.50
07/26/2013  16.20
08/23/2013  16.00
09/27/2013  13.60
10/25/2013  12.60
11/29/2013  8.00

I'm using ZingChart to display this data on a line graph. I'm trying to provide full customization capability to the user, including the ability to change the data from monthly (the default) to quarterly or semi-annually. As in, if the user chooses "quarterly", it should only show every 3rd month (moving backwards - so it would show the data for 11/29, 8/23, 5/24, etc...).

How can I get ZingChart to only show every nth point? (And toggle between these increments easily)

Answer 1

I see that this is an older question, but hopefully my answer will be of some help to you if you're still working with ZingChart.

You can accomplish this by calling the setseriesdata api method to modify the series data to only display the points you want when the user changes the interval. In this demo, I've implemented a simple HTML <select> element to create a dropdown menu.

<select id="interval">
<option value=1>Monthly</option>
<option value=2>Quarterly</option>
<option value=3>Semi-Annually</option>
</select>

I listen for a change in the drop down menu using the JQuery .change() event, and change the series data depending on which option was selected.

$('#interval').change(function(){
var select = document.getElementById("interval");
var selVal = select.options[select.selectedIndex].value;
if(selVal==1){
    zingchart.exec("zc", "setseriesdata", {
        "plotindex":0,
        "data":{
        "values":[[1353024000000,14.3],[1355443200000,14.4],[1359072000000,12.1],[1361491200000,12.3],[1363910400000,16.1],[1366934400000,13.6],[1369353600000,16.8],[1371772800000,16.5],[1374796800000,16.2],[1377216000000,16.0],[1380240000000,13.6],[1382659200000,12.6],[1385683200000,8.0]]
        }
    });
}
else if(selVal==2){
//setseriesdata API call with quarter data here
}
else if(selVal==3){
//setseriesdata API call with semi-annual data here
}
});

A few more things:

You can use the "mirrored" boolean attribute in your "scale-x" object to reverse the data along that scale.

ZingChart uses Unix time (in milliseconds) for time/date series.

Be sure to view the demo's page source to see the full code.