How to implement the chart like this.

9 posts, 0 answers
  1. diandian82
    diandian82 avatar
    13 posts
    Member since:
    Jul 2007

    Posted 28 Jun 2010 Link to this post

    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
  2. diandian82
    diandian82 avatar
    13 posts
    Member since:
    Jul 2007

    Posted 29 Jun 2010 Link to this post

    anybody here to help?
  3. DevCraft banner
  4. diandian82
    diandian82 avatar
    13 posts
    Member since:
    Jul 2007

    Posted 30 Jun 2010 Link to this post

    nobody?
  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 30 Jun 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. safeer
    safeer avatar
    14 posts
    Member since:
    Nov 2006

    Posted 09 Sep 2010 Link to this post

    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
                        });


  7. Alexey Oyun
    Alexey Oyun avatar
    74 posts
    Member since:
    Mar 2010

    Posted 10 Sep 2010 Link to this post

      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.

     
  8. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 13 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. safeer
    safeer avatar
    14 posts
    Member since:
    Nov 2006

    Posted 13 Sep 2010 Link to this post

    Hi Alexey,
    Could you please post me some sample code? I have tried it but my output is very much different than yours.
    Thanks
  10. Alexey Oyun
    Alexey Oyun avatar
    74 posts
    Member since:
    Mar 2010

    Posted 14 Sep 2010 Link to this post

      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
Back to Top
DevCraft banner