For the time being the property can be set through the kendoWidget: $find('chartID').get_kendoWidget().options.panes[1].height = 60; $find('chartID').get_kendoWidget().redraw();
Was hoping for the functionality where the difference area between lines could be colored accordingly. example: htmlchart with 3 lines 1:+standard 2:-standard and 3:Actual value. If the Actual value line is below the -standard, the difference area should be colored red. In case it crosses the +standard it should be green. Likely the Actual value line would be an Area-serie but that aside.
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.
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); } }
For the time being you can choose either approach: 1) Set the min and max dates on the kendo widget: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.xAxis.min = new Date(2013, 04, 01); chart._chartObject.options.xAxis.max = new Date(2013, 05, 01); chart.repaint(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px"> <PlotArea> <Series> <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate"> <LabelsAppearance DataFormatString="{1} cars sold on {0:m}"> </LabelsAppearance> <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" /> </telerik:ScatterLineSeries> </Series> <XAxis BaseUnit="Days"> <TitleAppearance Text="Sell Date"> </TitleAppearance> <LabelsAppearance DataFormatString="d" RotationAngle="45"> </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) { 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(2013, 05, 12)); dt.Rows.Add(2, 5, new DateTime(2013, 05, 13)); dt.Rows.Add(3, 6, new DateTime(2013, 05, 17)); dt.Rows.Add(4, 4, new DateTime(2013, 05, 18)); dt.Rows.Add(5, 7, new DateTime(2013, 05, 22)); return dt; } 2) Set the JavaScript equivalent of min and max dates in the code behind like follows: C#: protected void Page_Load(object sender, EventArgs e) { //Set min and max date for a datetime x-axis type RadHtmlChart1.PlotArea.XAxis.MinValue = ConvertToJavaScriptDateTime(new DateTime(2014, 02, 19)); RadHtmlChart1.PlotArea.XAxis.MaxValue = ConvertToJavaScriptDateTime(new DateTime(2014, 04, 05)); //Instantiate ScatterSeriesItem objects ScatterSeriesItem ssi1 = new ScatterSeriesItem(); ScatterSeriesItem ssi2 = new ScatterSeriesItem(); ScatterSeriesItem ssi3 = new ScatterSeriesItem(); ScatterSeriesItem ssi4 = new ScatterSeriesItem(); //Instantiate DateTime objects DateTime date1 = (new DateTime(2014, 03, 03, 0, 0, 0)); DateTime date2 = (new DateTime(2014, 03, 10, 0, 0, 0)); DateTime date3 = (new DateTime(2014, 03, 17, 0, 0, 0)); DateTime date4 = (new DateTime(2014, 03, 24, 0, 0, 0)); //Set the converted x values to the ScatterSeriesItem objects ssi1.X = ConvertToJavaScriptDateTime(date1); ssi2.X = ConvertToJavaScriptDateTime(date2); ssi3.X = ConvertToJavaScriptDateTime(date3); ssi4.X = ConvertToJavaScriptDateTime(date4); //Set the y values to the ScatterSeriesItem objects ssi1.Y = 3; ssi2.Y = 6; ssi3.Y = 5; ssi4.Y = 9; //Add the ScatterSeriesItem objects to the ScatterLineSeries (RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi1); (RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi2); (RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi3); (RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi4); } //A method that converts the .NET DateTime object to its JavaScript Date object representation protected decimal ConvertToJavaScriptDateTime(DateTime fromDate) { return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds; } ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px"> <PlotArea> <Series> <telerik:ScatterLineSeries Name="Stock A"> <LabelsAppearance> <ClientTemplate> #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #, #=kendo.format(\'{0:C0}\',value.y)# </ClientTemplate> </LabelsAppearance> <TooltipsAppearance Color="White"> <ClientTemplate> #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #, #=kendo.format(\'{0:C0}\',value.y)# </ClientTemplate> </TooltipsAppearance> </telerik:ScatterLineSeries> </Series> <YAxis> <LabelsAppearance DataFormatString="C0"></LabelsAppearance> <TitleAppearance Text="Price"></TitleAppearance> </YAxis> <XAxis Type="Date" BaseUnit="Days"> <TitleAppearance Text="Closing Date"> </TitleAppearance> <LabelsAppearance DataFormatString="d"> </LabelsAppearance> </XAxis> </PlotArea> <ChartTitle Text="Closing Stock Prices"> </ChartTitle> </telerik:RadHtmlChart>
The property will control the distance between the corresponding series items.
For the time being you can workaround this behavior as follows: 1)Place all of the items within a common series. 2)Use different colors for items in order to distinguish them from their original series. 3)Create a custom legend if needed one.
When you do a stacked HTMLChart (e.g. columns), the legend appears in the opposite order to the data series being stacked, which looks very unprofessional.
Under the standard definition of data format strings, range scaling can be applied (i.e. divide by 1000) using , prefixing the implied or explicit decimal place. e.g. DataFormatString="{0:#,#,}" will display 3000000 as 3,000 This works on RadPivotGrid correctly, but RadHTMLChart does not work either on data labels, axis labels, or pretty much anywhere else. Apparently a problem with kendo.format(), which does not do this as per documentation for DataFormatString N.B. This is commonly used in finance presentations to globally present in $thousands.
For the time being you can use the following workaround: <script> function OnLoad(sender, args) { var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget(); kendoWidget.options.legend.reverse = true; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <ClientEvents OnLoad="OnLoad" /> <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="2" /> <telerik:CategorySeriesItem Y="5" /> <telerik:CategorySeriesItem Y="7" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 3"> <SeriesItems> <telerik:CategorySeriesItem Y="9" /> <telerik:CategorySeriesItem Y="11" /> <telerik:CategorySeriesItem Y="13" /> </SeriesItems> </telerik:ColumnSeries> </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>
For the time being the property can be set through the kendoWidget: ASPX: <script> function pageLoad() { $ = $telerik.$; var kendoWidget = $find("<%=PieChart1.ClientID%>")._chartObject; kendoWidget.options.series[0].labels.visible = function (point) { if (point.value < 5) { return false; } else { return true; }; } kendoWidget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px"> <PlotArea> <Series> <telerik:DonutSeries 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:DonutSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart>
Issue is reproducible with the following code: <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="8" /> </SeriesItems> <LabelsAppearance Position="Center"></LabelsAppearance> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> For the time being you can change the labels position from "Center" to "OutsideEnd".
For the time being the function can be set through the kendoWidget: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].markers.type = function (point) { if (point.value > 2) { return "triangle"; } else { return "circle"; } }; chart.repaint(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:LineSeries> </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>
For the time being properties can be set to the kendoWidget on the client: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.xAxis.min = new Date(2013, 04, 01); chart._chartObject.options.xAxis.max = new Date(2013, 05, 01); chart.repaint(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px"> <PlotArea> <Series> <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate"> <LabelsAppearance DataFormatString="{1} cars sold on {0:m}"> </LabelsAppearance> <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" /> </telerik:ScatterLineSeries> </Series> <XAxis BaseUnit="Days"> <TitleAppearance Text="Sell Date"> </TitleAppearance> <LabelsAppearance DataFormatString="d" RotationAngle="45"> </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) { 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(2013, 05, 12)); dt.Rows.Add(2, 5, new DateTime(2013, 05, 13)); dt.Rows.Add(3, 6, new DateTime(2013, 05, 17)); dt.Rows.Add(4, 4, new DateTime(2013, 05, 18)); dt.Rows.Add(5, 7, new DateTime(2013, 05, 22)); return dt; }
The CSS styles of the selection hint of the navigator in HtmlChart are not applied correctly in a data navigation scenario. The workaround is to override the styles that you need like this: .k-navigator-hint .k-tooltip { border: 2px solid red !important; color: #000 !important; }
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 types through the kendoWidget: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.options.series[0].type = "verticalLine"; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:LineSeries> </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>
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>