provide htmlchart in 2D/3D
The workaround is to set <MarkersAppearance Visible="false" />.
Code that reproduces the issue: <telerik:RadHtmlChart runat="server" ID="RadHtmlChartColumnGender" Transitions="true" Width="150" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="Male" Stacked="true" StackType="Stack100"> <SeriesItems> <telerik:CategorySeriesItem Y="69" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Female" Stacked="true" StackType="Stack100"> <SeriesItems> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> <YAxis NarrowRange="false"></YAxis> </PlotArea> </telerik:RadHtmlChart> Workaround: <script> function pageLoad() { var kendoChart = $find("RadHtmlChartColumnGender").get_kendoWidget(); var valueAxis = kendoChart.options.valueAxis; valueAxis.narrowRange = false; $find("RadHtmlChartColumnGender").setOptions({valueAxis: valueAxis}); } </script>
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html
<script> function chartLoad() { $find("RadHtmlChart2").get_kendoWidget().setOptions({ legend: { position: "top", width: 162, height: 88, orientation: "vertical" } }) } </script> <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="350" Height="350"> <ClientEvents OnLoad="chartLoad" /> ... </telerik:RadHtmlChart>
For the time being you can utilize the Kendo UI charting scripts (http://demos.telerik.com/kendo-ui/bullet-charts/index) and API that RadHtmlChart use, in order to render a bullet chart: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function createChart() { $telerik.$("#chart").kendoChart({ legend: { visible: false }, series: [{ type: "bullet", data: [[750, 762.5]] }], chartArea: { margin: { left: 0 } }, categoryAxis: { majorGridLines: { visible: false }, majorTicks: { visible: false } }, valueAxis: [{ plotBands: [{ from: 715, to: 752, color: "#ccc", opacity: .6 }, { from: 752, to: 772, color: "#ccc", opacity: .3 }], majorGridLines: { visible: false }, min: 715, max: 795, minorTicks: { visible: true } }], tooltip: { visible: true, template: "Maximum: #= value.target # <br /> Average: #= value.current #" } }); } function pageLoad() { createChart(); } </script> <div id="chart"></div> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" style="display:none;"></telerik:RadHtmlChart> </form>
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>
For the time being you can manually fetch the data and pass it to the chart: <script> function pageLoad() { var dataSource = $find('<%= RadClientDataSource1.ClientID %>'); dataSource.fetch(function (args) { var data = args.get_data(), chart = $find('<%=RadHtmlChart1.ClientID%>'); //workaround chart.set_dataSource(data); chart.repaint(); }); } </script> <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server"> <DataSource> <WebServiceDataSourceSettings> <Select Url="spain-electricity.json" DataType="JSON" /> </WebServiceDataSourceSettings> </DataSource> <Schema> <Model> <telerik:ClientDataSourceModelField FieldName="year" DataType="String" /> <telerik:ClientDataSourceModelField FieldName="solar" DataType="Number" /> </Model> </Schema> </telerik:RadClientDataSource> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" ClientDataSourceID="RadClientDataSource1"> <PlotArea> <Series> <telerik:LineSeries DataFieldY="year" Name="year"> </telerik:LineSeries> </Series> <XAxis DataLabelsField="year"></XAxis> </PlotArea> </telerik:RadHtmlChart>
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.
If our X-axis is filled by numeric values, we don't want to navigate by date or by category or by logaritmic. We may want those values, the same shown in X-axis, determinating our chart. For instance: latitude (X-axis) and longitude (Y-axis). We want to navigate by latitude and select view from lat. = 44 to lat. = 45. Date or datetime would be meaningless. Will it be possible?
export of the chart to image (or pdf) will show an html code of non-breaking space in chart title and chart legend, but not in a label added to HtmlChartHolder
allow for the chart plot area to be fixed width not counting the axis text. the issue I have is the legend on right side of chart changes the widths of chart when the text is long.
I have a column series chart. I have set colorfield for each series. Series background change correctly, but label color does not change as per series color. I can not set label color dynamically.
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.
When the data passed to the RadHtmlChart with "stock" layout presents the highest and lowest base units, you must scroll the mouse wheel in order to navigate to the smallest base units. This issue can be handled for example by exposing a scroller in the navigator that let you select smaller date ranges.
Will be useful for pie/donut charts in responsive web page scenarios.
In the Radchart there is a property called activeregion where the user can add a reference to html link. When the user clicks on the chart title, he can navigate to a new web page. This feature is not available in the new HtmlRadChart . We think that is suitable to have this function in the new HtmlRadchart. It can be even extended to axis labels of HtmlRadchart. Thank you for your help Best Regards AE