The property will be like similar to http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.autoBaseUnitSteps.
For the time being the property can be set through the kendo widget:
ASPX:
<script type="text/javascript">
function pageLoad() {
var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
kendoWidget.options.categoryAxis.baseUnitStep = "auto";
kendoWidget.options.categoryAxis.autoBaseUnitSteps = { months: [4] };
kendoWidget.redraw();
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="SellQuantity">
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="SellDate" >
<LabelsAppearance DataFormatString="MM/yyyy" RotationAngle="45"></LabelsAppearance>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("SellQuantity", typeof(int));
dt.Columns.Add("SellDate", typeof(DateTime));
dt.Rows.Add(1, 2, new DateTime(2011, 01, 01));
dt.Rows.Add(1, 2, new DateTime(2011, 06, 01));
dt.Rows.Add(2, 5, new DateTime(2011, 12, 01));
dt.Rows.Add(3, 6, new DateTime(2012, 06, 01));
dt.Rows.Add(4, 4, new DateTime(2012, 09, 01));
dt.Rows.Add(5, 7, new DateTime(2013, 03, 01));
return dt;
}
For the time being you can do that manually with an initially hidden panel that stores the text/image and display it only when there is no data in the chart. This can be done on the server-side as well as on the client-side. For example:
Server-side code:
ASPX:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
</telerik:RadHtmlChart>
<asp:Panel runat="server" Visible="false" ID="panelImage" Width="200" Height="200">
<asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
<asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
</asp:Panel>
C#:
protected void Page_Load(object sender, EventArgs e)
{
BarSeries bar = new BarSeries();
//CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
//bar.SeriesItems.Add(csi);
RadHtmlChart1.PlotArea.Series.Add(bar);
//If there isn't any items in the first series hide the chart and display the panel
if ((RadHtmlChart1.PlotArea.Series[0] as BarSeries).SeriesItems.Count == 0)
{
RadHtmlChart1.Visible = false;
panelImage.Visible = true;
}
}
Client-side code:
ASPX:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
</telerik:RadHtmlChart>
<asp:Panel runat="server" ID="panelImage" Width="200" Height="200" Style="display: none;">
<asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
<asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
</asp:Panel>
<script type="text/javascript">
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
//Hide the chart and display the panel when there is no data in the first series
if (chart._chartObject.options.series[0].data.length == 0) {
chart.get_element().style.display = "none";
$get("<%=panelImage.ClientID%>").style.display = "block";
}
}
</script>
C#:
protected void Page_Load(object sender, EventArgs e)
{
BarSeries bar = new BarSeries();
//CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
//bar.SeriesItems.Add(csi);
RadHtmlChart1.PlotArea.Series.Add(bar);
}
The feature should be like the one in KendoUI' https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate
For the time being it can be set through the chartObject:
ASPX:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<script type="text/ecmascript">
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.series[0].aggregate = "sum";
chart.repaint();
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
<PlotArea>
<Series>
<telerik:LineSeries DataFieldY="SellQuantity">
</telerik:LineSeries>
</Series>
<XAxis BaseUnit="months" DataLabelsField="SellDate">
<LabelsAppearance DataFormatString="d">
</LabelsAppearance>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
C#:
using System.Data;
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("SellQuantity", typeof(int));
dt.Columns.Add("SellDate", typeof(DateTime));
dt.Rows.Add(1, 2, new DateTime(2012, 06, 12));
dt.Rows.Add(2, 5, new DateTime(2012, 06, 13));
dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
dt.Rows.Add(4, 4, new DateTime(2012, 07, 18));
dt.Rows.Add(5, 7, new DateTime(2012, 07, 20));
return dt;
}
Add this functionality out of the box to navigator. The functionality made by these buttons(+/-) are more gentle that the navigator.
For the time being the property can be set through the underlying Kendo Chart widget. For example:
<script>
function OnLoad(chart) {
var widget = chart.get_kendoWidget();
//also applies for the minor grid lines - replace majorGridLines with minorGridLines
//Numeric series
widget.options.xAxis.majorGridLines.step = 5;
widget.options.yAxis.majorGridLines.step = 5;
//Category series
//widget.options.categoryAxis.majorGridLines.step = 5;
//widget.options.valueAxis.majorGridLines.step = 5;
widget.redraw();
}
</script>
<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
<ClientEvents OnLoad="OnLoad" />
<ChartTitle Text="Market Share Study">
</ChartTitle>
<PlotArea>
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<XAxis MinValue="0" MaxValue="100" Step="10">
<MinorGridLines Visible="false" />
</XAxis>
<YAxis MinValue="0" MaxValue="100" Step="10">
<MinorGridLines Visible="false" />
</YAxis>
<Series>
<telerik:BubbleSeries>
<Appearance FillStyle-BackgroundColor="#6ab2c9">
</Appearance>
<TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" />
<SeriesItems>
<telerik:BubbleSeriesItem Size="3" X="5" Y="55" />
<telerik:BubbleSeriesItem Size="12" X="14" Y="80" />
<telerik:BubbleSeriesItem Size="33" X="20" Y="60" />
<telerik:BubbleSeriesItem Size="10" X="18" Y="24" />
<telerik:BubbleSeriesItem Size="42" X="22" Y="32" />
</SeriesItems>
</telerik:BubbleSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Right"></Appearance>
</Legend>
</telerik:RadHtmlChart>
There is no axis click event. If we expose such event we can give custom info to the client about this axis. For the time being the event can the attached through the chartObject:
<script>
function pageLoad() {
var chart = $find("<%=ColumnChart1.ClientID%>");
chart._chartObject.bind("axisLabelClick", chart_axisLabelClick);
}
function chart_axisLabelClick(e) {
alert(e.value);
}
</script>
<telerik:RadHtmlChart runat="server" ID="ColumnChart1" 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="Item 1" />
<telerik:AxisItem LabelText="Item 2" />
<telerik:AxisItem LabelText="Item 3" />
</Items>
</XAxis>
</PlotArea>
<ChartTitle Text="Product sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
Width and height properties for the legend that will provide firm dimensions in pixels, so regardless of the series names' length, it will always have constant size.
You can set width and height through the kendo widget:
<script>
function pageLoad() {
var chart = $find("<%=DonutChart.ClientID%>").get_kendoWidget();
chart.options.legend.height = 80;
chart.redraw();
}
</script>
<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="500" Transitions="true">
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<ChartTitle Text="OS Usage Statistics for December 2012">
<Appearance Align="Center" Position="Top"></Appearance>
</ChartTitle>
<PlotArea>
<Series>
<telerik:DonutSeries>
<LabelsAppearance Visible="false">
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance>
<SeriesItems>
<telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7"
Y="55.6"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
</SeriesItems>
</telerik:DonutSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis. Add
Set tooltips of points between series points - http://screencast.com/t/Q7FYJxkouLA
The functionality is similar to the one in Kendo UI Chart (http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html) : http://dojo.telerik.com/OZuNU For the time being you can try to utilize the kendo.drawing API in order to place the text on a particular position. This forum may be helpful on the matter - http://www.telerik.com/forums/custom-drawing#sOkmYWbfrUW404Rr13eLDQ
Tooltips of points between series points See: http://screencast.com/t/Q7FYJxkouLA
1.Today: When vertical axis are out of navigator range from to they are seen. 2.Suggtion: Give option to programmer to choose if to show or hide. 3.The same idea for plot bands,
For the time being the properties can be set through the chartObject. For example:
ASPX:
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.valueAxis.max = 100;
chart._chartObject.options.valueAxis.min = 10;
chart.repaint();
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
<PlotArea>
<Series>
<telerik:RadarColumnSeries DataFieldY="yValues">
</telerik:RadarColumnSeries>
</Series>
<XAxis DataLabelsField="xValues"></XAxis>
<YAxis MinValue="10" MaxValue="100"></YAxis>
</PlotArea>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("yValues", typeof(int));
dt.Columns.Add("xValues", typeof(string));
dt.Rows.Add(1, 12, 20);
dt.Rows.Add(2, 15, 40);
dt.Rows.Add(3, 16, 60);
dt.Rows.Add(4, 14, 80);
dt.Rows.Add(5, 17, 100);
return dt;
}
We are trying to convert a websites 11 year old controls from a different vendor to telerik. All of the controls have been replaced except for the RadHtmlChart, which has limited customization of the legend. Specifically we have the following issues: 1) The legend color squares are too small. You can see the difference in the attachment "competitor" vs "telerik". REQUEST: Set the size of the color squares. 2) The legend spacing between items is not customizable and is too compressed for our liking. See "competitor" vs "telerik" to see the difference. REQUEST: Allow padding or margin between legend items. 3) The legend size cannot be set to a fixed width. For a left aligned legend, this results in multiple charts having inconsistent alignment. Setting a different margin for each chart individually does not fix the problem. Depending on the data fed to the charts, their position changes. See the "multiple-charts" attachment for an example. REQUEST: Allow a fixed legend size so multiple charts can be aligned. 4) For left-aligned charts, the legend cannot be set to the top. REQUEST: Allow TopLeft, TopRight options for legend alignment. Thank you, David A.
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html