For a new project I am working on, I am going to make use of the RadHtmlChart that would be bound to a dataset to do a Bar Chart.
First I needed to get familiar with the RadHtmlChart and binding a dataset to it. To do that I started with the demos. First I created an ASP.Net page with VB.net as the code behind. I had copied the ASP.net code from the demo to the ASP.Net page I created and copied the vb code-behind to the code-behind for the ASP.Net page I created. When I try to display that ASP.Net page in my web browser, it showed the chart without the lines that should have been plotted based on the data. See the attached screenshot.
I have even tried the example code in the documentation for using a dataset and still did not work.
Why is this NOT working?
It should be simple and straight-forward but it is not working. I have tried it in IE11 and Google Chrome. I have bind other Telerik controls to datasets before without any problems.
Please DO NOT refer me to the example in the documentation and the demo because they are not working.
Please LOOK at my code below and help find out why it is NOT working.
---------------------------------------------------------------------
TestRadHTMLChart.aspx -
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestRadHtmlChart.aspx.vb" Inherits="TestRadHtmlChart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container size-wide">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="500px">
<PlotArea>
<Series>
<telerik:ScatterLineSeries Name="0.8C" DataFieldX="ChargeTime08C" DataFieldY="ChargeCurrent08C">
<TooltipsAppearance Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
</telerik:ScatterLineSeries>
<telerik:ScatterLineSeries Name="1.6C" DataFieldX="ChargeTime16C" DataFieldY="ChargeCurrent16C">
<TooltipsAppearance Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
</telerik:ScatterLineSeries>
<telerik:ScatterLineSeries Name="3.1C" DataFieldX="ChargeTime31C" DataFieldY="ChargeCurrent31C">
<TooltipsAppearance Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
</telerik:ScatterLineSeries>
</Series>
<XAxis>
<LabelsAppearance DataFormatString="{0}m" />
<TitleAppearance Text="Time" />
</XAxis>
<YAxis MaxValue="100">
<LabelsAppearance DataFormatString="{0}%" />
<TitleAppearance Text="Charge" />
</YAxis>
</PlotArea>
<ChartTitle Text="Charge current vs. charge time">
</ChartTitle>
</telerik:RadHtmlChart>
</div>
</form>
</body>
</html>
TestRadHtmlChart.aspx.vb -
Imports System
Imports System.Data
Partial Class TestRadHtmlChart
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
RadHtmlChart1.DataSource = GetData()
RadHtmlChart1.DataBind()
End Sub
Private Function GetData() As DataSet
Dim ds As New DataSet("ChargeCurrentTimeRatio")
Dim dt As New DataTable("ChargeData")
dt.Columns.Add("Id", Type.[GetType]("System.Int32"))
dt.Columns.Add("ChargeTime08C", Type.[GetType]("System.Decimal"))
dt.Columns.Add("ChargeCurrent08C", Type.[GetType]("System.Decimal"))
dt.Columns.Add("ChargeTime16C", Type.[GetType]("System.Decimal"))
dt.Columns.Add("ChargeCurrent16C", Type.[GetType]("System.Decimal"))
dt.Columns.Add("ChargeTime31C", Type.[GetType]("System.Decimal"))
dt.Columns.Add("ChargeCurrent31C", Type.[GetType]("System.Decimal"))
dt.Rows.Add(1, 10, 10, 10, 40, 10, _
70)
dt.Rows.Add(2, 15, 20, 17, 50, 13, _
90)
dt.Rows.Add(3, 20, 25, 18, 70, 25, _
100)
dt.Rows.Add(4, 32, 40, 35, 90, Nothing, _
Nothing)
dt.Rows.Add(5, 43, 50, 47, 95, Nothing, _
Nothing)
dt.Rows.Add(6, 55, 60, 60, 100, Nothing, _
Nothing)
dt.Rows.Add(7, 60, 70, Nothing, Nothing, Nothing, _
Nothing)
dt.Rows.Add(8, 70, 80, Nothing, Nothing, Nothing, _
Nothing)
dt.Rows.Add(9, 90, 100, Nothing, Nothing, Nothing, _
Nothing)
ds.Tables.Add(dt)
Return ds
End Function
End Class
2 Answers, 1 is accepted
Rank 1
I got it to work.
The Page_Load declaration in the code-behind from the demo and example in documentation was incorrect.
It should have been the following:
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Not the following:
Protected Sub Page_Load(sender As Object, e As EventArgs)
The code in the demo and example in the documentation needs to be corrected.
Hello Keith,
If you set AutoEventWireup to true in the Page directive like in our demo, the handler will be called automatically without the Handles clause. This is a generic issue with the VB language and not with our demos or documentation.
Regards,
Telerik