But the graphic image does not load

0 Answers 48 Views
Chart (HTML5)
Fabio
Top achievements
Rank 1
Iron
Iron
Fabio asked on 22 Mar 2023, 05:20 PM

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.
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 23 Mar 2023, 12:25 PM

Any suggestions of what is causing this problem?
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 24 Mar 2023, 01:41 PM

Good morning,

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
Doncho
Telerik team
commented on 27 Mar 2023, 12:52 PM

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.

  1. Go to Fiddler Jam - Recording Link and follow the 2-step instructions to install the extension
    1. Record the Problem
    2. Use the newly installed extension to Start recording a Fiddler Jam
    3. Demonstrate the problem with the web app
  2. Stop recording, 
  3. Fiddler Jam will then generate a URL for that debugging session, please copy that URL and paste it into your reply.

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

Fabio
Top achievements
Rank 1
Iron
Iron
commented on 27 Mar 2023, 01:26 PM

Uncaught SyntaxError: Invalid or unexpected token
    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)
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 27 Mar 2023, 04:08 PM

https://jam.getfiddler.com/sessions/6fcc49d2-fe02-44d5-883c-e672728fe31e?t=e7360cea18683e721f6455a7e577e0abcbcd4990b8109b642250c186f00fe52bd249cc6f02fed544883ce672728fe31e
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 27 Mar 2023, 06:25 PM

Good afternoon,

I never used this log sharing method, did it work?
Doncho
Telerik team
commented on 30 Mar 2023, 10:43 AM

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

Fabio
Top achievements
Rank 1
Iron
Iron
commented on 31 Mar 2023, 03:04 PM

Hello,

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?
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 05 Apr 2023, 12:02 AM

Still no solution, could someone help me? The problem is with the accent.
Doncho
Telerik team
commented on 05 Apr 2023, 11:08 AM

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.

 

Fabio
Top achievements
Rank 1
Iron
Iron
commented on 05 Apr 2023, 04:11 PM

Thanks for the answer, but my case the column values that have the special character and not the column name.
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 05 Apr 2023, 05:17 PM

Your suggestion is HttpUtility.HtmlEncode? Did not work.
Fabio
Top achievements
Rank 1
Iron
Iron
commented on 05 Apr 2023, 05:19 PM

RadAlerts.PlotArea.XAxis.DataLabelsField = HttpUtility.HtmlEncode("Alert")
Doncho
Telerik team
commented on 07 Apr 2023, 12:24 PM

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:

Fabio
Top achievements
Rank 1
Iron
Iron
commented on 07 Apr 2023, 02:03 PM

Hello, My problem is already identified, in my alert column, it has values with accents, for example, the word pendência, I think that with this it is possible to reproduce the problem
Rumen
Telerik team
commented on 11 Apr 2023, 10:53 AM

Thank you for the clarification. The experienced behavior is expected as the special characters passed through a string from the server has to be encoded before being sent to the client (where the RadHtmlChart widget is actually created). Please note that this is rather a limitation of the framework, but not something RdHtmlChart can control.

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>
If your scenario is different, just modify the sample code above to demonstrate and broke the chart and send it for examination here.

No answers yet. Maybe you can help?

Tags
Chart (HTML5)
Asked by
Fabio
Top achievements
Rank 1
Iron
Iron
Share this question
or