I am on IG/AG ^14.2.
I have a data chart (based upon a data grid) which is fairly dynamic. The history of this arrangement can be found in Plot points of chart based upon multiple attributes, and others dealing with my journey through data charts.
At any rate, with the data being so dynamic, the horizon is changed often by users. In some cases, they set the horizon beyond the production values of certain products. At this point, in the data grid, we typically see nothing in the data grid. Similarly, they want to see the line stop in the data chart. This doesn't happen. The line drops down to 0 or whatever the lowest scaled value is.
How can we make the line stop when the data stops?
Hello Chris,
I have been investigating into the issues you are seeing in this case, and if the line is not stopping in the IgxDataChart, this is usually the cause of a couple of things.
The first is if you are passing the number 0 or whatever the lowest scaled value is into your data as the property that corresponds to the valueMemberPath of your series if you are using an IgxLineSeries or the x/yMemberPath if you are using one of the scatter series. Instead of doing this, you should pass null or Number.NaN as the value as zero is still a value and will be plotted accordingly.
The second is if you have the UnknownValuePlotting of your series set to “LinearInterpolate,” which I believe is the default. I would recommend setting this to “DontPlot” as this will not plot any of the points that have Number.NaN as their value.
Combining these two should help you to make breaks in the lines of the IgxDataChart.
Please let me know if you have any other questions or concerns on this matter.
I appreciate the response.
I have verified that I do not have any data represented as 0/lowest scaled value. I also don't think the UnknownValuePlotting is the issue, either. I have added it to the chart details to no avail. Here is my code, please let me know what I'm doing wrong:
<igx-data-chart #chart height="{{ chartHeight }}px" width="{{ width ? width : '100%' }}" [dataSource]="outData1" brushes="{{ brushes }}" outlines="{{ outlines }}" (refreshCompleted)="onRefreshCompleted()" toolTipType="category"> <igx-category-x-axis #xAxis label="Date" title="Time Periods ({{ rollup }})"></igx-category-x-axis> <igx-numeric-y-axis #yAxis title="Quantity Produced ({{ param }})" abbreviateLargeNumbers="true"></igx-numeric-y-axis> <igx-stacked-area-series [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="outData1" [legend]="legend1" UnknownValuePlotting="'DontPlot'"></igx-stacked-area-series> <igx-stacked-line-series [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="outData2" [legend]="legend2" UnknownValuePlotting="'DontPlot'"></igx-stacked-line-series> </igx-data-chart>
Hello Chris, currently stacked series do not support plotting unknown values and you can request this feature in our product.However, you can pre-process your data and use category lines series to plot unknown values as it is demonstrated in attached application.dc-stacked-unknown-values.zip
The last time I requested a feature, it was ignored for 6 months straight before it was discontinued, even though it was the most popular request in the queue. As it is, we still don't have the ability to use dotted lines rather than solid lines (as I would be using that rather than stacked area, per my users). I don't see this being any different.
Your example shows that I need to process for a random number of values to add together for each series to simulate a stacked line series. It doesn't give a way to dynamically allocate the series in the HTML code, though, so I would need a working example of that to move forward.
It also seems to demonstrate that you cannot also accomplish this functionality with area series. Is this a correct assumption?
Your demonstration covers 3 lines, which could potentially be adequate with a more dynamic feel to it. I typically have to deal with 7-40 lines/areas per chart, often stacked together.
My other use case, which I've just remembered, is a category chart with lines that also has nulls, rather than 0/lowest scale. I'm seeing that the other implementation (UnknownValuePlotting="'DontPlot'") doesn't work in this case. I would assume there's another way to accomplish it. I will check the documentation to see if this is so. Meanwhile, its implementation currently stands at the below:
<div style="float: left; width: 50%"> <div class="inline"> <label>{{ param }}: </label> <igx-legend #paramLeg orientation="horizontal" title="{{ param }}"></igx-legend> </div> <igx-category-chart height="{{ chartHeight }}px" width="{{ width ? width : '100%' }}" [dataSource]="paramData" [legend]="paramLeg" chartType="line" yAxisTitle="{{ param }}" brushes="{{ brushes }}" markerTypes="none" toolTipType="category"></igx-category-chart> </div>
It dynamically has 1-3 series, but is replicated the amount of times as the previous use case, in tabular form.