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 Alan,
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/
Hey Alan,
Thank you for your thoughts, I am currently looking what would be the best approach that could be followed for your scenario.
I will contact you with my findings as soon as possible.
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);
Hello,
What we are doing is logging data for approximately 2 hours with about 8 series on the chart. This is working well. After the 2 hours of collection, we save a PNG file of the chart (which work fine). Then we want to remove all data in the chart (basically reset the chart) to start logging the next 2 hour sequence. We just need a good way to clear the chart and all of it's data so we can chart the next 2 hours. This is a re-occurring 2 hour interval.
Thanks,
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.