Dear Ignite Team,
Query:
How to draw step chart with different line color for each breakpoint/step.
You can refer below screenshot for more detail.
Expectations:
we need to draw different colored lines on chart.
Regards,
Umer Waheed
Hello Umer,
I have put together a sample project that demonstrates the type of behavior that I believe you are looking to achieve, and at no point does it connect the lines incorrectly or make triangles on my end.
I also found what I believe to be a better way to achieve the requirement using two series in this case. You can have the “yellow” series be the first series plotted in the chart and the “green” one be the second. The green one only has to have data for the steps and have the rest of its value path be null, whereas the yellow one can be the full line. Since the green one will be “on top” of the yellow one, this will render the steps as green and the rest of it as yellow.
If this sample does not work for you, I would request that you please modify it and send it back so that it reproduces the behavior you are seeing.
Please let me know if you have any other questions or concerns on this matter.
DifferentColoredLine.zip
Issue:
When three points have minor difference then line chart is not plotting accurately and draw as triangle. We assume linear interpolation causing issue , we had also tried unknownValuePlotting="DontPlot" but still issue not resolved.
You can refer below attachment/video for more detail.
www.infragistics.com/.../2022_2D00_09_2D00_28_5F00_18_2D00_31_2D00_43.mp4
Expected result:
Line chart must be plotted in form of lines. It should not connect all three points.
Screenshot named "expected_result.png" attached for expected result
Note: When we zoom in the graph area then it works fine and don't make triangles.
I’m not sure I understand what is happening in the video? Can you please elaborate a bit on exactly how you are reproducing this issue and what you mean by “when point spacing is less”?
Thanks this solves the problem the the linear interpolate is causing weird issue when point spacing is less
I have taken a look at the JSON that you have provided, but I cannot tell which parts are related to the X and Y axis or where the yellow line differs from the green one?
Looking at the JSON file and the actual result versus the expected one though, I believe this is probably due to a difference in the number of categories in the data sources for the two series. If you bind to the same data source, I believe you only really need 2 series for the green and yellow lines in this case. If you have a single data item that contains both of the value paths for the green and yellow series, you could provide null or NaN for the values that you don’t want to be plotted for a particular series. For example, you could do something like the following:
{ Date: 14:00, greenValue: 5, yellowValue: null } (green), { Date: 14:01, greenValue: null, yellowValue: 5 } (yellow), { Date: 14:02, greenValue: null, yellowValue: 5 } (yellow), { Date: 14:03, greenValue: null, yellowValue: 5 } (yellow), { Date: 14:04, greenValue: 10, yellowValue: null } (green)
The above pseudo-data source would give you a green line that goes to 5, then a yellow line that goes along 5 for 3 seconds, and then another green line that would go from 5 to 10 if you had a pair of series with their value paths set to “greenValue” and “yellowValue.”