ASP.net AjaxToolKit LineChart Drawing Series

Question

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 : Why I get it like this ?

Answer 1

My theory, is the array is just getting appended. *Note, we may need separate arrays as it's getting rendered after the code.

Try this,

        dt = GetData("SELECT Years,A, B FROM LineChart")
        y = New Decimal(dt.Rows.Count - 1) {}
        y2 = 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))
            y2(i) = Convert.ToInt32(dt.Rows(i)(2))
        Next
        LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
         .Name = "Series 2",
         .Data = y
        })
        LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
         .Name = "Series 2",
         .Data = y2
        })
        LineChart1.CategoriesAxis = String.Join(",", x)
        LineChart1.ChartTitle = String.Format("{0} and {1} Distribution", "S-1", "S-2")
        LineChart1.Visible = True

Answer 2

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>