Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Creating Charts and Graphs on Web Page

Posted on 2004-04-04
Medium Priority
Last Modified: 2011-08-18
I have to create line,bar and pie charts on the Web Page, Data for the charts (graphs) will come from the SQL database. I really have to create bit complicated graphs (like line charts with multiple lines in one chart,bar chart with multiple bars in every month for comparative study between different items) and I don't know how to do that. Could anyone please help me by providing some code for performing the above task. I will prefer not to install any component on the computer. But if it is necessary, I can install the component only on the Web Server but I can't Install the components on client computers.Moreover that component must be free to intall. Thanks in advance.

Question by:NarangSachin
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
  • +2
LVL 24

Expert Comment

ID: 10754557

Expert Comment

ID: 10760093
If you are using Java, check out: http://www.jfree.org/jfreechart/index.html
It's a great free charts and graphs generator.
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control


Expert Comment

ID: 10776919

I have been looking into this as well and have come up with many options, but none of them free and "easy" for IIS/ASP.  Given time to develop or put together solutions, the best solutions seem to involve spending some cash on a toolset that does this.  That wasn't an option for me either, so here's what I've come up with (some solutions already provided above):

You will be looking for something that does the following:

- Allows you to create tables directly from web pages
- Allows you to stream the results back to the client (no temporary files) as images, flash, or VML
- Allows complex visualization of different data series (multiple axis and scales for datasets)

What web server are you using?   IIS / .NET / Apache?

You have a couple options:

1) JFreeChart seems to have been the best freeware tool available (see link above).  Although free, this is a Java solution.  The MS JDK seems to be a version behind for what's required (Java 1.2.x).  As a workaround you can setup Tomcat and integrate it with IIS.  There is a ".war" file that can be used to call JFreeChart as a servlet which returns an image that can be displayed on your webpage.

2) Using free PHP libraries, either with Apache or installing PHP for IIS (see above for PHP links)

3) Doing something entirely from IIS/.NET ASP/ASPX using MS Chart / Office web components:


4) Purchase a commercial tool at a reasonable price to avoid having to write your own solution:


more links:


See also the following URL:


Please keep us posted as to your progress...


Author Comment

