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"
}],
});
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.
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 Alan,
What do you mean everything to be removed? By design we do not provide а such method. Below you will find a blog post which is showing how notifyClearItems could be used along with notifyRemoveItem.
http://es.infragistics.com/community/blogs/engineering/archive/2012/05/08/updating-sample-code-for-the-infragistics-jquery-chart.aspx
Would it be a possible solution for you yo hide the Chart when you don't want to show any data, or you want the axis and legend to be visible, just without any data in the chart?
It should be possible to remove the items one by one.
Also,
2 things I have noticed in using the notifyRemoveItem in the way I implement below.
1) I have to run the loop 3 times to clear the plots.
2) The chart datasource still contains information. So when I run the loop for the second time. data2 still contains the data from the igDataChart. How do I delete this information?
function ClearChart() {
var dataSource2 = $("#chart").igDataChart("option", "dataSource");
var data2 = dataSource2.data();
for (i = 0; i < currData.length; i++) {
var oldItem = data2[i];
$("#chart").igDataChart("notifyRemoveItem", currData, i, oldItem);
I have missed something very important, in order "notifyClearItems" method to works okay, we chould pass in the same data source array. I have created a sample for you in order to show you how to clear its data, as you will see (after pressing Clear data source button) the items will be cleared from the chart.
Sample:
http://jsfiddle.net/q9r9a26q/1/show/
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);
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....
Typo:
The chart is x axis is incrementing but the plots on the chart are NOT displaying.