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.