Search code examples
chartszingchart

Serious delay when using zingchart.exec methods


So I've been having a blast using the zingchart API to build my application, but the one thing that I've noticed is a very serious delay when using certain zingchart.exec actions, such as 'setdata' and 'showplot'. These seem to be taking an unusual amount of time, and I was wondering if there were alternatives to using these methods, or if there were some way to speed up their execution. To put in to context, the older charting API I used would change and update the graph in an unnoticeable amount of time, while the zingchart methods can take upwards of 1-2 seconds each to execute and update the chart. Thanks in advance. -b


Solution

  • Mike here from the ZingChart team again.

    Incase you have not already checked out ZingChart's API methods, there is a whole slew of them : http://www.zingchart.com/docs/api/api-methods/ . Now to get a bit technical of how ZingChart works underneath...

    Each of those API methods have different levels chart modification, some more aggressive than another.

    For instance, let's take the method removenode. That method call simply removes a node from the specified plot and node index. Under the hood, ZingChart examines the side effects of the API call and determines what needs to be redrawn on the chart. Sometimes ZingChart can remove a single node from the chart, other times it needs to redraw the scales. Either way, it is an isolated change to one area, and ZingChart can optimize the amount of calculations it needs to perform because of this.

    Now let's take a more aggressive API method such as setdata. This method is extremely powerful and lets the user change any part of the chart itself. The tradeoff is a degradation in performance. ZingChart won't know what area to isolate a change, and therefore it must redraw the entire chart.

    The best way to make ZingChart performant is to choose API methods that are closest to what you need to do. -- And yes sometimes you will have to use the "brute-force" setdata. However, If you find that you are in need of some API methods that do not exist or they need to be optimized for performance, we are more than happy to work with you to solve issues and implement solutions to improve usability in the library. support@zingchart.com would be the best place to contact for this.


    On another note, I'm going to guess you are using the Angular directive from the example you provided in your last S/O question Dynamically adding scale markers? ?

    The angular directive I created has 3 ways to modify the chart :

    1. zc-values
    2. zc-json
    3. zc-render

    Each way has it's own tradeoffs of performance and functionality. zc-values utilizes ZingChart's setseriesvalues, while zc-json uses setdata. The directive is effectively a wrapper around these method calls, and does not fully utilize every API method call ZingChart has available. Therefore it's inherently less performant than the vanilla ZingChart library. Resource detailing the directive : http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/

    If you need more expansion on the directive to accept different API methods, I'm more than happy to accept pull-requests.