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

HTMLChart & RadContextMenu

1 Answer 59 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Kurt Kluth
Top achievements
Rank 1
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

Sort by
0
Danail Vasilev
Telerik team
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
Tags
Chart (HTML5)
Asked by
Kurt Kluth
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or