Hi,

I looked at the examples and was used a for loop to remove the data from the grid:

for (i = 0; i < data.length; i++) {

var oldItem = data[i];

$("#chart").igDataChart("notifyRemoveItem", data, i, oldItem);

}

I tried the notifyClearItems but did not work.  Is there no simple method to call  like $("#chart").igDataChart("ClearGrid"); and everything is removed?

Maybe I am missing something.

Hi,

I took your example and added a AddDS() function to see how to add data after you clear it.  If we can figure this out.  Then we are good.  Here is a copy of the function.  It is just a copy of your data structure when the chart is initialized. No data displays after I clear the chart using the clear button.  Then press the Add button that calls the function below.  Is there a step I am missing to re-bind data to the chart after it is initialized?

 function AddDS() {
            ds = [{
                "Year": 1995,
                "Canada": 16.8331,
                "SaudiArabia": 20.6591,
                "Russia": 41.4181,
                "UnitedStates": 0,
                "China": 33.5387
            }, {
                "Year": 1996,
                "Canada": 17.2262,
                "SaudiArabia": 20.8153,
                "Russia": 0,
                "UnitedStates": 71.1744,
                "China": 33.5387
            }, {
                "Year": 1997,
                "Canada": 17.4787,
                "SaudiArabia": 21.2433,
                "Russia": 41.4181,
                "UnitedStates": 71.1744,
                "China": 33.5387
            }, {
                "Year": 1998,
                "Canada": 17.4377,
                "SaudiArabia": 0,
                "Russia": 41.4181,
                "UnitedStates": 71.1744,
                "China": 33.5387
            }, {
                "Year": 1999,
                "Canada": 0,
                "SaudiArabia": 0,
                "Russia": 41.4181,
                "UnitedStates": 71.1744,
                "China": 33.5387
            }, {
                "Year": 2000,
                "Canada": 17.4377,
                "SaudiArabia": 21.4151,
                "Russia": 41.4181,
                "UnitedStates": 0,
                "China": 33.5387
            }];
        }

Hi,

thank you again.  It works fine in my little test app.  So I think I have something not properly configured in my actual app. I copied and pasted below.  I can update chart with no issue, save as PNG file and now properly delete data.  I just cannot get the data to start displaying again after the ClearChart() function is implemented. I call StartUpdate() to restart a timer.  Basically I am using iosockets to tell server send more data.  So up in the iosocket receiver it receives the updated data from server.  That data is present and you can  see where I implement notifyInsert Item.  Let me know if you see if I am imprperly configuring the chart somehow.

var currData, currDataSource;
var transperantBrush = "rgba(0,0,0,0)", volumeTrendlineBrush = "rgba(190,130,65,0.7)", priceTrendlineBrush = "rgba(70,140,240,0.7)";
;
var DisableTrend = false;
var tick = 0;
currData = [];
currData[0] = createNewChartItem(1, 0, 0, 0, 0, 0);
currDataSource = new $.ig.DataSource({ dataSource: currData });
var UpdateTimer = setInterval(myTimer, 1000);
$(function () {
    iosocket = io.connect();
    iosocket.on('connect', function () {
        $('#incomingChatMessages').append($('<li>Connected</li>'));
        
        //iosocket.on('message', function (message) {
        //   $('#incomingChatMessages').append($('<li></li>').text(message));
        //});
        
        iosocket.on('MemshareRead', function (message) {
            // $('#incomingChatMessages').append($('<li></li>').text(message));
            
            var t = message.split(",");
            // count = count + 1;
            // newValue.push({ Label: count.toString(), Value: t[0] })
            
            var dataSource = $("#chart").igDataChart("option", "dataSource");
            var data = dataSource.data();
            var v1 = 0;
            var v2 = 0;
            var v3 = 0;
            var v4 = 0;
            var HeatComplete = 0;//Looks at tap signal
            
                if (t[0] == undefined) {
                    v1 = 0;
                }
                else v1 = t[0];
                
                if (t[1] == undefined) {
                    v2 = 0;
                }
                else v2 = t[1];
                
                if (t[2] == undefined) {
                    v3 = 0;
                }
                else v3 = t[2];
                
                if (t[3] == undefined) {
                    v4 = 0;
                }
                else v4 = t[3];
                if (t[4] == undefined) {
                    HeatComplete = 'false';
              
                }
                else HeatComplete = t[4];
                  
                data[data.length] = createNewChartItem(data[data.length - 1].Label + 1, v1, v2, v3, v4, HeatComplete);
                $("#chart").igDataChart("notifyInsertItem", dataSource, data.length - 1, data[data.length - 1]);
                //$("#chart").igDataChart("flush");
               
        
        });
        
        iosocket.on('disconnect', function () {
            $('#incomingChatMessages').append('<li>Disconnected</li>');
        });
    });
    $('#outgoingChatMessage').keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            iosocket.send($('#outgoingChatMessage').val());
                    //$('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
                    //$('#outgoingChatMessage').val('');
        }
    });
});

