OnClientSeriesClicked event is not working for CandlestickSeries

7 posts, 0 answers
  1. Saikiran
    Saikiran avatar
    8 posts
    Member since:
    Jul 2014

    Posted 22 Jul 2014 Link to this post

    The issue is when I click on the series in the chart, OnClientSeriesClicked event is not firing. 
    for the same type of chart OnClientSeriesHovered event is working fine.Please do the needful whether this type chart is not supports with OnClientSeriesClicked  event or Is there anything wrong with my code.?If not supports with OnClientSeriesClicked  event let me know the other alternative way for click event.

    attached Output.

     <telerik:RadHtmlChart runat="server" ID="TemperatureRadHtmlChart" Width="900" Height="350"
                    OnClientSeriesClicked="OnClientSeriesClicked" Transitions="true">
                    <PlotArea>
                        <Appearance>
                            <FillStyle BackgroundColor="White"></FillStyle>
                        </Appearance>
                        <Series>
                            <telerik:CandlestickSeries Name="XAxis" DataCloseField="MaxTemp" DataHighField="MaxTemp"
                                DataOpenField="MinTemp" DataLowField="MinTemp">
                                <Appearance>
                                    <FillStyle BackgroundColor="LimeGreen" />
                                </Appearance>
                                <TooltipsAppearance DataFormatString="{0}" Color="Black">
                                    <ClientTemplate>
                                     #=dataItem.XAxis#:#=dataItem.MinTemp# to #=dataItem.MaxTemp#
                                    </ClientTemplate>
                                </TooltipsAppearance>
                            </telerik:CandlestickSeries>
                        </Series>
                        <XAxis Step="100" MajorTickType="Outside" MinorTickType="Outside" Reversed="false"
                            Color="Black">
                            <LabelsAppearance RotationAngle="0">
                            </LabelsAppearance>
                            <MajorGridLines Color="White" Width="1"></MajorGridLines>
                            <MinorGridLines Color="White" Width="1"></MinorGridLines>
                            <TitleAppearance Position="Center" RotationAngle="0">
                            </TitleAppearance>
                        </XAxis>
                        <YAxis Color="Black" MajorTickSize="1" MajorTickType="Outside" MinorTickSize="1"
                            MinorTickType="Outside" Reversed="false">
                            <MajorGridLines Color="LightGray" Width="1"></MajorGridLines>
                            <MinorGridLines Color="LightGray" Width="1"></MinorGridLines>
                            <TitleAppearance>
                            </TitleAppearance>
                        </YAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="false" />
                    </Legend>
                </telerik:RadHtmlChart> 

    <script type="text/javascript" language="javascript">
            function OnClientSeriesClicked(sender, args) {
                debugger;
                var s = args.get_seriesName() + ',' + args.get_category();
                //var s = args.get_category() + ',' + args.get_seriesName();
                $find("<%= RadAjaxManager.ClientID %>").ajaxRequest(s);
            }







  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2014 in reply to Saikiran Link to this post

    Hi Saikiran,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    </telerik:RadAjaxManager>
    <telerik:RadHtmlChart runat="server" ID="TemperatureRadHtmlChart" Width="900" Height="350"
        OnClientSeriesClicked="OnClientSeriesClicked" Transitions="true">
        <Appearance>
            <FillStyle BackgroundColor="White"></FillStyle>
        </Appearance>
        <ChartTitle Text="Coca Cola Hellenic Bottling Co SA (OCCH :NYSE)">
            <Appearance Align="Center" BackgroundColor="White" Position="Top">
            </Appearance>
        </ChartTitle>
        <Legend>
            <Appearance BackgroundColor="White" Position="Bottom">
            </Appearance>
        </Legend>
        <PlotArea>
            <Appearance>
                <FillStyle BackgroundColor="White"></FillStyle>
            </Appearance>
            <XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside" Reversed="false">
                <TitleAppearance Text="Days">
                </TitleAppearance>
                <LabelsAppearance RotationAngle="0">
                </LabelsAppearance>
                <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                <Items>
                    <telerik:AxisItem LabelText="Feb \'11" />
                    <telerik:AxisItem LabelText="Feb \'18" />
                    <telerik:AxisItem LabelText="Feb \'25" />
                    <telerik:AxisItem LabelText="Mar \'04" />
                    <telerik:AxisItem LabelText="Mar \'11" />
                    <telerik:AxisItem LabelText="Mar \'18" />
                    <telerik:AxisItem LabelText="Mar \'25" />
                    <telerik:AxisItem LabelText="Apr \'01" />
                    <telerik:AxisItem LabelText="Apr \'08" />
                    <telerik:AxisItem LabelText="Apr \'15" />
                    <telerik:AxisItem LabelText="Apr \'22" />
                    <telerik:AxisItem LabelText="Apr \'29" />
                    <telerik:AxisItem LabelText="May \'06" />
                </Items>
                <TitleAppearance Position="Center" RotationAngle="0" Text="Days">
                </TitleAppearance>
            </XAxis>
            <YAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside" Reversed="false" MinValue="20" MaxValue="30" Step="1">
                <LabelsAppearance DataFormatString="{0:C}">
                </LabelsAppearance>
                <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                <TitleAppearance Position="Center" RotationAngle="0" Text="Price">
                </TitleAppearance>
            </YAxis>
            <Series>
                <telerik:CandlestickSeries Name="Coca Cola" DownColor="Red">
                    <Appearance>
                        <FillStyle BackgroundColor="Green"></FillStyle>
                    </Appearance>
                    <TooltipsAppearance BackgroundColor="LightGray">
                    </TooltipsAppearance>
                    <SeriesItems>
                        <telerik:CandlestickSeriesItem Open="26.29" High="26.93" Low="25.49" Close="26.00" />
                        <telerik:CandlestickSeriesItem Open="26.30" High="27.09" Low="25.20" Close="25.99" />
                        <telerik:CandlestickSeriesItem Open="26.25" High="27.189" Low="24.60" Close="26.87" />
                        <telerik:CandlestickSeriesItem Open="26.68" High="26.82" Low="26.06" Close="26.29" />
                        <telerik:CandlestickSeriesItem Open="26.22" High="28.15" Low="25.676" Close="27.91" />
                        <telerik:CandlestickSeriesItem Open="27.25" High="29.44" Low="27.01" Close="27.99" />
                        <telerik:CandlestickSeriesItem Open="28.15" High="28.15" Low="25.49" Close="26.76" />
                        <telerik:CandlestickSeriesItem Open="26.52" High="27.06" Low="24.865" Close="24.95" />
                        <telerik:CandlestickSeriesItem Open="24.84" High="26.49" Low="24.83" Close="26.20" />
                        <telerik:CandlestickSeriesItem Open="25.51" High="25.845" Low="21.83" Close="22.32" />
                        <telerik:CandlestickSeriesItem Open="23.18" High="24.10" Low="22.40" Close="23.25" />
                        <telerik:CandlestickSeriesItem Open="24.50" High="25.90" Low="24.00" Close="24.538" />
                        <telerik:CandlestickSeriesItem Open="24.47" High="26.14" Low="24.10" Close="26.14" />
                    </SeriesItems>
                </telerik:CandlestickSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    JavaScript:
    function OnClientSeriesClicked(sender, args) {
        var series = args.get_seriesName() + ',' + args.get_category();
        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(series);
    }

    C#:
    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        string argument = e.Argument;
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saikiran
    Saikiran avatar
    8 posts
    Member since:
    Jul 2014

    Posted 23 Jul 2014 in reply to Shinu Link to this post

    Thanks Shinu for the reply.

    The code snippet which you have sent me is working fine as expected but In my case CandlestickSeriesItem values of Open, Low  are same and  High,Close are same So I dont see any line through the bar..In this case what I need to do.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2014 in reply to Saikiran Link to this post

    Hi Saikiran,

    Please do the below modification in the code snippet and try it.

    ASPX:
    ...
    <
    YAxis AxisCrossingValue="25" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
        Reversed="false" MinValue="10" MaxValue="30" Step="2">
        <LabelsAppearance DataFormatString="{0:C}">
        </LabelsAppearance>
        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
        <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
        <TitleAppearance Position="Center" RotationAngle="0" Text="Price">
        </TitleAppearance>
    </YAxis>
    ...

    Thanks,
    Shinu.
  6. Saikiran
    Saikiran avatar
    8 posts
    Member since:
    Jul 2014

    Posted 23 Jul 2014 in reply to Shinu Link to this post

    Please find the attachment.  
    Please help me out which RadHtmlChart is suitable for my requirement
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2014 in reply to Saikiran Link to this post

    Hi Saikiran,

    Unfortunately I couldn't replicate the issue at my end.

    Thanks,
    Shinu.
  8. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 25 Jul 2014 Link to this post

    Hi Saikiran,

    Can you give me more details on the issue? Furthermore, can you send me a sample page with some hard-coded data, so I can investigate the case and give you relevant suggestions?

    Regards,
    Stamo Gochev
    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
UI for ASP.NET Ajax is Ready for VS 2017