How to implement the chart like this.

[diandian82]

I attached the chart i wan to implement by using RadChart. Could you please give me some guide on this?

1. The key thing is how to make the chart start from the middle not just from the only bottom.
2. How to divide one bar into two parts with different color and different captions. See the last bar in my attached chart.

Thanks,
George

[diandian82]

anybody here to help?

[diandian82]

nobody?

[Giuseppe]

Hello diandian82,

Unfortunately RadChart does not support Waterfall series type so it will not be possible to achieve the desired effect.


Kind regards,
Freddie
the Telerik team

[safeer]

Hi,
I would like to create that waterfall chart. If you don't support Waterfall series type then I can do it by range series. But the problem is that how can I can add range for Y values? 

Can I add data points to any type of series like that (notice Y value)?

new DataPoint

                    {

                        YValue =  [20,50 ]
XValue  = 10

                    });

[Alexey Oyun]

  Hi,

  I think you could get similar chart if you try to play with candle-stick chart.
  Set "Open" and "Low" to min value and set "Close" and "High" to min value. 
  Then you will see bars. I have attached screenshot of chart with one series.

 

[Giuseppe]

Hello Safeer,

Waterfall series type is not supported at the moment -- if you would like to use the Range series type, you need to set DataPoint.High & DataPoint.Low properties instead of DataPoint.YValue.

Hope this helps.


Regards,
Freddie
the Telerik team

[safeer]

Hi Alexey,
Could you please post me some sample code? I have tried it but my output is very much different than yours.
Thanks

[Alexey Oyun]

  I got one problem here, if you will use two candle-stick series they will be shown next to each other.
  To make them go one over another, we have to use one series with several points with same category.
  This approach has side effect, you have to handle legend manually, and assign colors as in this demo http://demos.telerik.com/silverlight/#Chart/MVVM

  Here is sample code
 

<my:RadChart Height="200">
                    <my:RadChart.DefaultView>
                        <Charting:ChartDefaultView>
                            <Charting:ChartDefaultView.ChartArea>
                                <Charting:ChartArea>
                                    <Charting:ChartArea.DataSeries>
                                        <!-- Candle Stick 1 -->
                                        <Charting:DataSeries LegendLabel="Product Sales">
                                            <Charting:DataSeries.Definition>
                                                <Charting:CandleStickSeriesDefinition>
                                                </Charting:CandleStickSeriesDefinition>
                                            </Charting:DataSeries.Definition>
                                            <Charting:DataPoint Open="0" Low="0" Close="10" High="10" XCategory="A"/>
                                            <Charting:DataPoint Open="10" Low="10" Close="30" High="30" XCategory="B"/>
                                            <Charting:DataPoint Open="50" Low="50" Close="55" High="55" XCategory="C"/>
                                            <Charting:DataPoint Open="5" Low="5" Close="20" High="20" XCategory="D"/>
                                        </Charting:DataSeries>
                                        <!-- Candle Stick 2 -->
                                        <Charting:DataSeries LegendLabel="Product Sales">
                                            <Charting:DataSeries.Definition>
                                                <Charting:CandleStickSeriesDefinition>
                                                </Charting:CandleStickSeriesDefinition>
                                            </Charting:DataSeries.Definition>
                                            <Charting:DataPoint Open="10" Low="10" Close="30" High="30" XCategory="A"/>
                                            <Charting:DataPoint Open="30" Low="30" Close="60" High="60" XCategory="B"/>
                                            <Charting:DataPoint Open="55" Low="55" Close="60" High="60" XCategory="C"/>
                                            <Charting:DataPoint Open="20" Low="20" Close="25" High="25" XCategory="D"/>
                                        </Charting:DataSeries>
                                    </Charting:ChartArea.DataSeries>
                                </Charting:ChartArea>
                            </Charting:ChartDefaultView.ChartArea>
                        </Charting:ChartDefaultView>
                    </my:RadChart.DefaultView>
                </my:RadChart>

                <my:RadChart Height="200">
                    <my:RadChart.DefaultView>
                        <Charting:ChartDefaultView>
                            <Charting:ChartDefaultView.ChartArea>
                                <Charting:ChartArea>
                                    <Charting:ChartArea.DataSeries>
                                        <!-- Candle Stick -->
                                        <Charting:DataSeries LegendLabel="Product Sales">
                                            <Charting:DataSeries.Definition>
                                                <Charting:CandleStickSeriesDefinition>
                                                </Charting:CandleStickSeriesDefinition>
                                            </Charting:DataSeries.Definition>
                                            <!-- Data 1 -->
                                            <Charting:DataPoint Open="0" Low="0" Close="10" High="10" XCategory="A"/>
                                            <Charting:DataPoint Open="10" Low="10" Close="30" High="30" XCategory="B"/>
                                            <Charting:DataPoint Open="50" Low="50" Close="55" High="55" XCategory="C"/>
                                            <Charting:DataPoint Open="5" Low="5" Close="20" High="20" XCategory="D"/>
                                            <!-- Data 2 -->
                                            <Charting:DataPoint Open="10" Low="10" Close="30" High="30" XCategory="A"/>
                                            <Charting:DataPoint Open="30" Low="30" Close="60" High="60" XCategory="B"/>
                                            <Charting:DataPoint Open="55" Low="55" Close="60" High="60" XCategory="C"/>
                                            <Charting:DataPoint Open="20" Low="20" Close="25" High="25" XCategory="D"/>
                                        </Charting:DataSeries>
                                    </Charting:ChartArea.DataSeries>
                                </Charting:ChartArea>
                            </Charting:ChartDefaultView.ChartArea>
                        </Charting:ChartDefaultView>
                    </my:RadChart.DefaultView>
                </my:RadChart>

First charts shows bars next to each other, second shows one over another but with same color. Try to solve it by using MVVM approach.

Below is a screenshot of what you will get