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]);
//}

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
            }];
        }

Typo:

The chart is x axis is incrementing but the plots on the chart are NOT displaying.

hi,

This works perfectly.  Now 1 more odd behavior.  After I clear chart I want to start plotting points again.  I am writing values like this:

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]);

The chart is x axis is incrementing but the plots on the chart are displaying.  Do I have to re-initialize anything on the chart?

BTW,  This is a node.js application and is awesome with your HTML5 components.  If We can work out this little bug.  It will be awesome....