Hi,
The current implementation of kendo stock chart samples all the data points. In my case, when I drag right on the stock chart, fetches remote data and bind it to a local DataSource using add(). Let's say If I get 100 data points with values for each category nearer, chart renders only a few data points.
eg. This is the data I get on drag
[{"time":"2018-07-26T10:43:11.539927643Z","value":46},{"time":"2018-07-26T10:43:41.404421587Z","value":46},{"time":"2018-07-26T10:44:12.939918256Z","value":46},{"time":"2018-07-26T10:44:40.589413526Z","value":46},{"time":"2018-07-26T10:45:10.998136847Z","value":46},{"time":"2018-07-26T10:45:42.88296681Z","value":46},{"time":"2018-07-26T10:46:14.760766456Z","value":46},{"time":"2018-07-26T10:46:42.953234055Z","value":46},{"time":"2018-07-26T10:47:13.378606585Z","value":46},{"time":"2018-07-26T10:47:44.152430668Z","value":46}]},{"device_id":"00204AX5D72GGIJ4Z0HX1BLA5S2TTFOS","points":[{"time":"2018-07-26T10:43:25.990936424Z","value":38},{"time":"2018-07-26T10:43:58.83281015Z","value":38},{"time":"2018-07-26T10:44:33.114622846Z","value":38},{"time":"2018-07-26T10:45:02.558993785Z","value":38},{"time":"2018-07-26T10:45:42.009941143Z","value":38},{"time":"2018-07-26T10:46:09.499015043Z","value":38},{"time":"2018-07-26T10:46:44.329702609Z","value":38},{"time":"2018-07-26T10:47:14.744901433Z","value":38},{"time":"2018-07-26T10:47:50.48844174Z","value":38}]
eg: This is how I assign above json to respective category
Lets say above data array is assigned to a variable called 'points'
points.forEach(function (data) {
var _payload = {};
_payload[deviceId] = data.value; // can be different for another series data
_payload.date = new Date(data.time);
chart.data_source.add(_payload); // chart is kendo-stock-chart reference obj
});
In the above example chart data_source holds whatever payload added. But I could see only few data points because of default sampling algorithm. I have implemented pan and zoom on kendo chart but, it only works with sampled data.
So, I want to have plus and minus icon on the chart as an overlay. When I click on plus icon chart should render hidden data points.
1 Answer, 1 is accepted
I am not sure what you mean with that the pan and zoom in the StockChart only works with sampled data. When the default pan and zoom is used the Chart can be zoomed into the original data item values (even past them). This can be seen in the demos. When the Chart is zoomed out, there are less categories than values and the only correct way to display the Chart is to display one value per category. What the StockChart does is calculate an aggregate from all values belonging to the same category and draw one data point from this value.
If you want to display your original values, you need to set the StockChart category axis baseUnit value to the unit that corresponds to the time difference between values in your data. From the sample data you provided, I see values are minutes apart, so if the base unit is set to "minutes", all values will be visible. It is important to also adjust the selected period in the Chart navigator to avoid drawing hundreds or thousands of labels. Here is an example showing my suggestion:
https://dojo.telerik.com/eSODiNuF
Regards,
Tsvetina
Progress Telerik