IgniteUI igDataChart updating series datasource in javascript dynamically

Hi, 

I followed the given steps in (https://ko.infragistics.com/community/forums/f/ignite-ui-for-jquery/121293/adding-series-dynamically-to-igdatachart-and-assigning-data0 in order to add dynamically new series to igDataChart. 

As a summary, my JavaScript code for initializing chart is a follows:

  function initializeDataChart() {
            $("#chart").igDataChart({
              
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
               
                windowResponse: "immediate",
                width: "100%",
                axes: [
                    {
                        type: "numericX",
                        name: "xAxis",
                        stroke: "black",
                        strokeThickness: 1,
                        LabelTopMargin: 10,
                        labelAngle: 0,
                        labelExtent: 50,
                        formatLabel: function (item) {
                           
                            var date = new Date(item);
                            return date.toLocaleString();
                        }

                    }, {
                        type: "numericY",
                        name: "yAxis",
                        stroke: "black",
                        strokeThickness: 1,
                        majorStroke: "lightGrey",
                        labelExtent: 50,
                        formatLabel: function (item) {
                            return item.toFixed(2);
                        }
                    }
                ]
            });
           
        }

and for creating new series:

 createSeries(deviceName, devicePoints);
 
 $("#chart").igDataChart({
                                   series: series,
                                         });

function createSeries(deviceName, points) {

            var s1 = {
                type: "scatterLine",
                name: deviceName,
                markerType: "circle",
                thickness: 1,
                tooltipTemplate: "tooltipTemplate",
                xAxis: "xAxis",
                yAxis: "yAxis",
                xMemberPath: "TimeStampTotalMillisecond",
                yMemberPath: "Value",
                trendLineThickness: 3,
                showTooltip: true,
                title: deviceName,
                dataSource: points,
                legend: { element: "legend" }

            };
            series.push(s1);
        }

Now, I want to clear series completely preparing to the next data by using the following code, but cannot delete current series data and still see it in igDataChart:

 function clearDataChartFunction() {
            var chartCurrentSeries = $("#chart").igDataChart("option", "series");
            var arrayLength = chartCurrentSeries.length;
            for (var i = 0; i < arrayLength; i++) {
                chartCurrentSeries[i].dataSource = [];
                $("#chart").igDataChart("notifyVisualPropertiesChanged", chartCurrentSeries[i].name);
            }
            series = [];
            $("#chart").igDataChart({
                series: series
              
            });
            $("#chart").igDataChart("renderSeries", "xAxis", true);
           
        }

• What is the correct way to clear igDataChart in my situation?
• Is there any method to call that would enforce rendering igDataChart? 
• Which event(s) are triggered after loading data in igDataChart?

Best regards.

Hello,

Thank you for posting in our community.

You will need to use the notifyRemoveItem method. This online sample might be of help to you. Additionally, I have created and attached a small sample using the notifyClearItems method.

You can use the above-mentioned methods and a couple of more, specified in our API documentation. 

About the events for loading data in igDataChart, what I can suggest is to take a look at this forum thread. 

Let me know if I may be of further assistance.

6646.Sample.zip

Hello,

Thank you very much for the sample code, it helps a lot. In 6646 Sample code, you call the function change() in order to push a different data for the same series. What I need actually is clearing igDataChart series completely in order to add a totally different series. 

I managed, using you code to clear the points, but need to clear chart series too. Adding points using 'notifyInsertItem' is also working.

Regards.

Hi,

What I can suggest is to take a look at this online sample where an approach for switching to a different series is demonstrated.

Additionally, I have modified the sample for your reference.

0211.Sample.zip

HI,

Awesome, this is exactly what I need. I searched for 'remove' method in the last API Documentation (2020.2) and found the following details about it, which is wrong I think: (http://www.igniteui.com/…/ui.igDataChart)

Set to true in order to have an existing axis removed from the chart, by name.

  Thanks a lot. 

Regards.

Hi,

Thank you for the feedback. I will notify our development team about this issue.

I am glad that you have resolved your issue.

Thank you for using Infragistics components.