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>
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
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?
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.
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.
For the time being you can resize the chart with set_width/set_height methods. For example: <head runat="server"> <title></title> <style> .RadHtmlChart.k-chart, table { width: 100%; height: 100%; } td { border: 1px solid green; width: 60%; height: 60%; overflow:hidden; } html, body, form { height: 100%; overflow: hidden; margin: 0; } </style> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function resizedw() { // Haven't resized in 100ms! var donut = $find("<%=DonutChart.ClientID%>"); var radar = $find("<%=RadarAreaChart.ClientID%>"); var docDimensions = $telerik.getBounds(document.body); resizeChart(donut, docDimensions); resizeChart(radar, docDimensions); } function resizeChart(chart, docDimensions) { var chartDimensions = $telerik.getBounds(chart.get_element().parentElement); chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'"); chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%"); } var doit; window.onresize = function () { clearTimeout(doit); doit = setTimeout(resizedw, 1000); }; </script> <table> <tr> <td> <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" Transitions="true"> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <ChartTitle Text="OS Usage Statistics for December 2012"> <Appearance Align="Center" Position="Top"></Appearance> </ChartTitle> <PlotArea> <Series> <telerik:DonutSeries> <LabelsAppearance Visible="false"> </LabelsAppearance> <TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance> <SeriesItems> <telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7" Y="55.6"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem> </SeriesItems> </telerik:DonutSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </td> <td> <telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true"> <PlotArea> <Series> <telerik:RadarAreaSeries Name="Position" MissingValues="Gap"> <Appearance> <FillStyle BackgroundColor="#00adcc"></FillStyle> </Appearance> <LineAppearance Width="1" /> <MarkersAppearance Visible="false" /> <LabelsAppearance Visible="false"></LabelsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarAreaSeries> <telerik:RadarAreaSeries Name="Person" MissingValues="Gap"> <Appearance> <FillStyle BackgroundColor="red"></FillStyle> </Appearance> <LabelsAppearance Visible="false"> </LabelsAppearance> <LineAppearance Width="1" /> <MarkersAppearance Visible="false"></MarkersAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarAreaSeries> </Series> <XAxis Color="Black" Reversed="false" StartAngle="180"> <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> <Items> <telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem> <telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem> <telerik:AxisItem LabelText="Work experience"></telerik:AxisItem> <telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem> <telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Database skills"></telerik:AxisItem> </Items> </XAxis> <YAxis Visible="false"> <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> <LabelsAppearance Step="1"></LabelsAppearance> </YAxis> <CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance> </PlotArea> <ChartTitle Text="Position Profile"> <Appearance Align="Center" BackgroundColor="White" Position="Top"> </Appearance> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Bottom"> </Appearance> </Legend> </telerik:RadHtmlChart> </td> </tr> </table> </form>
For the time being you can use the following workaround: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var position = 'insideEnd'; // 'center' $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position; $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20; $find("<%=PieChart1.ClientID%>")._chartObject.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <LabelsAppearance DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> <Items> <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" /> <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" /> <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" /> <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" /> <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" /> </Items> </telerik:PieSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart> <script> var INSIDE_END = "insideEnd", CENTER = "center", LEFT = "left", RIGHT = "right", dataviz = kendo.dataviz, Box2D = dataviz.Box2D, math = Math; kendo.dataviz.PieSegment.fn.reflowLabel = function () { var segment = this, sector = segment.sector.clone(), options = segment.options, label = segment.label, labelsOptions = options.labels, labelsDistance = labelsOptions.distance, angle = sector.middle(), lp, x1, labelWidth, labelHeight; if (label) { labelHeight = label.box.height(); labelWidth = label.box.width(); if (labelsOptions.position == CENTER) { sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance; lp = sector.point(angle); label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y)); } else if (labelsOptions.position == INSIDE_END) { sector.r = sector.r - labelHeight / 2 + labelsDistance; lp = sector.point(angle); label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y)); } else { lp = sector.clone().expand(labelsDistance).point(angle); if (lp.x >= sector.c.x) { x1 = lp.x + labelWidth; label.orientation = RIGHT; } else { x1 = lp.x - labelWidth; label.orientation = LEFT; } label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y)); } } } </script>
For the time being you can use the following workaround: 1) Either hide the chart with visibility:hidden instead of display:none 2) Or use the following workaround: <div id="div1" style="display: none;"> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </div> <input type="button" onclick="showChart(); return false;" value="Show Chart" /> <script> Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () { var that = this; //when visible is false - nothing is sent from the server to save transferred data //e.g - there are properties set but visible is false - we do not need to send those properties amyway //that is why - set visible: false when nothing is sent from the server that._options = $telerik._getPropertiesParameter(that, that.constructor); that._cleanUpConfigProperties(); that._options["theme"] = that.get_skin(); //that._options["visible"] = $(that.get_element()).is(':visible'); that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false }; that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false }; if (that._chartArea) { that._options["chartArea"] = that._parseObject(that._chartArea); } if (that._isSparklineChart()) { that._setMinimumSparklineWidth(); } if (that._plotArea) { that._configurePlotArea(); } if (that._series) { /*jshint evil: true */ that._options["series"] = eval(that._series); /*jshint evil: false */ } if (that._isStockChart()) { that._configureStockChart(); } } </script>
For the time being the reversed properties can be set through the kendo widget: <script> function pageLoad(sender, args) { var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget(); var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget(); radarChart.options.valueAxis.reverse = true; polarChart.options.yAxis.reverse = true; radarChart.options.categoryAxis.reverse = true; polarChart.options.xAxis.reverse = true; radarChart.redraw(); polarChart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> <Items> <telerik:AxisItem LabelText="January"></telerik:AxisItem> <telerik:AxisItem LabelText="February"></telerik:AxisItem> <telerik:AxisItem LabelText="March"></telerik:AxisItem> <telerik:AxisItem LabelText="April"></telerik:AxisItem> <telerik:AxisItem LabelText="May"></telerik:AxisItem> </Items> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:PolarAreaSeries Name=">12.3 knots"> <SeriesItems> <telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem> </SeriesItems> </telerik:PolarAreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Hi, What I see in the HTML chart control is almost what I need. The closest that I can get to a "generic chart" (with everything specified in the data) is binding to the XMLDataSource, but even with that, it appears that the Series Name needs to be hard-coded (not included in the XML data) or we need to write code to replace a hard-coded value with an "out of band" supplied value for each of the series names. I've been looking through all of the demos and it appears that in every one of them, labels or titles that appear on the graph show up in the code somewhere. Then when I look at the documentation, there is no place where those labels or titles can be extracted from the data source. This would indicate to me that every graph needs to be hard-coded. Am I missing something? I hope so. We have potentially thousands of graphing possibilities that we need to implement and would like the user to be able to design their own and this control looks pretty good, except for the "hard-coding" thing. If we could retrieve the series names from the XML input, the task would take days; if we need to individually code each chart, it will take months to staff-years. Here is a sample of what the XML input could look like: <chart caption='Error Summary by Day'> <categories> <category label='Nov+11' /> <category label='Nov+12' /> <category label='Nov+13' /> <category label='Nov+14' /> <category label='Nov+15' /> <category label='Nov+16' /> <category label='Nov+17' /> <category label='Nov+18' /> <category label='Nov+19' /> <category label='Nov+20' /> <category label='Nov+21' /> <category label='Nov+22' /> <category label='Nov+23' /> <category label='Nov+24' /> <category label='Nov+25' /> <category label='Nov+26' /> <category label='Nov+27' /> <category label='Nov+28' /> <category label='Nov+29' /> <category label='Nov+30' /> </categories> <dataset seriesname='Notes'> <set value='0' /> <set value='0' /> <set value='0' /> <set value='3' /> <set value='3' /> <set value='4' /> <set value='5' /> <set value='5' /> <set value='3' /> <set value='3' /> <set value='2' /> <set value='2' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> </dataset> <dataset seriesname='Warnings'> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='2' /> <set value='2' /> <set value='3' /> <set value='3' /> <set value='4' /> <set value='4' /> <set value='5' /> <set value='6' /> <set value='4' /> <set value='3' /> <set value='2' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='0' /> </dataset> <dataset seriesname='Errors'> <set value='74' /> <set value='74' /> <set value='74' /> <set value='74' /> <set value='76' /> <set value='76' /> <set value='76' /> <set value='71' /> <set value='71' /> <set value='64' /> <set value='64' /> <set value='64' /> <set value='54' /> <set value='44' /> <set value='44' /> <set value='31' /> <set value='31' /> <set value='21' /> <set value='22' /> <set value='12' /> </dataset> </chart> You would use an XML attribute to specify series and chart names. Thanks, Rob
For the time being the following events can be handled through the chartObject. Select event is fired when the range of the selector from the navigator pane is changed. JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.bind("selectEnd", OnSelectEnd); } function OnSelectEnd(e) { alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400" Transitions="true"> <PlotArea> <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date"> </XAxis> <Series> <telerik:ColumnSeries DataFieldY="SellQuantity"> </telerik:ColumnSeries> </Series> </PlotArea> <Navigator Visible="true"> <XAxis Name="navAxis"></XAxis> <SelectionHint Visible="true" /> <Series> <telerik:AreaSeries DataFieldY="SellQuantity"> </telerik:AreaSeries> </Series> </Navigator> </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(2011, 06, 12)); dt.Rows.Add(1, 5, new DateTime(2011, 12, 12)); dt.Rows.Add(2, 6, new DateTime(2012, 06, 17)); dt.Rows.Add(3, 4, new DateTime(2012, 09, 18)); dt.Rows.Add(4, 7, new DateTime(2013, 03, 18)); return dt; }
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
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 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...