Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
145
IgniteUI igDataChart updating series datasource in javascript dynamically
posted

Hi, 

I followed the given steps in (https://www.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.