function addNewItemToChart() {
    var dataSource = $("#chart").igDataChart("option", "dataSource");
    var data = dataSource.data();
    data[data.length] = createNewChartItem(data[data.length - 1].Label + 1);
    $("#chart").igDataChart("notifyInsertItem", dataSource, data.length - 1, data[data.length - 1]);
}

function createNewChartItem(label, newvalue1, newvalue2, newvalue3, newvalue4, newvalue5) {
    //var val1 = Math.round(Math.random() * 100);
    //var val2 = Math.round(Math.random() * 100);
    //var val3 = Math.round(Math.random() * 100);
    if (label == undefined)
        label = 1;
    var RoofState = 0;
    if (newvalue5 == 'true') {
        RoofState = 100;
    }
    return { Label: label, ValueArcStability: newvalue1, ValueOxygenFlow: newvalue2, ValueCarbonFlow: newvalue3, ValueKWH: newvalue4, ValueRoofOpen: RoofState };
}



function myTimer() {
    iosocket.send('MemshareRead');
}
$(function () {
    
    
    
    $("#chart").igDataChart({
        width: "1500px",
        height: "750px",
        title: "Arc Stability",
        //  subtitle: "Five largest projected populations for 2015",
        legend: { element: "legend" },
        windowResponse: "immediate",
        dataSource: currDataSource,
        axes: [
            {
                name: "xAxis",
                type: "categoryX",
                title: "Sample Number",
                label: "Label"
            },
            {
                name: "yAxis",
                type: "numericY",
                minimumValue: 0,
                maximumValue: 1000,
                title: "Memory Share Value"
            }
        ],
        series: [
            {
                showTooltip: true,
                name: "ArcStability",
                type: "line",
                title: "Arc Stability",
                isHighlightingEnabled: true,
                isTransitionInEnabled: true,
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "ValueArcStability",
                transitionDuration: 500,
                thickness: 3.9,
                brush: "orange"
               

            }
                ,
            {
                showTooltip: true,
                name: "OxygenFlow",
                type: "line",
                title: "Oxygen Flow",
                isHighlightingEnabled: true,
                isTransitionInEnabled: true,
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "ValueOxygenFlow",
                transitionDuration: 500,
                thickness: 5.9,
                brush: "purple"
            }
                   ,
            {
                showTooltip: true,
                name: "CarbonFlow",
                type: "line",
                title: "Carbon Inj Sec.",
                isHighlightingEnabled: true,
                isTransitionInEnabled: true,
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "ValueCarbonFlow",
                transitionDuration: 500,
                thickness: 1.9,
                brush: "red"
            }
                    ,
            {
                showTooltip: true,
                name: "KiloWatts",
                type: "line",
                title: "KWH",
                isHighlightingEnabled: true,
                isTransitionInEnabled: true,
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "ValueKWH",
                transitionDuration: 500,
                thickness: 0.9,
                brush: "green"
            } ,
            {
                showTooltip: true,
                name: "RoofOpen",
                type: "line",
                title: "Roof Open",
                isHighlightingEnabled: true,
                isTransitionInEnabled: true,
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "ValueRoofOpen",
                transitionDuration: 500,
                thickness: 0.9,
                brush: "black"
            }],
    });
    $("#ArcStabilityCheckBx").click(function () {
        var pBrush = ($(this).is(":checked")) ? "orange" : transperantBrush;
       // var vBrush = ($(this).is(":checked")) ? volumeTrendlineBrush : transperantBrush;
        $("#chart").igDataChart("option", "series", [
            { name: "ArcStability", brush: pBrush }//,
                    //{ name: "lineSeries", trendLineBrush: vBrush }
        ]);
        $("#chart").igDataChart("styleUpdated");
    });
    $("#OxygenFlowCheckBx").click(function () {
        var pBrush = ($(this).is(":checked")) ? "purple" : transperantBrush;
        // var vBrush = ($(this).is(":checked")) ? volumeTrendlineBrush : transperantBrush;
        $("#chart").igDataChart("option", "series", [
            { name: "OxygenFlow", brush: pBrush }//,
                    //{ name: "lineSeries", trendLineBrush: vBrush }
        ]);
        $("#chart").igDataChart("styleUpdated");
    });
    $("#CarbonFlowCheckBx").click(function () {
        var pBrush = ($(this).is(":checked")) ? "red" : transperantBrush;
        // var vBrush = ($(this).is(":checked")) ? volumeTrendlineBrush : transperantBrush;
        $("#chart").igDataChart("option", "series", [
            { name: "CarbonFlow", brush: pBrush }//,
                    //{ name: "lineSeries", trendLineBrush: vBrush }
        ]);
        $("#chart").igDataChart("styleUpdated");
    });
    $("#KiloWattsCheckBx").click(function () {
        var pBrush = ($(this).is(":checked")) ? "green" : transperantBrush;
        // var vBrush = ($(this).is(":checked")) ? volumeTrendlineBrush : transperantBrush;
        $("#chart").igDataChart("option", "series", [
            { name: "KiloWatts", brush: pBrush }//,
                    //{ name: "lineSeries", trendLineBrush: vBrush }
        ]);
        $("#chart").igDataChart("styleUpdated");
    });
});
function ChangeTitle(){
    $("#chart").igDataChart("option", "title", "Heat: 96790");
   // $(".selector").igDataChart("option", "subtitle", "Results over a two year period");  
}
function SaveImage() {
    var myImage = $("#chart").igDataChart("exportImage", 1200, 675);//1200 wide by 675 height
    var titleValue = $("#chart").igDataChart("option", "title")+':';
    iosocket.emit('SaveImage', myImage.href.replace('data:image/png;base64,', titleValue));//Need to replace data:image/png;base64 with empty string
}
function ClearChart() {
    
   currData.length = 0;
    $("#chart").igDataChart("notifyClearItems", currData);
 }
