Test Environment:

Please refer to the ticket for more details.

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.

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.

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...

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

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.

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.

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

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.

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?

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.

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 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;
	}

For the time being the property can be set through the kendoWdiget:

        <script>
            function pageLoad() {
                var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
                kendoWidget.options.series[0].labels.distance = 20;
                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>