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/
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 }]; }
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.
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
I checked the provided sample and as I see you are trying to implement client-server Socket.IO example, with sockets and adding data on some interval. The data is not added because your logic is not implemented correctly. You should use node.js in order to make a server listen in particular port (as its shown here http://socket.io/get-started/chat/ ).
Helpful references:
http://stackoverflow.com/questions/11498508/socket-emit-vs-socket-send
http://stackoverflow.com/questions/9914816/what-is-an-example-of-the-simplest-possible-socket-io-example
Here is the jsfiddle:
https://jsfiddle.net/thebigshaboozey/hnkqsf0k/
I hope this helps.
Thanks
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.