function StopUpdate() {
   // DisableTrend = true;
    window.clearTimeout(UpdateTimer);
}
function StartUpdate(){
    
    currData.push(createNewChartItem(1, 0, 0, 0, 0, 0));
        UpdateTimer = setInterval(myTimer, 1000);

}
//In the code snippet above the transitionDuration option related to the Motion Framework is set.
//This option governs how long the animation (transition) between two states of the chart series takes.

//function createNewChartItem2(label) {
//    var val1 = Math.round(Math.random() * 100);
//    var val2 = Math.round(Math.random() * 100);
//    var val3 = Math.round(Math.random() * 100);
//    if (label == undefined)
//        label = 1;
//    return { Label: label, Value1: val1 };
//}



//function addNewItemToChar2t() {
//    var dataSource = $("#chart").igDataChart("option", "dataSource");
//    var data = dataSource.data();
//    data[data.length] = createNewChartItem2(data[data.length - 1].Label + 1);
//    $("#chart").igDataChart("notifyInsertItem", dataSource, data.length - 1, data[data.length - 1]);
//}

Hello Alan,

For consistency and readability could you please place your code in jsfiddle example or create .html file. This would help a lot for the investigation and also will be more clear what exactly you are trying to implement.

Thanks in advance.

Hi,

Here is the jsfiddle:

https://jsfiddle.net/thebigshaboozey/hnkqsf0k/

I hope this helps.

Thanks

Hello Alan,

I have created a private case for you (CAS-171372-L5N6J0) in order not to share your private information in our community, you can attach your app to your reply .Please keep in mind that our system accepts only zipped files.

Looking forward for your reply.

Hi,

The app is fully functional in the Node.JS environment and runs well.  Just cannot get the chart to display the data after I stop it and flush the chart.  The data is present and the Socket.IO code is working fine.   I can zip up my test app and send to you.  Do you have an FTP or something I can upload to?

Thanks again,

Alan