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.

Zingchart - adding and removing plot by ID

1 Answers