1 Answer, 1 is accepted
0
Hello Steve,
The desired settings can be configured through the underlying Kendo UI widget of the chart by setting its series.median and series.mean options.
For example, you can configure them in the client-side Load event of RadHtmlChart:
<script>
function onChartLoad(chart, args) {
var chartWidget = chart.get_kendoWidget();
for (var i = 0; i < chart.get_kendoWidget().options.series.length; i++) {
chartWidget.findSeriesByIndex(i)._options.median = { color: 'yellow', width: 5 };
chartWidget.findSeriesByIndex(i)._options.mean = { color: '#ff0000', width: 3 };
}
}
</script>
<telerik:RadHtmlChart runat="server" ID="BoxPlotChart" Width="800px" Height="400px">
<ClientEvents OnLoad="onChartLoad" />
<ChartTitle Text="Analysis of Train Arrival Delay"></ChartTitle>
<PlotArea>
<Series>
<telerik:BoxPlotSeries>
<SeriesItems>
<telerik:BoxPlotSeriesItem Lower="26" Q1="38" Median="51" Q3="63" Upper="75" Mean="49">
<Outliers>
<telerik:Outlier Value="20" />
<telerik:Outlier Value="140" />
<telerik:Outlier Value="145" />
<telerik:Outlier Value="5" />
<telerik:Outlier Value="90" />
<telerik:Outlier Value="100" />
</Outliers>
</telerik:BoxPlotSeriesItem>
<telerik:BoxPlotSeriesItem Lower="40" Q1="65" Median="71" Q3="115" Upper="140" Mean="80">
<Outliers>
<telerik:Outlier Value="150" />
<telerik:Outlier Value="28" />
</Outliers>
</telerik:BoxPlotSeriesItem>
<telerik:BoxPlotSeriesItem Lower="31" Q1="41" Median="52" Q3="62" Upper="70" Mean="52">
<Outliers>
<telerik:Outlier Value="14" />
<telerik:Outlier Value="20" />
<telerik:Outlier Value="85" />
<telerik:Outlier Value="135" />
</Outliers>
</telerik:BoxPlotSeriesItem>
<telerik:BoxPlotSeriesItem Lower="39" Q1="62" Median="68" Q3="110" Upper="115" Mean="78">
<Outliers>
<telerik:Outlier Value="125" />
<telerik:Outlier Value="18" />
</Outliers>
</telerik:BoxPlotSeriesItem>
</SeriesItems>
<OutliersAppearance MarkersType="Cross">
<BorderAppearance Color="#fa9819" />
</OutliersAppearance>
<ExtremesAppearance MarkersType="Circle">
<BorderAppearance Color="#d41414" />
</ExtremesAppearance>
<Appearance FillStyle-BackgroundColor="#4f99d2"></Appearance>
<TooltipsAppearance Visible="false"></TooltipsAppearance>
</telerik:BoxPlotSeries>
</Series>
<YAxis>
<TitleAppearance Text="Minutes"></TitleAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
</YAxis>
<XAxis>
<TitleAppearance Text="Quarter">
</TitleAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
<Items>
<telerik:AxisItem LabelText="Quarter 1" />
<telerik:AxisItem LabelText="Quarter 2" />
<telerik:AxisItem LabelText="Quarter 3" />
<telerik:AxisItem LabelText="Quarter 4" />
</Items>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>Regards,
Vessy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Steve
commented on 24 Feb 2022, 01:10 AM
Top achievements
Rank 1
Rank 1
Is their a way to do this from the code-behind instead?
Vessy
commented on 24 Feb 2022, 03:09 PM
Telerik team
Hi Steve, I am afraid that the mean and median options are not exposed in RadHtmlChart, thus they cannot be set on the server-side. The only way to configure them at the moment is on the client-side, through the Kendo UI chart widget.