Newbe Question: Making HTML Chart with ASP.Net

Hey there ...

I've started programming many years ago, (I feel so old) ... way before OOP. So please excuse for asking, what I hope you will find to be, a silly question. But hear goes ...

I would like to know how I can plot the individual x's and y's (once called "Cartesian Coordinate") onto a small HTML chart representing the price changes over a user selected time. I would only like a small chart of somewhere about one or two inches (for price) by three to maybe five inches (for time). Nothing big. The idea of enlarging this HTML chart is not necessary. That's what I'd like to achieve with ASP.Net. Can it be done?

Could this be done through (what I'd prefer) HTML or should I use the single Web control page (already put to use) of ASP.Net? I have no Java skills! So I must ask what type of ASP.Net commands or controls should be used to plot these charts? Is ASP.Net able to plot this in HTML?

Any help you can give will be greatly appreciated!

Thanks in advance.

May you have a blessed day.

 

Hi,

You should really use components of .net to do this. They will be able to be plugged with a datasource and the graph will be more precise, with less bugs.

 

Hello ...

Thanks! However, I'm VERY new to ASP.Net, so I must ask for more detail. For me your reply is rather cryptic.

My understand of oop is growing as I focus more on Visual Basic .Net, but I'm afraid I to say that my skills are mostly procedural oriented.

So could you restate what you've said with more detail so I could look into it further?

Thanks in advance.

May you have a blessed day.

 

Hi,

Basically, when you are doing a asp.net webpage, you can drag and drop components into your page (textbox, label, combobox...). With the right components, you can also do charts. By default Visual Studio don't give chart components.

You can find free (a few) and not free (there is a lot..) of chart for asp.net.

Here 2 free i found :

http://sourceforge.net/projects/openflashchart/
http://www.carlosag.net/Tools/WebChart/

You may found way much others on google. Maybe you can find also some free in ajax, javascript or dhtml..

With asp.net components, you will be able to customize the type of chart, plug the chart into your datasource. Setup x and y and so on.

Hope this is more clear.

Have a nice day!

 

Greetings ......

Thank you very much! That is exactly the level of detail that I needed to hear!

One key question that remains. The free software of those web sites that you've listed must somehow draw the output results. I must know what type of form component will the graph or chart be displayed in when it appears on the web form? Will it be a panel, image, bitmap, or what?

I need to know because I'd like ASP.Net to automatically update the graph or chart w/o human intervention ... ever. If necessary, I wouldn't mind writing the routines necessary to calculate each individual dot on the chart/graph as a new price becomes available online. But I need to know what type of component I'm writing onto before I write that code.

On the other hand, if the web sites that you've specified can do this function well in the dark, w/o error, and they don't require occasional manual adjustment, then they will do fine also.

PS: What search term did you enter into Google.com to discover those web sites?

Any answer you can give to any of these questions would be greatly appreciated.

Thanks in advance.

May you have a blessed day.

 

Hi!

Usually, they will generate image when the webpage will be rendered. Use the terms "asp.net charts" or "asp.net charts components" to find those. "free asp.net charts" may also help to find free ones. I know that those that you pay are better in quality (better graphic, simple of use).

As for the graph itself, you will just had to define your x and y axis. Let's say y is sales $ and x are months of the years. If you have a sql query that return the total sales for each month, you will be able to plug this source to the graph (i simplify a bit the process but it's like that).

Have a nice day!

 

Greetings ...

I've looked over the websites that you've listed. Thank you very much. They appear to be able to accomplish the chart/graphic task.

However, I'm wondering if there are any restrictions? (Please note that I will focus this question on http://sourceforge.net/projects/openflashchart/) Since I plan to design my first serious ASP.Net application, I must know if the abilities of this free chart/graphic software are limited to ASP.Net web forms only or would they work equally well on a regular plain vanilla HTML page? If it will work simply and equally well on both web forms and HTML pages, then I can use http://sourceforge.net because it will be the solution that I have sought.

If it wont do the task on both, what are my other options?

PS: It is obvious that you've experience with these sites. Have released any website that uses these charts or graphs that I may view?

Thanks in advance.

May you have a blessed day.

 

I am not sure to fully understand your question but i will respond the best i can.

Those components will only work with asp.net (.aspx) and not with .html

I haven't used of those since at my job we got a paid one. I think you will need to do some research on how to integrate it on your project. In a .net project, there should be no problem.

Have a nice day!

 

You could write an asp.net app that outputs the chart as an image, using data from a database. Then you could implement it into an html page like:
<img src="chart.aspx?chartID=1">

chart.aspx would look up the appropriate x,y values from the database with that chartID and use the Graphics object to plot it onto a graph, and output would be an image of the chart.

 

here is an example of how this can be done. this could be improved on and easily altered to gather the data from a database, web service or some other input.

Imports System.Drawing
Imports System.IO
Imports System.Drawing.Imaging

Partial Class chart
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'declare some variables
        Dim w, h As Integer
        Dim x(), y() As String
        Dim xpoints, ypoints As String
        Dim stepx, stepy As Integer
        Dim xmax, ymax As Integer

        'our graphics object
        Dim g As Graphics

        'create the pens we will use
        Dim blackPen As New Pen(Color.Black, 3)
        Dim bluePen As New Pen(Color.Blue, 2)

        'set the width and height of our image (you can change this to whatever)
        w = 600
        h = 300

        'create a new bitmap
        Dim b As New Bitmap(w + 5, h)

        'make up some points for example purposes
        xpoints = "0,1,2,3,4,5,6,7,8"
        ypoints = "0,10,14,26,21,9,12,15,3"
        'get these points into an array
        x = Split(xpoints, ",")
        y = Split(ypoints, ",")

        'set the graphics object to draw onto our bitmap
        g = Graphics.FromImage(b)

        'draw background and axis
        g.FillRectangle(Brushes.White, 0, 0, w + 5, h)
        g.DrawLine(blackPen, 0, 0, 0, h)
        g.DrawLine(blackPen, 0, h, w, h)

        'find the highest x value
        For Each i In x
            If CInt(i) > xmax Then xmax = CInt(i)
        Next
        'find the highest y value
        For Each i In y
            If CInt(i) > ymax Then ymax = CInt(i)
        Next

        'we use these to scale the chart so it fits perfectly on our image
        stepx = w / xmax
        stepy = h / (ymax + 1)

        'connects the points
        For i = 1 To xmax
            g.DrawLine(bluePen, CInt(x(i - 1)) * stepx, h - (CInt(y(i - 1)) * stepy), CInt(x(i)) * stepx, h - (CInt(y(i)) * stepy))
        Next

        'set the response type to a jpeg image (could also be gif)
        Response.ContentType = "image/jpeg"

        'show the image
        b.Save(Response.OutputStream, ImageFormat.Jpeg)
    End Sub

End Class

Code (markup):

 

i had to use CInt before each x and y value because they are in an array of strings. It seemed like a good idea at the time to do it this way, and it won't effect the code regardless of whether the x,y values are string or integer.