ID: 10777331
Hi everbody,
Thanks to all for trying to help me in one way or the other.
I have checked the options posted by many friends.As I am new to Web development field, I have knowledge of ASP and little bit knowledge of JavaScript. I have seen JfreeChart but that is toooo complicated for me.I will be thankful if anyone could tell me how to work with it. I am working with IIS server.(and can't install TomCat etc. on my server).I have also tried to use Office Web Component, as  it is provided with Office and office is installed on my server, so I feel it is the best and easy solution.But while trying this I get error while exporting the image created to gif file(i.e. in ExportToGif function Call).Could anyone tell me how to use Office Web Component. The other method that I feel can serve the purpose is ,if somehow I export the data to Excel , create chart from excel and then again export it to Web Page. Please suggest me which is best and easy.Till now Office Web Component seems to be the easiest. Please suggest.

Expert Comment

ID: 10777788

Try the following code as a sample.  I copied it from user "mohanrs" from the following link:


I am using OWC version 11 (Office 2003), so I simply replaced the line:

     Set oChart = CreateObject("OWC10.ChartSpace")


     Set oChart = CreateObject("OWC11.ChartSpace")

The code worked for me without any code changes.


[----- copy below this line into owcchart.asp -----]

<%@ language="vbscript" %>

Response.Buffer = TRUE
Response.ContentType= "image/gif"

Dim oChart, oConst

' Create a Chart Object
Set oChart = CreateObject("OWC10.ChartSpace")
Set oConst = oChart.Constants

'Set the session objects to local

'Set oChart = Session("Sess_oChart")
'Set oConst = Session("Sess_oConst")

' Set the different parameters for the ChartSpace
oChart.Border.Color = oConst.chColorNone

' Add a chart and set parameters for the chart     - FROM Original sample

     Set oSeries1 = oChart.Charts(0).SeriesCollection.Add
    oSeries1.Caption = "Joe Smith"
    oSeries1.SetData oConst.chDimCategories, oConst.chDataLiteral, _
                    Array("Productivity", "Quality", "Sales", "Overall")
'    oSeries1.SetData oConst.chDimSeriesNames, oConst.chDataLiteral, "Yours"
    oSeries1.SetData oConst.chDimValues, oConst.chDataLiteral, _
                     Array(88, 96, 77, 84)
'    oSeries1.Type = 1 'oConst.chChartTypeBarClustered3D
    'Add a second series of type Line.
    Set oSeries2 = oChart.Charts(0).SeriesCollection.Add
    oSeries2.Caption = "Department Avg"
'    oSeries2.SetData oConst.chDimSeriesNames, oConst.chDataLiteral, "Dept Avg"
    oSeries2.SetData oConst.chDimValues, oConst.chDataLiteral, _
                     Array(75, 90, 81, 79)
'    oSeries2.Type = 1 'oConst.chChartTypeLine
     ' Change the Min/Max, Numberformat and Gridlines for the value-axis of the first series.
    Set oAxis1 = oChart.Charts(0).Axes(oConst.chAxisPositionLeft)
    oAxis1.Scaling.Maximum = 100
    oAxis1.Scaling.Minimum = 10
'    oAxis1.NumberFormat = "$0"
    oAxis1.HasMajorGridlines = True
    'Display the legend.
    oChart.Charts(0).HasLegend = True
    oChart.Charts(0).Legend.Position = oConst.chLegendPositionBottom
    'Display the title for the chart.
    oChart.Charts(0).HasTitle = True
    oChart.Charts(0).Title.Caption = "Performance Metrics"

Response.BinaryWrite oChart.GetPicture ("GIF", 600, 412)



Expert Comment

ID: 10778617
Also check the following URL for how to do this in .NET...



Accepted Solution

ives earned 2000 total points
ID: 10779346
A modified version of the above, with constants added to make it a bit easier.  This particular example will show both line and bars.

All you have to do is use ADODB to populate an array and pass that array to the "SetData" statement.


[--- BEGIN "Chart.html" ----]

<img src=owcchart.asp>

[--- BEGIN OwcChart.asp ----]

<%@ language="vbscript" %>

Response.Buffer = TRUE
Response.ContentType= "image/gif"

Dim oChart, oConst

'Create a Chart Object
      Set oChart = CreateObject("OWC11.ChartSpace")
      Set oConst = oChart.Constants

'Set the different parameters for the ChartSpace
      oChart.Border.Color = oConst.chColorNone

'Add a chart and set parameters for the chart     - FROM Original sample
      With oChart
            '  Set title for the chart
            .Charts(0).HasTitle = True
            .Charts(0).Title.Caption = "Daily Extraction Averages"

            '  Set Chart Type
'            .Charts(0).Type=oConst.chChartTypeLineMarkers
'            .Charts(0).Type=oConst.chChartTypeLine3D
'                  .Charts(0).ChartDepth=30
'                  .Charts(0).Rotation=44
'                  .Charts(0).ProjectionMode=chProjectionModePerspective
'                  .Charts(0).DirectionalLightInclination=4

            '  Set Legend
            .Charts(0).HasLegend = True
            .Charts(0).Legend.Position = oConst.chLegendPositionBottom
      End With

'Add data series1
      Set oSeries1 = oChart.Charts(0).SeriesCollection.Add
      With oSeries1
            .Caption = "PersonalAverage"
            .Type = oConst.chChartTypeLine
            .SetData oConst.chDimCategories, oConst.chDataLiteral, _
                  Array("Productivity", "Quality", "Sales", "Overall")
                .SetData oConst.chDimValues, oConst.chDataLiteral, _
                  Array(88, 96, 77, 84)
      End With

'Add data series2
      Set oSeries2 = oChart.Charts(0).SeriesCollection.Add
      With oSeries2
            .Caption = "Department Avg"
            .Type = oConst.chChartTypeColumnClustered
            .SetData oConst.chDimValues, oConst.chDataLiteral, _
                  Array(75, 90, 81, 79)
      End With

'Change the Min/Max, Numberformat and Gridlines for the value-axis of the first series.
      Set oAxisLeft = oChart.Charts(0).Axes(oConst.chAxisPositionLeft)

      With oAxisLeft
            .Scaling.Maximum = 120
            .Scaling.Minimum = 10
            .NumberFormat = "$0"
            .HasMajorGridlines = True
      End With

Response.BinaryWrite oChart.GetPicture ("GIF", 600, 412)

'Chart Types



Author Comment

ID: 10781774
Hi ives,
I am working on office 2000. Could u please help me in creating line ,bar and pie charts (with multiple lines in lime chart,and multiple bars for each month in bar char).Thanks a lot for ur help.

Author Comment

ID: 10781797
Hi ives,
I am working on Office 2000. Could u please help me in creating line, bar and pie charts(with multiple lines in line chart, multiple bars for each month in bar chart) with Office 2000. Thanks a lot for ur help.

Author Comment

ID: 10785538
Hi ives,
I also tried the code provided by u with Office XP. It worked very well. Please also help me in creating charts with Office 2000 because my server has Office 2000.Also could u please tell me the site from which I can learn all the properties to be set for the chart so that I can work with all the properties and also how to provide values in percentage and providing values for pie charts.
Thanks a lot for ur help.

Expert Comment

ID: 10801315
From what I understand there are a couple different versions of OWC:  v9 (Office 2000), v10 (Office XP), v11 (Office 2003).  In your case you would just specify the correct version in the server.CreateObject line:

  Set oChart = CreateObject("OWC9.ChartSpace")

If you are rendering on the server as a GIF image, you really just need the OWC component installed.  It would therefore be in your best interest to install the latest version of Office on your web server (or at least the Office Web Components).  If you check on Microsoft's site, you can find the download that installs only OWC.

I've been trying to find a list of properties but haven't been terribly lucky.  Microsoft has many sample pages on their site, but not a full listing of properties available to the web (there are properties that are listed for VB/.NET/c#, but they are the full set and not the same as what's used with ASP/VBscript).

You may want to take a look at the following link:

HOW TO: Find Office Web Components (OWC) Programming Documentation and Samples

(This tells you which Office help files to take a look at for more detail.)

As for your pie charts...

Set the chart type to...


To enable percentages for the pie...

    With oChart.Charts(0).SeriesCollection(0).DataLabelsCollection.Add
        .HasPercentage = True
        .HasValue = False
    End With


     Set oSeries2 = oChart.Charts(0).SeriesCollection.Add
     With oSeries2
          .HasPercentage = True
          .HasValue = False
     End With

See the following URL for more details on the pie chart and "HasPercentage" parameter (look towards the bottom of the page)...



Author Comment

ID: 10902658
Thanks a lot ives. All worked very well. But only one thing remains. Can't we display the number in the graph i.e actual number above bars and number on the side of pie to indicate the exact number the graph is representing.

But any way thanks a lot for ur timely help.

Expert Comment

ID: 10909909
Ummm... I don't know off the top of my head.

Generally speaking, I find the best way to discovery or guess what the VBScript properties might be is to do the following:

1) Open Microsoft Excel
2) Create some sample data
3) Turn on Macro Recording (Tools-Macro-Record New Macro)
4) Create and customize your chart
5) Stop Macro-Recording
6) View the Macro code (Alt-F11) or (Tools-Macro-Macros, select your macro & click Edit)

This way you can see all of the properties that have been assigned to your chart.  Unfortunately the VB code won't match up exactly with VBscript/ASP, but it will give you a good starting point.  You can then find the property you're interested in, then do a search for the native VB property on google or microsoft liek the following:

google "chart ShowValue ASP vbscript"

You will likely discover that the particular property you're looking for is already listed above in the code.  Here it is again for reference...

oChart.Charts(0).SeriesCollection(0).DataLabels.HasValue = True

Author Comment

ID: 11005355
Thanks a lot for the help ives. I will check and figure out how to achieve the rest of the objectives. I am really thankful to u for ur help and the code provided by u really helped me to solve almost all my doubts and problems.

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question