Telerik RadCharts

Thread is closed for posting
3 posts, 0 answers
  1. amulya
    amulya avatar
    3 posts
    Member since:
    Jun 2014

    Posted 05 Jun 2014 Link to this post

    In Telerik RadCharts ,from Multiple series, when click on single series should take maximum point and minimum points and bind that data to another  chart .

    Approximate pictures:

    when i take 1st chart and click on single series it should generate 2nd chart with the selected Single series 


  2. amulya
    amulya avatar
    3 posts
    Member since:
    Jun 2014

    Posted 05 Jun 2014 in reply to amulya Link to this post

    Please look into charts and give solution as asap
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 09 Jun 2014 Link to this post

    Hi Amulya,

    You can handle the click event of the chart, obtain the min/max value of the clicked series and use these values for the newly created chart. For example:

    ASPX:
    <telerik:RadChart ID="RadChart1" runat="server" Height="400px" Width="600px" OnClick="RadChart1_Click">
        <Series>
            <telerik:ChartSeries Type="Line" Name="Series 1">
                <Items>
                    <telerik:ChartSeriesItem YValue="30">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="10">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20">
                    </telerik:ChartSeriesItem>
                </Items>
                <Appearance>
                    <PointMark Border-Color="Green" Visible="true"></PointMark>
                </Appearance>
            </telerik:ChartSeries>
        </Series>
        <PlotArea>
            <XAxis AutoScale="false">
                <Items>
                    <telerik:ChartAxisItem TextBlock-Text="item 1"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 2"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 3"></telerik:ChartAxisItem>
                </Items>
            </XAxis>
            <YAxis>
            </YAxis>
        </PlotArea>
    </telerik:RadChart>
    <telerik:RadChart ID="RadChart2" runat="server" Height="400px" Width="600px" OnClick="RadChart1_Click">
        <Series>
            <telerik:ChartSeries Type="Line" Name="Series 1">
                <Items>
                    <telerik:ChartSeriesItem YValue="0">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="0">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
        <PlotArea>
            <XAxis AutoScale="false">
                <Items>
                    <telerik:ChartAxisItem TextBlock-Text="item 1"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 2"></telerik:ChartAxisItem>
                </Items>
            </XAxis>
            <YAxis>
            </YAxis>
        </PlotArea>
    </telerik:RadChart>
    C#:
    protected void RadChart1_Click(object sender, Telerik.Charting.ChartClickEventArgs e)
    {
        double minValue = e.Series.Items[0].YValue;
        double maxValue = e.Series.Items[0].YValue;
        if (e.Series != null)
        {
            for (int i = 1; i < e.Series.Items.Count; i++)
            {
                if (e.Series.Items[i].YValue > maxValue)
                {
                    maxValue = e.Series.Items[i].YValue;
                }
                if (e.Series.Items[i].YValue < minValue)
                {
                    minValue = e.Series.Items[i].YValue;
                }
            }
        }
        RadChart2.Series[0].Items[0].YValue = minValue;
        RadChart2.Series[0].Items[1].YValue = maxValue;
    }

    You may also find useful this online demo.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top