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.

Parents
  • 1080
    Offline posted

    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

Reply Children