Hi,
I am populating an HTML5 igDataChart that has 5 series which appears to be working fine. Now I am attempting to Clear the chart of the data. I tried using something like this:
$("#chart").igDataChart("notifyClearItem", currDataSource);
But does not work.
Here is how I create the data. Every second I check for data and update. That code sample is below:
data[data.length] = createNewChartItem(data[data.length - 1].Label + 1, v1, v2, v3, v4);
$("#chart").igDataChart("notifyInsertItem", dataSource, data.length - 1, data[data.length - 1]);
function createNewChartItem(label, newvalue1, newvalue2, newvalue3, newvalue4, newvalue5) {
return { Label: label, ValueArcStability: newvalue1, ValueOxygenFlow: newvalue2, ValueCarbonFlow: newvalue3, ValueKWH: newvalue4, ValueRoofOpen: newvalue5 };
}
My Chart HTML:
$("#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",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "ValueArcStability",
transitionDuration: 500,
thickness: 3.9,
brush: "orange"
,
name: "OxygenFlow",
title: "Oxygen Flow",
valueMemberPath: "ValueOxygenFlow",
thickness: 5.9,
brush: "purple"
name: "CarbonFlow",
title: "Carbon Inj Sec.",
valueMemberPath: "ValueCarbonFlow",
thickness: 1.9,
brush: "red"
name: "KiloWatts",
title: "KWH",
valueMemberPath: "ValueKWH",
thickness: 0.9,
brush: "green"
} ,
name: "RoofOpen",
title: "Roof Open",
valueMemberPath: "ValueRoofOpen",
brush: "black"
}],
});
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.
Hello,
Thank you for using our forum!
About your question, you will need to use notifyClearItems method. We have two examples that you can check, I think that you will find them helpful:
http://www.igniteui.com/data-chart/motion-framework - click the "play" button
http://www.igniteui.com/data-chart/binding-real-time-data - click "Start Data Feed" button
Let me know if I may be of further assistance.