Zingchart - adding and removing plot by ID

Question

This is probably a simple question but I cannot find the answer anywhere. I have a graph where I add new plots dynamically. Now I need to remove some of the plots, however I need to identify the plot by id, not by index.

According to the documentation it is possible to remove a plot by ID. However, I am using the Jquery wrapper, which only talks about removing by index. In any case (with or without JQuery) I cannot make it work, I am not sure this is because of the way I add the plot, the way I remove it or the way I configure the plots themselves.

Code here.

(Note I am using the Jquery wrapper but for convenience the fiddle is not).

var myConfig = {
    'type':'line',
 'series':[

    ]
};
zingchart.render({ 
    id : 'demo-chart', 
    data : myConfig, 
    height: 400, 
    width: '100%' 
});


$('#demo1').click(function() {

zingchart.exec('demo-chart','addplot',{
        //plotid : 'http://mine/2',
        'data' : {
            plotid : 'http://mine/2',
            'values':[69,68,54,48,70,74,98,70,72,68,49,69],
            text : 'To be removed'
        }
});

zingchart.exec('demo-chart', 'addplot', {
    data : {
        values : [10, 20, 15],
        text : 'To stay'
    }
});

zingchart.exec('demo-chart','removeplot',{
        //plotid : 'http://mine/2',
        data : {
            plotid : "http://mine/2"
        }
    });


});

EDIT: As pointed by patrick-rodee, the solution is this:

• Use id (not plotid) inside the data when adding the plot.

• Use plotid (with no data) when removing the plot.

  var myConfig = {
  'type':'line',
   'series':[
  
         ]
     };
     zingchart.render({ 
      id : 'demo-chart', 
      data : myConfig, 
      height: 400, 
      width: '100%' 
     });
  
  
     $('#demo1').click(function() {
  
     zingchart.exec('demo-chart','addplot',{
             'data' : {
                 id : 'http://mine/2',
                 'values':[69,68,54,48,70,74,98,70,72,68,49,69],
                 text : 'To be removed'
            }
     });
  
     zingchart.exec('demo-chart', 'addplot', {
      data : {
          values : [10, 20, 15],
          text : 'To stay'
      }
     });
  
     zingchart.exec('demo-chart','removeplot',{
             plotid : 'http://mine/2',
         });
  
  
     });
  

EDIT 2:

By the way, it seems the behaviour by default can be a bit confusing: if you add two plots one will be plotted in blue, the other in red, then remove the blue plot, then add it again -> it will be plotted in red, so there will be two plots with the same colour.

Answer 1

Your removeplot call is passing a plotindex instead of a plotid. You should also move the plotid inside of your addchart call outside of the data object.

Here's a working example that adds a plot with an id then removes both plots by their ids: http://demos.zingchart.com/view/8FG93JTH

It should provide enough working code to help you solve your issue.

I'm on the ZingChart team. We're pretty active on here. Holler if you have more questions.