PIE/BAR CHART QUESTIONS?(creating them dynamically)

Discussion in 'ASP .Net' started by Guest, Oct 14, 2004.

  1. Guest

    Guest Guest

    I have a code below and its a PIE & BAR CHART.
    The values now are all static but I want to be able to pull the values from
    a database.
    Can you guys give me some ideas to do this?
    Thanks


    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
    System.EventArgs) Handles MyBase.Load
    'Declare your object variables

    Dim i As Integer



    'Build a BitMap that will act as the pallet and container

    'for the bar graph. Here 600 is the width and 300 is the height.

    'These values could also be passed as parameters.

    Dim objBitMap As New Bitmap(400, 200)



    'Declare your Graphics objects for painting graphics on you newly
    created bitmap.

    Dim objGraphics As Graphics

    objGraphics = Graphics.FromImage(objBitMap)

    'Set the background color to silver

    objGraphics.Clear(Color.Silver)



    'Build an array of values for the bar and pie chart.

    'These values could also be pulled from a database.
    ' Retrieve Products Table


    Dim arrValues(5) As Integer

    arrValues(0) = 100

    arrValues(1) = 135

    arrValues(2) = 115

    arrValues(3) = 125

    arrValues(4) = 75

    arrValues(5) = 300


    Dim arrValueNames(5) As String

    arrValueNames(0) = "Jan"

    arrValueNames(1) = "Feb"

    arrValueNames(2) = "Mar"

    arrValueNames(3) = "Apr"

    arrValueNames(4) = "May"

    arrValueNames(5) = "June"




    'Write out a title for your bar and pie chart.
    objGraphics.DrawString("5 Month Projection Report", New
    Font("Tahoma", 16), Brushes.Black, New PointF(5, 5))



    'Create a legend to describe your bar and chart.

    Dim symbolLeg As PointF = New PointF(335, 20)

    Dim descLeg As PointF = New PointF(360, 16)



    For i = 0 To arrValueNames.Length - 1

    objGraphics.FillRectangle(New SolidBrush(GetColor(i)),
    symbolLeg.X, symbolLeg.Y, 20, 10)

    objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y,
    20, 10)



    objGraphics.DrawString(arrValueNames(i).ToString, New
    Font("Tahoma", 10), Brushes.Black, descLeg)

    symbolLeg.Y += 15

    descLeg.Y += 15

    Next i



    'Loop through the values to create the Bar Chart.

    For i = 0 To arrValues.Length - 1

    objGraphics.FillRectangle(New SolidBrush(GetColor(i)), (i * 35)
    + 15, 200 - arrValues(i), 20, arrValues(i) + 5)

    objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 -
    arrValues(i), 20, arrValues(i) + 5)

    Next



    'Loop through the values to create the Pie Chart.

    Dim sglCurrentAngle As Single = 0

    Dim sglTotalAngle As Single = 0

    i = 0



    For i = 0 To arrValues.Length - 1

    'Current Value / (sum of all the Values) * 360 degree angle

    sglCurrentAngle = arrValues(i) / 550 * 360



    objGraphics.FillPie(New SolidBrush(GetColor(i)), 220, 95, 100,
    100, sglTotalAngle, sglCurrentAngle)

    objGraphics.DrawPie(Pens.Black, 220, 95, 100, 100,
    sglTotalAngle, sglCurrentAngle)



    sglTotalAngle += sglCurrentAngle

    Next i



    objBitMap.Save(Response.OutputStream, ImageFormat.Gif)

    End Sub

    'This function returns a color for the bar and pie charts.

    Private Function GetColor(ByVal itemIndex As Integer) As Color

    Dim objColor As Color



    Select Case itemIndex

    Case 0

    objColor = Color.Blue

    Case 1

    objColor = Color.Red

    Case 2

    objColor = Color.Yellow

    Case 3

    objColor = Color.Purple

    Case 4

    objColor = Color.Orange

    Case 5

    objColor = Color.Brown

    Case 6

    objColor = Color.Gray

    Case 7

    objColor = Color.Maroon

    Case Else

    objColor = Color.Green

    End Select



    Return objColor



    End Function
     
    Guest, Oct 14, 2004
    #1
    1. Advertisements

  2. Guest

    Guest Guest

    Hi Patrick,

    You can get the values to fill the arrValues and arrValueNames from the
    database, and put them on a collection (instead of using a fixed array).
    Additionally, you can create a struct (a value type) to hold the pairs
    [Value, Name], like the one as follows:

    public struct GraphValue
    {
    public Name;
    public Value;
    }

    Then, you can iterate through your collection of data (a collection filled
    with data of the type [Value, Name] defined above) with a for each and make
    the appropriate drawings en each case

    As an example, this could be a refactored piece of the code (c#, sorry ;)),
    using the collection of values


    ArrayList GraphValueCollection = new ArrayList();

    ....
    ....

    int colorCode = 0;
    foreach(GraphValue graphValue in GraphValueCollection)
    {
    colorCode++;
    objGraphics.FillRectangle(New SolidBrush(GetColor(colorCode)),
    symbolLeg.X, symbolLeg.Y, 20, 10);

    objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10)

    objGraphics.DrawString(graphValue.Value, New Font("Tahoma", 10),
    Brushes.Black, descLeg);

    symbolLeg.Y += 15;

    descLeg.Y += 15;
    }


    Regards,
    Leon
     
    Guest, Oct 14, 2004
    #2
    1. Advertisements

  3. Guest

    Guest Guest

    Hi Patrick,

    You can get the values to fill the arrValues and arrValueNames from the
    database, and put them on a collection (instead of using a fixed array).
    Additionally, you can create a struct (a value type) to hold the pairs
    [Value, Name], like the one as follows:

    public struct GraphValue
    {
    public Name;
    public Value;
    }

    Then, you can iterate through your collection of data (a collection filled
    with data of the type [Value, Name] defined above) with a for each and make
    the appropriate drawings en each case

    As an example, this could be a refactored piece of the code (c#, sorry ;)),
    using the collection of values


    ArrayList GraphValueCollection = new ArrayList();

    ....
    ....

    int colorCode = 0;
    foreach(GraphValue graphValue in GraphValueCollection)
    {
    colorCode++;
    objGraphics.FillRectangle(New SolidBrush(GetColor(colorCode)),
    symbolLeg.X, symbolLeg.Y, 20, 10);

    objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10)

    objGraphics.DrawString(graphValue.Value, New Font("Tahoma", 10),
    Brushes.Black, descLeg);

    symbolLeg.Y += 15;

    descLeg.Y += 15;
    }


    Regards,
    Leon
     
    Guest, Oct 14, 2004
    #3
  4. Thx Leon,
    But can you please forward me a detailed code how to retrieve the values
    from database.
    Thanks


     
    Patrick.O.Ige, Oct 14, 2004
    #4
  5. Guest

    Guest Guest

    Here, you´ve got a function that returns an ArrayList filled with the Graph
    Data from a Sql Server DataBase

    using System;
    using System.Data;
    using System.Data.SqlClient;
    using System.Collections;

    public ArrayList GetGraphData()
    {
    // Create the SQL Connection and Command Objects
    string connectionString =
    "Server=yoursever;UID=yourUID;PWD=yourPWD;Database=yourDB";
    SqlConnection connection = new SqlConnection(connectionString);
    SqlCommand command = new SqlCommand();
    SqlDataReader reader = null;

    // create the graphdata collecion instance
    ArrayList graphDataCollection = new ArrayList();

    try
    {
    // open the connection
    connection.Open();

    // establish the sql sentence to the command
    command.CommandText = "SELECT fieldName, fieldValue FROM myTable";

    // bind the command and the connection
    command.Connection = connection;

    // fetch the data in a DataReader
    reader = command.ExecuteReader(CommandBehavior.SequentialAccess);

    // while there is data left to read...
    while (reader.Read())
    { // add data to the
    collection graphDataCollection.Add(new GraphData(reader.GetString(0),
    reader.GetInt32(1)));
    }
    }
    finally
    {
    // close and release all data access objects
    if (reader != null)
    reader.Close();

    connection.Close();
    command.Dispose();
    connection.Dispose();
    }

    // return the graph data
    return graphDataCollection;
    }

    Be carefull with the data that is returned by your query. According to the
    piece of code above, it must return a string field and then and integer field.

    You have also to define this struct:

    public struct GraphData
    {
    public string Name;
    public double Value;

    public GraphData(string name, double val)
    {
    this.Name = name;
    this.Value = val;
    }
    }


    Regards,
    Leon
     
    Guest, Oct 14, 2004
    #5
  6. Guest

    Guest Guest

    Thanks alot Leon
    Will try that!

     
    Guest, Oct 15, 2004
    #6
  7. Guest

    Guest Guest

    Hi Leon,
    Sorry but more questions for you relating to these Pie, Bar charts..
    Help if u can!
    Thx

    Question 1
    -------------
    I have got the Data set as you adviced using the "GetGraphData()".
    But i defined the struct like this (Any idea if its ok and would i also need
    to define a struct for the GraphValue):-
    Public Structure GraphData
    Public Name As String
    Public Value As Double

    Public Sub New(ByVal arrValueNames As String, ByVal arrValues As
    Double)
    Me.Name = arrValueNames
    Me.Value = arrValues
    End Sub
    End Structure


    Question 2
    ---------------------------------
    I used these code below to create the Pie and Bar charts.
    How would i iterate through the DataCollection.
    Can you give me some ideas ?


    'Create a legend to describe your bar and chart.

    'symbolLeg represents the(position) stats near the calender
    Dim symbolLeg As PointF = New PointF(335, 20)
    'desc represents the (position)Months printed
    Dim descLeg As PointF = New PointF(360, 16)

    For i = 0 To arrValueNames.Length - 1

    objGraphics.FillRectangle(New SolidBrush(GetColor(i)),
    symbolLeg.X, symbolLeg.Y, 20, 10)

    objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y,
    20, 10)
    objGraphics.DrawString(arrValueNames(i).ToString, New
    Font("Tahoma", 10), Brushes.Black, descLeg)

    symbolLeg.Y += 15

    descLeg.Y += 15

    Next i
    'Loop through the values to create the Bar Chart.

    For i = 0 To arrValues.Length - 1

    objGraphics.FillRectangle(New SolidBrush(GetColor(i)), (i * 35)
    + 15, 200 - arrValues(i), 20, arrValues(i) + 5)

    objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 -
    arrValues(i), 20, arrValues(i) + 5)

    Next



    'Loop through the values to create the Pie Chart.

    Dim sglCurrentAngle As Single = 0

    Dim sglTotalAngle As Single = 0

    i = 0



    For i = 0 To arrValues.Length - 1

    'Current Value / (sum of all the Values) * 360 degree angle

    sglCurrentAngle = arrValues(i) / 550 * 360



    objGraphics.FillPie(New SolidBrush(GetColor(i)), 220, 95, 100,
    100, sglTotalAngle, sglCurrentAngle)

    objGraphics.DrawPie(Pens.Black, 220, 95, 100, 100,
    sglTotalAngle, sglCurrentAngle)



    sglTotalAngle += sglCurrentAngle

    Next i







     
    Guest, Oct 15, 2004
    #7
  8. Guest

    Guest Guest

    Hi Leon,
    I have tried something out with ur ideas but it looks like NO Data is
    getting to the charts..
    If u can go trhough the code.
    Thanks
    Code Below:-
    -----------------
    Public Class Chartdb
    Inherits System.Web.UI.Page

    Dim graphDataCollection As ArrayList = New ArrayList

    #Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub
    InitializeComponent()

    End Sub

    'NOTE: The following placeholder declaration is required by the Web Form
    Designer.
    'Do not delete or move it.
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
    System.EventArgs) Handles MyBase.Init
    'CODEGEN: This method call is required by the Web Form Designer
    'Do not modify it using the code editor.
    InitializeComponent()
    End Sub

    #End Region
    Public Structure GraphData
    Public Name As String
    Public Value As Double

    Public Sub New(ByVal arrValueNames As String, ByVal arrValues As
    Double)
    Me.Name = arrValueNames
    Me.Value = arrValues
    End Sub
    End Structure

    Public Function GetGraphData() As ArrayList
    ' Create the SQL Connection and Command Objects
    Dim connectionString As String
    connectionString = "server=(local);database=Northwind;integrated
    security=true;"
    Dim connection As SqlConnection = New SqlConnection(connectionString)
    Dim command As SqlCommand = New SqlCommand
    Dim reader As SqlDataReader = Nothing

    ' create the graphdata collecion instance


    Try
    ' open the connection
    connection.Open()

    ' establish the sql sentence to the command
    command.CommandText = "SELECT arrValues,arrValueNames FROM Charts"

    ' bind the command and the connection
    command.Connection = connection

    ' fetch the data in a DataReader
    reader = command.ExecuteReader(CommandBehavior.SequentialAccess)



    ' while there is data left to read...
    While reader.Read()

    'add data to the collection

    graphDataCollection.Add(New GraphData(reader.GetString(0),
    reader.GetInt32(1)))

    End While
    Finally
    ' close and release all data access objects
    If Not reader Is Nothing Then
    reader.Close()
    End If

    connection.Close()
    command.Dispose()
    connection.Dispose()
    End Try

    ' return the graph data
    Return graphDataCollection

    End Function

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
    System.EventArgs) Handles MyBase.Load

    Dim objBitMap As New Bitmap(400, 200)

    Dim objGraphics As Graphics

    objGraphics = Graphics.FromImage(objBitMap)

    objGraphics.Clear(Color.Azure)

    'Write out a title for your bar and pie chart.
    objGraphics.DrawString("5 Month Projection Report", New
    Font("Tahoma", 16), Brushes.Black, New PointF(5, 5))



    'Create a legend to describe your bar and chart.

    'symbolLeg represents the(position) stats near the calender
    Dim symbolLeg As PointF = New PointF(335, 20)
    'desc represents the (position)Months printed
    Dim descLeg As PointF = New PointF(360, 16)

    Dim colorCode As Integer = 0
    Dim arrValueNames As GraphData
    'Dim graphDataCollection As ArrayList = New ArrayList
    For Each arrValueNames In graphDataCollection

    colorCode = colorCode + 1

    objGraphics.FillRectangle(New SolidBrush(GetColor(colorCode)),
    symbolLeg.X, symbolLeg.Y, 20, 10)

    objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y,
    20, 10)

    objGraphics.DrawString(arrValueNames.ToString, New
    Font("Tahoma", 10), Brushes.Black, descLeg)

    symbolLeg.Y += 15

    descLeg.Y += 15
    Next



    'Loop through the values to create the Bar Chart.

    'For i = 0 To arrValues.Length - 1

    'objGraphics.FillRectangle(New SolidBrush(GetColor(i)), (i * 35) +
    15, 200 - arrValues(i), 20, arrValues(i) + 5)

    'objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 -
    arrValues(i), 20, arrValues(i) + 5)

    'Next









    objBitMap.Save(Response.OutputStream, ImageFormat.Gif)

    End Sub
    Private Function GetColor(ByVal itemIndex As Integer) As Color

    Dim objColor As Color



    Select Case itemIndex

    Case 0

    objColor = Color.Blue

    Case 1

    objColor = Color.Red

    Case 2

    objColor = Color.Yellow

    Case 3

    objColor = Color.Purple

    Case 4

    objColor = Color.Orange

    Case 5

    objColor = Color.Brown

    Case 6

    objColor = Color.Gray

    Case 7

    objColor = Color.Maroon

    Case Else

    objColor = Color.Green

    End Select



    Return objColor



    End Function




    End Class




























     
    Guest, Oct 15, 2004
    #8
  9. Guest

    Guest Guest

    Hi Patrick

    I think that there is a problem in the way you iterate through the
    GraphDataCollection.

    Here is a snippet of a way to walk through it (c#, sorry again ;))

    foreach(GraphData graphData in GraphDataCollection)
    {
    ...
    ...
    objGraphics.DrawString(graphData.Name, New
    Font("Tahoma", 10), Brushes.Black, descLeg)
    ...
    ...
    }

    Can you see the difference between this and your code? you are iterating
    through a collection of GraphData elements, but instead of using a member of
    the struct you are doing a ToString of the whole instance of the struct.

    Another further improvement would be define the struct GraphData outside the
    class, just in case you want to reuse it for another graphic. Maybe you could
    isolate the GetGraphData function as a member of a separate class. That
    function could receive the Sql query as a parameter. Within this two simple
    refactorings you could be able to reuse this functions to draw other
    graphics, based on different data

    If you have any trouble with this, don´t hesitate to contact me

    Regards,
    Leon
     
    Guest, Oct 15, 2004
    #9
  10. Hi Leon,
    Thanks for the reply.
    But how should i iterate by using a member of the struct.
    Are u saying i shoud use Names and Value and not arrValues and
    arrValueNames?
    With this line :- foreach(GraphData graphData in GraphDataCollection)
    What should input as "graphData" in relative to my code.
    Sorry for these questions but i need to change C# to VB.NET.
    Thx in Advance..


     
    Patrick.O.Ige, Oct 16, 2004
    #10
  11. Guest

    fine Guest

    Here is list of 'PHP graphic software.' (http://tinyurl.com/e3cgo)
    Highly recommend jpgraph and phplot.
    all could be integrated with database
     
    fine, Nov 27, 2005
    #11
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.