Zoom in/out kendo stock chart

2 posts, 1 answers
  1. Challa
    Challa avatar
    3 posts
    Member since:
    Jul 2018

    Posted 26 Jul 2018 Link to this post

    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; // deviceId 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.

  2.
  3. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2443 posts

    Posted 30 Jul 2018 Link to this post

    Hello Challa,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top