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.