Hi,
I need to show several data series in one igDataChart (mostly line charts). The number of series shown can vary, so I need to add or remove data series dynamically (as well as adjusting the legend) at runtime.
This is an example of my data (whereas the number of Series can vary):
var data = [{"Series":1,"X":0.0,"Y":10.0}, {"Series":1,"X":1.0,"Y":9.0}, {"Series":1,"X":2.0,"Y":8.5}, {"Series":1,"X":3.0,"Y":8.0}, {"Series":1,"X":4.0,"Y":7.75}, {"Series":1,"X":5.0,"Y":6.0}, {"Series":1,"X":6.0,"Y":5.5}, {"Series":1,"X":7.0,"Y":5.3}, {"Series":1,"X":8.0,"Y":5.0}, {"Series":2,"X":1.0,"Y":15.0}, {"Series":2,"X":2.0,"Y":14.75}, {"Series":2,"X":3.0,"Y":14.5}, {"Series":2,"X":4.0,"Y":14.25}, {"Series":2,"X":5.0,"Y":13.75}, {"Series":2,"X":6.0,"Y":14.0}, {"Series":2,"X":7.0,"Y":13.5}, {"Series":2,"X":8.0,"Y":13.0}, {"Series":2,"X":9.0,"Y":13.75}];
Based on the High Volume Example (https://www.igniteui.com/data-chart/binding-high-volume-data), I failed to add multiple dataSerires.
How do I create dynamically dataSeries for the igDatachart and how do I assign the data dynamically the corresping dataseries? I couldn't find any related examples.
Kind regards.
--
edit 2020-03-26:
Mistake in embedded code window removed
Hello,
I have created and attached a sample illustrating how to dynamically change the series and their legend. I had to convert the structure of the data you have provided in order to create the series dynamically. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce.
0181.Sample.zip
Hi Martin,thank you for your example, it helped me a lot.In your answer and your example, you confirmed what I assumed looking at the category chart example (https://www.igniteui.com/data-chart/charts-category-series).
The structure of the data I posted must be converted into something like:
var data = [{"X": 1.0, "SeriesY1":10.0, "SeriesY2":15.0, "SeriesYN":xy, ... }, {"X": 2.0, "SeriesY1":10.0, "SeriesY2":15.0, "SeriesYN":xy, ...}, ...];
Another challenge for me was to replace the ... operator. Guess what browser must be used (yes, it's IE):
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Browser_compatibility
To those who might face similar problems, take a look at https://es6console.com/.
Thank you and stay healthy,Enno
Hi Martin,
thank you for your response and the example. I'm going to have a look on it and will definitely come back to you later.
Kind regards,
Enno