Declined with the following reason - chart series are preserved in the ViewState by default. You can do one of the following: 1) Either disable the ViewState of the chart or its container: ASPX: <asp:Panel ID="Panel1" runat="server" EnableViewState="false" /> C#: RadHtmlChart chart1 = new RadHtmlChart(); chart1.EnableViewState = false; 2) Or clear the chart Series collection after adding the chart to the page: RadHtmlChart chart1 = new RadHtmlChart(); chart1.ID = "myChart"; //Add the chart to the page Panel1.Controls.Add(chart1); //Clear the series after adding the chart to the page chart1.PlotArea.Series.Clear();
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
For the time being the CommonTooltipsAppearance.Shared property must be set to false. For example: <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Layout="Sparkline" Width="100" Height="150"> <PlotArea> <CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance> <Series> <telerik:LineSeries> <TooltipsAppearance> <ClientTemplate> Value: #=value# <br /> Category #=category# </ClientTemplate> </TooltipsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
increase line width when mouse hovers
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.