This is a migrated thread and some comments may be shown as answers.

OnClientSeriesClicked event is not working for CandlestickSeries

6 Answers 37 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Saikiran
Top achievements
Rank 1
Saikiran asked on 22 Jul 2014, 11:10 AM
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);
        }







6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 22 Jul 2014, 12:27 PM
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.
0
Saikiran
Top achievements
Rank 1
answered on 23 Jul 2014, 11:09 AM
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.
0
Shinu
Top achievements
Rank 1
answered on 23 Jul 2014, 11:37 AM
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.
0
Saikiran
Top achievements
Rank 1
answered on 23 Jul 2014, 02:20 PM
Please find the attachment.  
Please help me out which RadHtmlChart is suitable for my requirement
0
Shinu
Top achievements
Rank 1
answered on 24 Jul 2014, 04:25 AM
Hi Saikiran,

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

Thanks,
Shinu.
0
Stamo Gochev
Telerik team
answered on 25 Jul 2014, 10:16 AM
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.

 
Tags
Chart (HTML5)
Asked by
Saikiran
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Saikiran
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or