Test Environment:

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.

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.

RadHtmlChart should allow the usage of indices in the DataFormatString when DateTime values are used:
                <XAxis Type="Date">
                    <LabelsAppearance DataFormatString="{0:d}" />
                </XAxis>

Hello,

The RadHtmlCharts are great! One that is missing however -- a spectrum chart, aka a spectral chart. This takes in a set of data points and renders the values as color-dense shadings. Screenshot attached of one we made ourselves.

This would be useful for scientific applications.


thanks,
matt

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.

It would be great to be able to specify more layout properties via the data bound data. For example, if we could bind a property in the data to a series type we could generate different series on the fly.

This is important to me as I want to make the page as responsive as possible, so all charts load on demand - but as the data is generated in an asynchronous fashion, I'm not able to predetermine how many series I can create.

A couple of suggestions in one...

Please add interactivity between RadPivotGrid and HTMLChart similar to pivot charts in MS Excel - making the filters and selections. update both the chart and the pivot table.  It will also be helpful if you can add splicers similar to PowerPivot.

When you click on the chart, it opens a popup menu, relative to that area - where you can select to filter that axis or value in a series, change the aggregate calculation for that value (sum, count, average, etc.), change date ranges on a date axis - like, date range picker, by year, fiscal, quarter, week, etc. 

Thanks,

Vermaak

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

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.

Please refer to the ticket for more details.

In RadHtmlChart there is no property to specify Width for Bar/Column series. It automatically calculates series width based on chart width, number of series, number of items within series, gap and spacing, etc.,
If there is more than one bar/column chart in single page, there is no way to show Bar/Column series of exact width in all chart to make page consistent.

Adding a control from the JDash suite to the page breaks RadHtmlChart.

Similar to the RadChart's http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/intelligentlabels/defaultcs.aspx For the time being you can implement a custom logic for offsetting y point positions of labels. For example offset every 2nd item label position:
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				offsetItemLabels();
			}
			function offsetItemLabels() {
				//Find all text elements on the page
				var textElements = document.getElementsByTagName("text");
				var numSeriesItemLabels = 0;
				//Iterate through the text elements
				for (var i = 0; i < textElements.length; i++) {
					var currTextEl = textElements[i];
					//Set the desired string/symbol that represents the series labels
					var SeriesLabelSymbol = "@SL";
					if (currTextEl.textContent.indexOf(SeriesLabelSymbol) != -1) {
						numSeriesItemLabels++;
						var currText = currTextEl.textContent.split(SeriesLabelSymbol);
						//Offset y point for every 2nd item label
						currTextEl.textContent = currText[1];
						if ((numSeriesItemLabels) % 2 == 0) {
							currTextEl.attributes.y.textContent = currTextEl.attributes.y.textContent * 1 + 35;
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
            <ChartTitle Text="Chart title">
            </ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                        </SeriesItems>
                        <LabelsAppearance>
                            <ClientTemplate>
@SLCategory is #=category# Value is: #=value#
                            </ClientTemplate>
                        </LabelsAppearance>
                    </telerik:LineSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="item 1" />
                        <telerik:AxisItem LabelText="item 2" />
                        <telerik:AxisItem LabelText="item 3" />
                        <telerik:AxisItem LabelText="item 4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Hi,

MissingValue set to Gap or Zero doesn't work in RadHtmlChart with ScatterLineSeries.

Interpolation is done instead.

              <telerik:RadHtmlChart runat="server">
                    <PlotArea>
                        <Series>
                            <telerik:ScatterLineSeries Name="Test" DataFieldX="XValue"
                                DataFieldY="YValue" MissingValues="Gap">
                                <SeriesItems>
                                    <telerik:ScatterSeriesItem X="1" Y="8" />
                                    <telerik:ScatterSeriesItem X="2" Y="9" />
                                    <telerik:ScatterSeriesItem X="3" Y="4" />
                                    <telerik:ScatterSeriesItem X="4" Y="6" />
                                    <telerik:ScatterSeriesItem X="5" Y="7" />
                                    <telerik:ScatterSeriesItem X="8" Y="1" />
                                    <telerik:ScatterSeriesItem X="9" Y="5" />
                                    <telerik:ScatterSeriesItem X="10" Y="4" />
                                </SeriesItems>
                            </telerik:ScatterLineSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>


The workaround described in the following link doesn't work either :
https://feedback.telerik.com/Project/108/Feedback/Details/44399-fix-the-functionality-of-the-missingvalue-property-when-set-to-gap-in-areaserie

Can you please fix this bug ?

Thanks and regards.

When viewing a line chart with multiple series, the RadHtmlChart automatically changes shapes for each series to make it easy to distinguish, however the shapes are not carried over to the legend.  This means a user printing on a black & white printer will have no way to distinguish the different series (since the shapes are not in the legend).

Currently the RadHtmlChart can be bound to a single data source. Add the ability to bind each series to a single data source.