Mohammad Saffarini Mohammad Saffarini - 1 month ago 14
ASP.NET (C#) Question

ASP.net AjaxToolKit LineChart Drawing Series

I have the following SqlServer Data Table :


Years | Sales(A) | Sales(B)

------------------------------

2000 | 38000 | 55000

2001 | 18000 | 47000

2002 | 70000 | 16000

2003 | 21000 | 55000

2004 | 77000 | 50000

2005 | 16000 | 64000

2006 | 82000 | 61000

2007 | 37000 | 16000


and I need to compare these to columns by using AjaxToolKit LineChart
in ASP Page I have the following :

**


ASPX


**

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div style="width: 100%; height: 50px">
<h1>Ajax Database Multiline Chart Tutorial </h1>
</div>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Generate Chart" />
<br />
<br />
<div style="width: 100%; height: 500px">
<ajaxToolkit:LineChart ID="LineChart1" runat="server" ChartType="Stacked" ChartWidth="720" Width="800px" ChartTitle="Arabian Food Supplies Annual Sales">
</ajaxToolkit:LineChart>
</div>
</asp:Content>


**


VB Code


**

Imports System.Data.SqlClient

Public Class AjaxLineChartDatabase
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


End Sub


Protected Sub Compare(sender As Object, e As EventArgs) Handles Button1.Click

Dim dt As DataTable = GetData("SELECT Years,A FROM LineChart")

Dim x As String() = New String(dt.Rows.Count - 1) {}
Dim y As Decimal() = New Decimal(dt.Rows.Count - 1) {}

For i As Integer = 0 To dt.Rows.Count - 1
x(i) = dt.Rows(i)(0).ToString()
y(i) = Convert.ToInt32(dt.Rows(i)(1))
Next

LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
.Name = "Series 1",
.Data = y
})



dt = GetData("SELECT Years,B FROM LineChart")
y = New Decimal(dt.Rows.Count - 1) {}
For i As Integer = 0 To dt.Rows.Count - 1
x(i) = dt.Rows(i)(0).ToString()
y(i) = Convert.ToInt32(dt.Rows(i)(1))
Next
LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
.Name = "Series 2",
.Data = y
})

LineChart1.CategoriesAxis = String.Join(",", x)
LineChart1.ChartTitle = String.Format("{0} and {1} Distribution", "S-1", "S-2")
LineChart1.Visible = True
End Sub



Private Shared Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("ChartsConnectionString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
Return dt
End Using
End Function
End Class


The problem when I draw the chart, the first series(A) appears OK but the 2nd Series(B) values appear as A+B

Sample :
enter image description here
Why I get it like this ?

Answer

I have solved the issue : it's coming from ChartType Property.

Problem:

   <div style="width: 100%; height: 500px">
    <ajaxToolkit:LineChart ID="LineChart1" runat="server" ChartType="Stacked" ChartWidth="720" Width="800px" ChartTitle="Sales">
    </ajaxToolkit:LineChart>

Solution :

<div style="width: 100%; height: 500px">
    <ajaxToolkit:LineChart ID="LineChart1" runat="server" ChartType="Basic" ChartWidth="720" Width="800px" ChartTitle="Sales">
    </ajaxToolkit:LineChart>