If set to true the chart will round the first and last date to the nearest base unit.
There are two workarounds you can use in the meantime
- Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart.
- Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands
Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget
<script>
var myData = [{
"day": new Date("2014/01/01")
}, {
"day": new Date("2014/01/02")
}, {
"day": new Date("2014/01/31")
}];
function addPlotBand() {
$ = $telerik.$;
var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
var options = {};
options["categoryAxis"] = {
plotBands: [{
from: start,
to: end,
color: "green"
}]
};
$("#chart2").data("kendoChart").setOptions(options);
}
function pageLoad() {
$ = $telerik.$;
$("#chart2").kendoChart({
dataSource: {
data: myData
},
categoryAxis: {
type: "date",
field: "day"
}
});
}
</script>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" />
<div id="chart2"></div>
<telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;">
<PlotArea>
<XAxis DataLabelsField="day">
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
For the time being the DateTime object can be set to the AxisCrossingPoint on the client. For example:
ASPX:
<script>
function OnLoadHandler(sender, args) {
var kendoChart = sender.get_kendoWidget();
var opts = kendoChart.options;
opts.categoryAxis.axisCrossingValues = [0, new Date("2014, 11, 05, 19:15:00")];
kendoChart.setOptions(opts);
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<ClientEvents OnLoad="OnLoadHandler" />
<PlotArea>
<Series>
<telerik:LineSeries Name="Product 1" DataFieldY="SellQuantity">
</telerik:LineSeries>
</Series>
<XAxis DataLabelsField="SellDate" BaseUnit="Minutes">
<LabelsAppearance Step="15"></LabelsAppearance>
<MinorGridLines Visible="false" />
<AxisCrossingPoints>
<telerik:AxisCrossingPoint Value="10" />
</AxisCrossingPoints>
</XAxis>
<AdditionalYAxes>
<telerik:AxisY></telerik:AxisY>
</AdditionalYAxes>
</PlotArea>
<ChartTitle Text="LineSeries"></ChartTitle>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
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(2014, 11, 05, 18, 22, 22));
dt.Rows.Add(2, 5, new DateTime(2014, 11, 05, 18, 56, 22));
dt.Rows.Add(3, 6, new DateTime(2014, 11, 05, 19, 14, 22));
dt.Rows.Add(4, 4, new DateTime(2014, 11, 05, 19, 48, 22));
dt.Rows.Add(5, 7, new DateTime(2014, 11, 05, 20, 12, 22));
return dt;
}
Declined with the following reason - chart series are preserved in the ViewState by default. You can do one of the following: 1) Either disable the ViewState of the chart or its container: ASPX: <asp:Panel ID="Panel1" runat="server" EnableViewState="false" /> C#: RadHtmlChart chart1 = new RadHtmlChart(); chart1.EnableViewState = false; 2) Or clear the chart Series collection after adding the chart to the page: RadHtmlChart chart1 = new RadHtmlChart(); chart1.ID = "myChart"; //Add the chart to the page Panel1.Controls.Add(chart1); //Clear the series after adding the chart to the page chart1.PlotArea.Series.Clear();
inkspace not suitable for radhtmlchart exporting. Because inkspace does not work in windows server 2008 R2. So please provide direct exporting feature for radhtmlcharts.
Please provide RadHtmlChart Export features
When viewing a line chart with multiple series, the RadHtmlChart automatically changes shapes for each series to make it easy to distinguish, however the shapes are not carried over to the legend. This means a user printing on a black & white printer will have no way to distinguish the different series (since the shapes are not in the legend).
For the time being the property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.border) can be set through the chartObject. For example:
JavaScript:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function pageLoad() {
var chart = $find("<%=PieChart1.ClientID%>");
chart._chartObject.options.legend.border = { width: 2, color: "green", dashType: "longDashDotDot" }
chart.repaint();
}
</script>
</telerik:RadCodeBlock>
ASPX:
<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="90">
<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
<TooltipsAppearance DataFormatString="{0} %" />
<SeriesItems>
<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" />
<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />
<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
<ChartTitle Text="Browser Usage for April 2012">
</ChartTitle>
</telerik:RadHtmlChart>
For the time begin the event logic can be executed with a small time out:
JavaScript
<script type="text/javascript">
var isFirstClick = "1";
function OnClientSeriesClicked(sender, args) {
setTimeout(function () {
alert(isFirstClick);
}, 0);
}
</script>
ASPX:
<telerik:RadHtmlChart runat="server" Width="900px" Height="700px" ID="RadHtmlChart2"
OnClientSeriesClicked="OnClientSeriesClicked">
<PlotArea>
<Series>
<telerik:BarSeries>
<SeriesItems>
<telerik:CategorySeriesItem Y="10" />
</SeriesItems>
</telerik:BarSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
String data source fields in the RadHtmlChart that contain only numeric characters should not be parsed to decimal. Also when such a string starts with the 0 character, it is omitted. For example the "0" item in the legend is not displayed with the example below:
ASPX:
<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true">
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<ChartTitle Text="Browser Usage for April 2012">
<Appearance Align="Center" BackgroundColor="White" Position="Top">
</Appearance>
</ChartTitle>
<Legend>
<Appearance BackgroundColor="White" Position="Right" Visible="true">
</Appearance>
</Legend>
<PlotArea>
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<Series>
<telerik:PieSeries StartAngle="90" DataFieldY="code_count" NameField="items_names">
<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
</LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
C#:
using System.Data;
protected void Page_Load(object sender, EventArgs e)
{
PieChart1.DataSource = GetData();
PieChart1.DataBind();
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("code_count", typeof(int));
dt.Columns.Add("items_names", typeof(string));
dt.Rows.Add(1, 771, "0");
dt.Rows.Add(2, 187, "1");
dt.Rows.Add(3, 178, "2");
dt.Rows.Add(4, 60, "3");
return dt;
}
For the time being the CommonTooltipsAppearance.Shared property must be set to false. For example:
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Layout="Sparkline" Width="100" Height="150">
<PlotArea>
<CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance>
<Series>
<telerik:LineSeries>
<TooltipsAppearance>
<ClientTemplate>
Value: #=value# <br />
Category #=category#
</ClientTemplate>
</TooltipsAppearance>
<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>
So cool RadHtmlChart navigator should be able to be attached to non-stock layout charts, support multiple databound series and y-axis items other than financial data
For the time being the following workaround can be used:
<style>
.k-chart .k-tooltip, .k-sparkline .k-tooltip, .k-stockchart .k-tooltip {
background-image: url("//:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNJREFUeNpi/P//vwMDFQELEP8beQb+HTWQYgP/DHoD/466cAR4edRAyg38P6hLbIAAAwCnWhhVsxvdCAAAAABJRU5ErkJggg==") !important;
}
</style>
The functionality is currently exposed only by the x-axis of the sparkliens. It would be a good idea to be exposed by the other series types as well.
For the time being you can configure the cross hair through the kendo widget:
<script>
function pageLoad() {
$find('RadHtmlChart1').get_kendoWidget().setOptions({categoryAxis:{crosshair:{ color: "green", width: 2, visible: true}}});
}
</script>
<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:LineSeries Name="Series 2">
<SeriesItems>
<telerik:CategorySeriesItem Y="39" />
<telerik:CategorySeriesItem Y="19" />
<telerik:CategorySeriesItem Y="29" />
</SeriesItems>
</telerik:LineSeries>
</Series>
<XAxis>
<LabelsAppearance RotationAngle="33"></LabelsAppearance>
<Items>
<telerik:AxisItem LabelText="Item 1" />
<telerik:AxisItem LabelText="Item 2" />
<telerik:AxisItem LabelText="Item 3" />
</Items>
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
increase line width when mouse hovers