RadAlertas.DataSource = IConsultarStatus()
RadAlertas.PlotArea.Series.Clear()
Dim serieAlertas As New BarSeries
serieAlertas.DataFieldY = "Total"
RadAlertas.PlotArea.XAxis.DataLabelsField = "Alerta"
serieAlertas.Appearance.FillStyle.BackgroundColor = Drawing.Color.Blue
RadAlertas.PlotArea.XAxis.Color = Drawing.Color.Red
serieAlertas.TooltipsAppearance.ClientTemplate = "Quantidade: #= dataItem.Total#<br/>Evento: #= dataItem.Alerta#"
serieAlertas.VisibleInLegend = True
RadAlertas.PlotArea.Series.Add(serieAlertas)
RadAlertas.DataBind()Hello I have a bar chart, loaded to a DataSource and when inspecting the HTML the values are present, but the chart is not displayed.
The data is:
Total Alerta
8 Alert1
16 Alert2
1 Alert3
RadAlertas.DataSource = IConsultarStatus()
RadAlertas.PlotArea.Series.Clear()
Dim serieAlertas As New BarSeries
serieAlertas.DataFieldY = "Total"
RadAlertas.PlotArea.XAxis.DataLabelsField = "Alerta"
serieAlertas.Appearance.FillStyle.BackgroundColor = Drawing.Color.Blue
RadAlertas.PlotArea.XAxis.Color = Drawing.Color.Red
serieAlertas.TooltipsAppearance.ClientTemplate = "Quantidade: #= dataItem.Total#<br/>Evento: #= dataItem.Alerta#"
serieAlertas.VisibleInLegend = True
RadAlertas.PlotArea.Series.Add(serieAlertas)
RadAlertas.DataBind()But the graphic image does not load.
Thank you very much in advance.
I pointed to another data source and it worked, what could it be?
It's been three days without being able to solve this problem.
Thank you very much in advance
Hi Fabio,
I would ask you for some additional information in order to assist you with this case.
First, I would suggest you make sure there are no JavaScript errors on the page:
Could you also please capture the current behavior with the Fiddler Jam tool and share the log with us? That way we will be able to inspect the page ourselves and see if we can pinpoint the reason.
More about the Fiddler Jam extension you can find in our Capture network logs & log issues with Fiddler Jam in ASP.NET Web Forms article.
To create a fully functional Fiddler Jam recording it is important to include the initial page load in the capture. To do so, please reload the page right after capturing has been started (sample capturing process).
at b.RadHtmlChart._dataBind (ScriptResource.axd?d=tbtXkupOsJbh23R1_Hx7q7_fmsGLdbxsa10deh6LAlG9h850UPqBNiVKOiDiXkIw9aYL0Tsucf1i9CCqIkiR7zBF01dyg4FOobOZFBnHrwo5qMl4gC01x6LGzAH3tXhfSQ9nxk7vtpQqRwU_PPxo5A2&t=27c35b96:155:42)
at b.RadHtmlChart._loadData (ScriptResource.axd?d=tbtXkupOsJbh23R1_Hx7q7_fmsGLdbxsa10deh6LAlG9h850UPqBNiVKOiDiXkIw9aYL0Tsucf1i9CCqIkiR7zBF01dyg4FOobOZFBnHrwo5qMl4gC01x6LGzAH3tXhfSQ9nxk7vtpQqRwU_PPxo5A2&t=27c35b96:142:22)
at b.RadHtmlChart.createChart (ScriptResource.axd?d=tbtXkupOsJbh23R1_Hx7q7_fmsGLdbxsa10deh6LAlG9h850UPqBNiVKOiDiXkIw9aYL0Tsucf1i9CCqIkiR7zBF01dyg4FOobOZFBnHrwo5qMl4gC01x6LGzAH3tXhfSQ9nxk7vtpQqRwU_PPxo5A2&t=27c35b96:60:79)
at b.RadHtmlChart._initialize (ScriptResource.axd?d=tbtXkupOsJbh23R1_Hx7q7_fmsGLdbxsa10deh6LAlG9h850UPqBNiVKOiDiXkIw9aYL0Tsucf1i9CCqIkiR7zBF01dyg4FOobOZFBnHrwo5qMl4gC01x6LGzAH3tXhfSQ9nxk7vtpQqRwU_PPxo5A2&t=27c35b96:39:3)
at b.RadHtmlChart.initialize (ScriptResource.axd?d=tbtXkupOsJbh23R1_Hx7q7_fmsGLdbxsa10deh6LAlG9h850UPqBNiVKOiDiXkIw9aYL0Tsucf1i9CCqIkiR7zBF01dyg4FOobOZFBnHrwo5qMl4gC01x6LGzAH3tXhfSQ9nxk7vtpQqRwU_PPxo5A2&t=27c35b96:33:7)
at b.RadHtmlChart.Sys$Component$endUpdate [as endUpdate] (ScriptResource.axd?d=kkFqlaG0S_xYze9mZmyJDqH4eZkn0Hka5cECkA3mC4uBFRtjz7QSVcBqdH69e5e6TUwAFQElFQpfwsHN-CiC_xSL3lI_n402_FC_NbSQo_5asLfDuonenehmPP4Yg_M40JePC7aPTLJ6Ki3Kx0CeP9gzoihMPzdJmMMS4Er6uy41&t=49337fe8:3685:38)
at Sys$Component$create (ScriptResource.axd?d=kkFqlaG0S_xYze9mZmyJDqH4eZkn0Hka5cECkA3mC4uBFRtjz7QSVcBqdH69e5e6TUwAFQElFQpfwsHN-CiC_xSL3lI_n402_FC_NbSQo_5asLfDuonenehmPP4Yg_M40JePC7aPTLJ6Ki3Kx0CeP9gzoihMPzdJmMMS4Er6uy41&t=49337fe8:3834:23)
at Array.<anonymous> (dashboard.aspx:448:5)
at ScriptResource.axd?d=kkFqlaG0S_xYze9mZmyJDqH4eZkn0Hka5cECkA3mC4uBFRtjz7QSVcBqdH69e5e6TUwAFQElFQpfwsHN-CiC_xSL3lI_n402_FC_NbSQo_5asLfDuonenehmPP4Yg_M40JePC7aPTLJ6Ki3Kx0CeP9gzoihMPzdJmMMS4Er6uy41&t=49337fe8:3484:23
at Sys$_Application.Sys$_Application$_raiseInit [as _raiseInit] (ScriptResource.axd?d=kkFqlaG0S_xYze9mZmyJDqH4eZkn0Hka5cECkA3mC4uBFRtjz7QSVcBqdH69e5e6TUwAFQElFQpfwsHN-CiC_xSL3lI_n402_FC_NbSQo_5asLfDuonenehmPP4Yg_M40JePC7aPTLJ6Ki3Kx0CeP9gzoihMPzdJmMMS4Er6uy41&t=49337fe8:5084:13)
I never used this log sharing method, did it work?
Thank you for sharing the error message with its stack trace!
Most probably the issue is because of an incorrectly formatted data source. This would also explain why the same setup works fine with another data source.
I guess there are some special characters that are not properly escaped, hence the error:
For example, can you please test the project with 1 record, and then adding one by one, until you find the faulty record and check its values?
Another thing you can check and share is the $create statement for the Chart as demonstrated in this screencast: http://somup.com/cqQ1lVe4Yo
Unfortunately, the Fiddler Jam capture does not contain any requests and I am not able to extract any useful input from it. You may try to capture it again by strictly following the instructions and the sample capturing process I shared
Thanks for the answer, the error is when the column value contains accents, but I couldn't understand how to solve it, since I only inform the line below:
RadAlerts.PlotArea.XAxis.DataLabelsField = "Alert"
Can someone help me?
The HtmlChart requires some manual manipulations when special characters are used in the data fields it is bound to. Check out the following documentation section on the matter.
If there is an issue with the field values, you can try to encode them (use HtmlEncode() method) before passing them as data to the RadHtmlChart.
Could you please share some specific data field values suspected of causing the issue - the ones with the accents? This could help me replicate the issue on my end so I can try to further research it.
Hi Fabio,
To be able to help you further with this I would need to have a local reproduction of the problem.
I am attaching a basic sample page where RadHtmlChart's XAxis labels are bound to a field of the data source. Could you please use the sample as a basis and replace some of the hardcoded entries ("Label1", "Label2", "Label3") with such that lead to the currently discussed problem? Sharing the steps to replicate the same on my end will allow me to investigate it further.
It would also be beneficial if you can manage to isolate the issue in a runnable sample and share it with us so we can debug it locally:
A possible way to avoid this limitation is to implement a similar encoding of the strings passed to the Chart fields:
tbl.Rows.Add(New Object() {HttpUtility.HtmlEncode("pendência"), 1, 5})
or you can even test with UrlEncode to see if the chart will render and the js error goes away
tbl.Rows.Add(New Object[] { HttpUtility.UrlEncode("pendência"), 1, 5})
Imports System.Data Partial Class Default2 Inherits System.Web.UI.Page Protected Function GetChartData() As DataTable Dim tbl As New DataTable() tbl.Columns.Add(New DataColumn("Alert", GetType(String))) tbl.Columns.Add(New DataColumn("First_Series_Values", GetType(Decimal))) tbl.Columns.Add(New DataColumn("Second_Series_Values", GetType(Decimal))) tbl.Rows.Add(New Object() {HttpUtility.HtmlEncode("pendência"), 1, 5}) tbl.Rows.Add(New Object() {"Label 2", 10, 15}) tbl.Rows.Add(New Object() {"Label 3", 20, 25}) Return tbl End Function Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load If Not Page.IsPostBack Then RadHtmlChart1.DataSource = GetChartData() RadHtmlChart1.DataBind() End If End Sub End Class<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="300px" Height="300px"> <PlotArea> <Series> <telerik:LineSeries DataFieldY="First_Series_Values" Name="first series"></telerik:LineSeries> <telerik:LineSeries DataFieldY="Second_Series_Values" Name="second series"></telerik:LineSeries> </Series> <XAxis DataLabelsField="Alert"></XAxis> </PlotArea> </telerik:RadHtmlChart>