HTMLChart & RadContextMenu

2 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 17 Aug 2015 Link to this post

    I have a HTMLChart that I would like to allow a user to right click on a point on the graph and set a start date and then right click on a second point and set the end date.  After the points are set it would then pass the dates into a stored procedure and update the HTMLChart.  How would I go about doing this?  The chart is currently being populated via server-side code.

    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Visible="false" Legend-Appearance-Position="Top" Width="95%">
                                <ClientEvents OnLoad="BottomXAxisLabels" OnSeriesClick="OnSeriesClick" />
                                <PlotArea>
                                    <Series>
                                        <telerik:ScatterLineSeries DataFieldY="ReturnedValue" DataFieldX="cycle_Date">
                                            <TooltipsAppearance Color="White" >
                                            </TooltipsAppearance>
                                            <LabelsAppearance Visible="false">
                                            </LabelsAppearance>
                                        </telerik:ScatterLineSeries>
                                    </Series>
                                    <YAxis>
                                        <LabelsAppearance>
                                            <TextStyle Bold="true" />
                                        </LabelsAppearance>
                                        <MinorGridLines Visible="false"></MinorGridLines>
                                        <MajorGridLines Visible="false"></MajorGridLines>
                                    </YAxis>
                                    <XAxis DataLabelsField="cycle_Date" BaseUnit="Years" MajorTickSize="1" >
                                        <LabelsAppearance Visible="true" RotationAngle="90" DataFormatString="Year {0:yyyy}">
                                            <TextStyle Bold="true" />
                                        </LabelsAppearance>
                                        <TitleAppearance Text="Dates">
                                            <TextStyle Bold="true" />
                                        </TitleAppearance>
                                        <MinorGridLines Visible="false"></MinorGridLines>
                                        <MajorGridLines Visible="true"></MajorGridLines>
                                    </XAxis>
                                </PlotArea>
                                <ChartTitle>
                                    <Appearance>
                                        <TextStyle Bold="true" />
                                    </Appearance>
                                </ChartTitle>
                                <Legend>
                                    <Appearance Visible="true" Position="Bottom"></Appearance>
                                </Legend>
                            </telerik:RadHtmlChart>
                        </telerik:RadAjaxPanel>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 20 Aug 2015 Link to this post

    Hello Kurt,

    You can handle the seriesClick event of the chart where you can get the x/y values of the point:

    function OnSeriesClick(e) {
        console.log("X: " + e.value.x + "\nY: " + e.value.y);
    }

    After that you can, for example, execute an AJAX request and pass these values as a parameter to the ajaxRequest() method of the AjaxManager - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx

    Regards,
    Danail Vasilev
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top