This can be done by exposing a spacing property for the particular Series.
For the time being mentioned properties can be set on the client through the chartObject of the RadHtmlChart:
JavaScript:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function ChangeSpace() {
var chart = $find("<%=ColumnChart.ClientID%>");
chart._chartObject.options.series[0].spacing = 0.9;
chart.repaint();
}
function ChangeGap() {
var chart = $find("<%=ColumnChart.ClientID%>");
chart._chartObject.options.series[0].gap = 10;
chart.repaint();
}
</script>
</telerik:RadCodeBlock>
ASPX:
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change Space" OnClientClicked="ChangeSpace" />
<telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Change Gap" OnClientClicked="ChangeGap" />
<telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true">
....
</telerik:RadHtmlChart>
When data-bound categorical series has zeros in the x-axis labels they are parsed and the zeros disappear. For example:
ASPX:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadHtmlChart runat="server" ID="Radhtmlchart1">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="Score1"></telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="Student">
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
Radhtmlchart1.DataSource = GetData();
Radhtmlchart1.DataBind();
}
protected DataTable GetData()
{
DataTable table = new DataTable();
table.Columns.Add("Student", typeof(string));
table.Columns.Add("Score1", typeof(int));
table.Rows.Add(new object[] { "0806014562", 40 });
table.Rows.Add(new object[] { "0806014562", 50 });
table.Rows.Add(new object[] { "0806014562", 70 });
return table;
}
Workarounds:
1) Use format string to add the desired missing zeros when parsed.
<LabelsAppearance DataFormatString="0{0}"></LabelsAppearance>
2) Add items programmatically
protected void Page_Load(object sender, EventArgs e)
{
Radhtmlchart1.DataSource = GetData();
Radhtmlchart1.DataBind();
DataTable currDT = GetData();
for (int i = 0; i < currDT.Rows.Count; i++)
{
AxisItem currItem = new AxisItem(currDT.Rows[i]["Student"].ToString());
Radhtmlchart1.PlotArea.XAxis.Items.Add(currItem);
}
}
When Series are created programmatically, Axes settings are not preserved after postback. The workaround is to create an empty series in the markup. For example:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
...
<PlotArea>
<YAxis>...</YAxis>
<XAxis>...</XAxis>
<Series>
<telerik:ScatterLineSeries Name=" ">
<Appearance FillStyle-BackgroundColor="Transparent"></Appearance>
</telerik:ScatterLineSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Series tooltips are not visible in a Stock chart when the same series is added programmatically in the plotarea and the navigator simultaneously.
The workaround is to:
1) Create different series for the plot area and the navigator.
2) Explicitly set the tooltips' visibility with JS like this:
<script type="text/javascript">
function pageLoad() {
var chart = $find("Chart");
var series = chart._chartObject.options.series[0];
series.tooltip.visible = true;
//repaint the chart to apply the changes
chart.repaint();
}
</script>
For the time being you can set the property through the kendoWidget. All available options are available at http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.connectors
<script>
function pageLoad() {
var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
kendoWidget.options.series[0].connectors = {width: "3", color: "#ff0000"};
kendoWidget.redraw();
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
<PlotArea>
<Series>
<telerik:PieSeries>
<SeriesItems>
<telerik:PieSeriesItem Y="30" />
<telerik:PieSeriesItem Y="10" />
<telerik:PieSeriesItem Y="20" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
When using the RadHtmlChart RadarSeries the axis are default drawn like a spiders web. (see screenshot)
A common request is that axis lines for this type of graph are drawn as circles (represending more a Radar type look).
This can currently be achieved by accessing the Kendo widget like so:
$find('RadarAreaChart').get_kendoWidget().options.valueAxis.majorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().options.valueAxis.minorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().redraw();
But it would be VERY convenient (and probably very easy to implement for you guys :-) if it was a setting on the RadarSeries itself (or perhaps on the axis of the RadarSeries.
E.g. property on RadarSeries called AxisType with values (Spider or Radar).
Best Regards
Thomas
The property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.maxDateGroups) can be set through the kendoWidget:
JavaScript:
<script>
function OnLoad(args) {
var kendoWidget = args.get_kendoWidget();
kendoWidget.options.categoryAxis.maxDateGroups = 8;
kendoWidget.options.categoryAxis.baseUnit = 'fit';
kendoWidget.redraw();
}
</script>
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="640px" Height="480px">
<ClientEvents OnLoad="OnLoad" />
<PlotArea>
<Series>
<telerik:LineSeries DataFieldY="SellQuantity">
<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
</LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
</telerik:LineSeries>
</Series>
<XAxis DataLabelsField="SellDate">
<TitleAppearance Text="Sell Date">
</TitleAppearance>
<LabelsAppearance DataFormatString="d">
</LabelsAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
</XAxis>
<YAxis>
<TitleAppearance Text="Quantity">
</TitleAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
</YAxis>
</PlotArea>
<ChartTitle Text="Sold Cars per Date">
</ChartTitle>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart2.DataSource = GetData();
RadHtmlChart2.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, 06, 12));
dt.Rows.Add(2, 5, new DateTime(2011, 12, 12));
dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));
dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));
return dt;
}
Currently BarSeries/ColumnSeries are rendered like a "glass" gradient and PieSeries/DonutSeries like a "roundedBevel" gradient. Expose an OverlayGradient property that lets you control the gradient (e.g. "glass", "roundedBevel", "sharpBevel", "none"). For the time being the properties can be set through the chartObject:
JavaScript:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function pageLoad() {
var chart1 = $find("<%=ColumnChart1.ClientID%>");
//Set glass gradient to first series
chart1._chartObject.options.series[0].overlay = { gradient: "glass" };
//Remove gradient from second series
chart1._chartObject.options.series[1].overlay = { gradient: "none" };
chart1.repaint();
var chart2 = $find("<%=PieChart1.ClientID%>");
//Set sharpBevel gradient to pie series
chart2._chartObject.options.series[0].overlay = { gradient: "sharpBevel" };
chart2.repaint();
}
</script>
</telerik:RadCodeBlock>
ASPX:
<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Series with Gradient">
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="23000" />
<telerik:CategorySeriesItem Y="10000" />
<telerik:CategorySeriesItem Y="16000" />
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="Series with no Gradient">
<SeriesItems>
<telerik:CategorySeriesItem Y="35000" />
<telerik:CategorySeriesItem Y="10000" />
<telerik:CategorySeriesItem Y="20000" />
<telerik:CategorySeriesItem Y="17000" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px">
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="90">
<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="Pie with Gradient">
</ChartTitle>
</telerik:RadHtmlChart>
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 use the following workaround:
1) Either hide the chart with visibility:hidden instead of display:none
2) Or use the following workaround:
<div id="div1" style="display: none;">
<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</div>
<input type="button" onclick="showChart(); return false;" value="Show Chart" />
<script>
Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () {
var that = this;
//when visible is false - nothing is sent from the server to save transferred data
//e.g - there are properties set but visible is false - we do not need to send those properties amyway
//that is why - set visible: false when nothing is sent from the server
that._options = $telerik._getPropertiesParameter(that, that.constructor);
that._cleanUpConfigProperties();
that._options["theme"] = that.get_skin();
//that._options["visible"] = $(that.get_element()).is(':visible');
that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false };
that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false };
if (that._chartArea) {
that._options["chartArea"] = that._parseObject(that._chartArea);
}
if (that._isSparklineChart()) {
that._setMinimumSparklineWidth();
}
if (that._plotArea) {
that._configurePlotArea();
}
if (that._series) {
/*jshint evil: true */
that._options["series"] = eval(that._series);
/*jshint evil: false */
}
if (that._isStockChart()) {
that._configureStockChart();
}
}
</script>
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;
}
Currently the datasource columns which have space in their name cannot be passed to a databound RadHtmlChart. Add the ability to handle the spaces in the names of these columns.