Update data values using drag and drop directly from the chart, something like this: https://forio.com/app/powersim/powerwall/energy_consumption_details.html A lot of customers would have this functionality without changing the HTMLChart controls.
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>
If you set in code behind CharTitle with simple Quote like RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée"; you obtain a blank space chart (nothing display) you have to set for running RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée";
When you configure RadHtmlChart's YAxis with NarrowRange set to true, the setting is not serialized and as a result, not applied. You can avoid it by setting the narrowRange on the client-side: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="250px" Height="300px"> <ClientEvents OnLoad="chartLoad" /> ... </telerik:RadHtmlChart> <script> function chartLoad(){ var chart = $telerik.$("#RadHtmlChart1").data("kendoChart"); chart.options.valueAxis.narrowRange = true; } </script>
<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>
I get a lot of work creating BI/KPI UIs which are basically converting what you can do in Excel Charts into a Web UI. Which means anything they can do in Excel they expect the web to do. Since there is a drive to automate as much mundane human activity in the business and reduce human error (cut and paste error). I need to reproduce a graph with 'standard' Tend Lines. That is not my interpretation of a trend, but standard best practice. I want this as a checkbox, and attribute to a series for the DataFieldY value. Initially a code solution would be fine (once its got the data from the data source). http://www.telerik.com/blogs/how-to-plot-a-simple-linear-regression-in-telerik-asp.net-web-form-chart
It would be helpful to have a way to set the major tick step value via the RadHtmlChart control. This can be set on the client side, but it seems like a missing feature since I can change the major tick size and label step values via the control axis attributes. Here's an example with my suggested attribute shown in comments on the xAxis below. <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="RequestDays"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:AreaSeries Name="Last Year" DataFieldY="Last"></telerik:AreaSeries> <telerik:AreaSeries Name="Current Year" DataFieldY="Current"></telerik:AreaSeries> </Series> <XAxis Name="Days" DataLabelsField="Days" MajorTickSize="5"> <%--MajorTickStep="7"--%> <LabelsAppearance Step="14" /> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script type="text/javascript"> function OnLoad(chart) { var widget = chart.get_kendoWidget(); widget.options.categoryAxis.majorTicks = { step: 7 }; widget.redraw(); } </script>
I need to bind RadhtmlChart from code behind using sql store procedure. e.g I'm having one table in which first column is containing Month Year data and others column are auto generated as per store data for specific type. I want to bind RadhtmlChart with this datasource. with specific color for series. P.S table screen shot... column number can be increases of decreases as per data...
Workaround use padding instead of margin: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="45"> <TextStyle Padding="135 0 0 0" /> </LabelsAppearance> <Items> <telerik:AxisItem LabelText="item1" /> <telerik:AxisItem LabelText="item2" /> <telerik:AxisItem LabelText="item3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Currently, the RadHtmlChart control allows you to create a spline series to display. But sometimes, we need the curve to follow more of a Bezier path because the points in the series aren't necessarily the local min/max for the neighborhood around them. This would function much like the smooth line that appears in Excel's scatter chart type or the ChartFX control's curve gallery type.
I would like to request a new feature in legend of RadHtmlChart that provide a tool-tip for long names because when I add a long text in legends the size of pie-chart is reduced. Sample code for what I expect to be working : <telerik:RadHtmlChart runat="server" ID="Chart" Height="400px" Width="400px"> <ClientEvents OnLoad="onChartLoad" /> function onChartLoad() { var chart = $find("Chart"); var widget = chart.get_kendoWidget(); widget.options.legend.tooltip = "#: dataItem.columnname #" //Feature Request in this line widget.redraw(); }
Is there any plans to add a Server Side series click event in RadHTMLChart? Currently it is only available via the Client side.
Hello, Like a lot of companies we have multiple client side interfaces of a single application and have to create similar UI in multiple platforms. For example I had to create a chart in both WPF and ASP.NET AJAX today. The problem I have with the Telerik controls is that there are absolutely no standardization or consistency between platforms. Why would a Cartesian Axis in WPF and ASP.NET AJAX and ASP MVC and Windows Universal Apps not all called the same thing? It would be very simple to use interfaces to create some consistency between platforms. Even better would be if Model Views are shared across platforms in a portable library: https://msdn.microsoft.com/en-us/library/hh563947(v=vs.110).aspx https://msdn.microsoft.com/en-us/library/gg597391(v=vs.110).aspx Regards, Douw
Add support for a secondary x-axis at the top of the chart. Please use consistent axis types. Why would the primary axes be of type Telerik.Web.UI.HtmlChart.PlotArea.Chart*Axis and the secondary y-axis be of type Telerik.Web.UI.AxisY?
Right now we do not have a way to show some tooltips over Axis Labels This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip. We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series
The current implementation of RadHtmlChart explicitly specifies font-family and font-size settings on the server-side, which are then serialized and used by the Kendo widget, so the skin-specific settings are ignored. For example, the Material skin should define a "Roboto" font-family, but this is overriden by "Arial" in the final serialization, so the skin configuration does not have any effect. The default values of the server-side font settings can be removed in order to allow such customization and can be defined in the skins file instead.
When migrating from a GeckoBoard.com dashboard, I have a Area Chart where the values over the target are one colour and those below another colour, this is true of Area and Bar charts. At the moment I can use the "'ColorField="ErrorsColor"> " to colour the whole column to a given colour, but not that part above its Target. One approach could be is to have 2 plots one below the target and one above the target, I would prefer to be this in control of the HtmlChart and for me not to frig it. Thanks