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

HTMLChart & RadContextMenu

1 Answer 119 Views

Chart (HTML5)

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

Kurt Kluth asked on 17 Aug 2015, 01:47 PM

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>

1 Answer, 1 is accepted

answered on 20 Aug 2015, 11:52 AM

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