A good improvement in RadHtmlChart would be the introduction of Waterfall series.
Currently there is some space between the PlotArea and the starting/ending points of the LineSeries in RadHtmlChart.
To changethat behavior, so that it is similar to the one in AreaSeries the justified property (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.justified) can be set through the underlying Kendo Chart widget:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function onLoad(sender) {
var chart = sender.get_kendoWidget();
var opts = chart.options;
opts.categoryAxis.justified = true;
chart.setOptions(opts);
chart.redraw();
}
</script>
</telerik:RadCodeBlock>
<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
<ClientEvents OnLoad="onLoad" />
<PlotArea>
<Series>
<telerik:LineSeries Name="Week 15" MissingValues="Interpolate">
<SeriesItems>
<telerik:CategorySeriesItem Y="15" />
<telerik:CategorySeriesItem Y="23" />
<telerik:CategorySeriesItem />
<telerik:CategorySeriesItem Y="71" />
<telerik:CategorySeriesItem Y="93" />
<telerik:CategorySeriesItem Y="43" />
<telerik:CategorySeriesItem Y="23" />
</SeriesItems>
</telerik:LineSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
RadHtmlChart should allow the usage of indices in the DataFormatString when DateTime values are used:
<XAxis Type="Date">
<LabelsAppearance DataFormatString="{0:d}" />
</XAxis>
Currently BaseUnit property for DateAxes in RadHtmlChart accepts the following values - year, months, days, hours and minutes. Improve this property by adding seconds, weeks and auto.
It would be great to have this new chart type.
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/columnchart/defaultcs.aspx Try it with Stacked mode checked and minvalue set to 5000 on Y settings!
Currently when RadHtmlChart is placed inside RadSplitter with RadSlidingZone a JavaScript error is thrown when the following conditions are met: 1.RadHtmlChart doesn't have its width property set 2.The position of the RadHtmlChart's legend is changed in the codebehind The workaround is to set the width property of the chart.
A JS error is thrown when a RadHtmlChart is databound and there are series items with null values that correspond to DateTime values on the XAxis. The issue could be handled in the following way: Check if there is a series item's value that is null and if this is the case then do not add it to the datasource
I know that does not support RADHTMLCHART Marked Zone. But somehow I need to make a mark, for example in the SeriesLine that Saturdays and Sundays this line with another color. I leave a picture so you can understand. I need the part or series values Y Vier and Sab will be anothe color. for examples both series at orange color. I thank you for the attention. regards
The property for each series could be RenderInPlotArea=true|false
It will control whether the series will be rendered in the plot area, if set to false the series name will still be present in the legend, but grayed out, as if the end user has clicked it already to hide the series in the browser. This will give the developer programmatic contol over the initial state of the chart that the end user can modify later.
For the time being the following workaround can be used:
JavaScript:
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.series[0].visible = false;
chart.repaint();
}
</script>
ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Series 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="30" />
<telerik:CategorySeriesItem Y="10" />
<telerik:CategorySeriesItem Y="20" />
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="Series 2">
<SeriesItems>
<telerik:CategorySeriesItem Y="5" />
<telerik:CategorySeriesItem Y="12" />
<telerik:CategorySeriesItem Y="8" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Currently when numerous series items are present, numerical series (Scatter/ScatterLine) calculates automatically the step through which the major/minor gridlines and the corresponding xaxis labels are rendered, so that they are visually readable. For categorical charts, however, when multiple series items are present, all the xaxis labels are plotted, so that they are not readable. Add ability to autoadjust the step for the xaxis labels in categorical charts.
Currently the available appearance options of the line in Area, Line and ScatterLine Series are width and background color. Expose additional option for changing the dash type(e.g. dash, dashDot, Dot, etc). For the time being the following workaround can be used:
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
//DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid
chart._chartObject.options.series[0].dashType = "dot";
chart.repaint();
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:LineSeries Name="Series 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="30" />
<telerik:CategorySeriesItem Y="10" />
<telerik:CategorySeriesItem Y="20" />
</SeriesItems>
</telerik:LineSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="item 1" />
<telerik:AxisItem LabelText="item 2" />
<telerik:AxisItem LabelText="item 3" />
</Items>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
Similar to the Scale Breaks functionality in RadChart - http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/features/scale-breaks
The current behavior of the RadHtmlChart preserves only the bound datasource, however it doesn't store programmatically added series items after a postback.
The workaround is instead of creating and adding series items programmatically, create a datatable and pass it as a datasource to the chart. For example:
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("id");
dt.Columns.Add("xValues");
dt.Columns.Add("yValues");
for (int i = 0; i < 5; i++)
{
dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i);
}
ScatterLineSeries sls1 = new ScatterLineSeries();
sls1.LabelsAppearance.DataFormatString = "{0:d}";
sls1.DataFieldX = "xValues";
sls1.DataFieldY = "yValues";
RadHtmlChart1.PlotArea.Series.Add(sls1);
RadHtmlChart1.DataSource = dt;
RadHtmlChart1.DataBind();
}
Adding a Radar chart type will be a nice improvement in RadHtmlChart.
In scenarios where the Series are Column/Bar and Positive and Negative values are present, the XAxis labels are overlapped by the Series themselves. Expose an additional Position property for the axis labels that controls their position to Top/Bottom.
For the time being you can choose either approach:
1) Use a second x-axis that stores only the labels:
a) Category Axis example:
<script>
function BottomXAxisLabels() {
var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis);
axis.line.visible = false;
chart.setOptions({ categoryAxis: [{}, axis] });
chart.options.valueAxis.axisCrossingValues = [0, -99999999999];
chart.redraw();
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<ClientEvents OnLoad="BottomXAxisLabels" />
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="-4000" />
<telerik:CategorySeriesItem Y="10000" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="1" />
<telerik:AxisItem LabelText="2" />
<telerik:AxisItem LabelText="3" />
</Items>
</XAxis>
</PlotArea>
<ChartTitle Text="Product sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
b) Numeric axis example:
<script>
function BottomXAxisLabels() {
var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
var axis = $telerik.$.extend(true, {}, chart.options.xAxis);
axis.line.visible = false;
chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] });
chart.options.yAxis.axisCrossingValues = [0, -99999999999];
chart.redraw();
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<ClientEvents OnLoad="BottomXAxisLabels" />
<PlotArea>
<Series>
<telerik:ScatterLineSeries Name="Product 1">
<SeriesItems>
<telerik:ScatterSeriesItem Y="15000" X="5" />
<telerik:ScatterSeriesItem Y="-4000" X="6" />
<telerik:ScatterSeriesItem Y="10000" X="7"/>
</SeriesItems>
</telerik:ScatterLineSeries>
</Series>
</PlotArea>
<ChartTitle Text="Product sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
2) Use the TextStyle property of the RadHtmlChart , in order to set higher margin for the XAxis labels. For example:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="-4000" />
<telerik:CategorySeriesItem Y="10000" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis>
<LabelsAppearance>
<TextStyle Margin="135 0 0 0" />
</LabelsAppearance>
<Items>
<telerik:AxisItem LabelText="item1" />
<telerik:AxisItem LabelText="item2" />
<telerik:AxisItem LabelText="item3" />
</Items>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
Note: Labels margin and chart's PlotArea height are inversely proportional - the higher the margin is the lower the chart's PlotArea height will be. This resizing is needed, in order for the chart's main dimensions to be kept.
The OnClientPlotAreaClicked event could be similar to the OnClientSeriesClicked event. It might be used for charts which are very small in size and clicking an individual series is not so easy. For the time being the following workaround can be used:
ASPX:
<script type="text/javascript">
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.bind('plotAreaClick', plotAreaClick);
}
function plotAreaClick(e) {
if (e.originalEvent.type === "contextmenu") {
// Disable browser context menu
alert('rightClick');
e.originalEvent.preventDefault();
}
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="23000" />
<telerik:CategorySeriesItem Y="10000" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="1" />
<telerik:AxisItem LabelText="2" />
<telerik:AxisItem LabelText="3" />
</Items>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
Does not visualize data for some of the cases. I attached a project related to this bug. In the code there is an option with data which RadHtmlChart do visualize and there is option for data which RadHtmlChard don't visualize. All the code is located in Default.aspx PS: With tooltip commented data do visualized in both cases. Gregory.