Solved

Creating Charts and Graphs on Web Page

Posted on 2004-04-04
16
9,966 Views
Last Modified: 2011-08-18
Hi,
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.

0
Comment
Question by:NarangSachin
  • 6
  • 6
  • 2
  • +2
16 Comments
 
LVL 24

Expert Comment

by:duz
Comment Utility
0
 

Expert Comment

by:spyderman03
Comment Utility
If you are using Java, check out: http://www.jfree.org/jfreechart/index.html
It's a great free charts and graphs generator.
~Spyder
0
 

Expert Comment

by:irish_coffee
Comment Utility
0
 

Expert Comment

by:irish_coffee
Comment Utility
0
 
LVL 1

Expert Comment

by:ives
Comment Utility
NarangSachin

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:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnowcbk/html/odc_chap4owc.asp
http://www.asp101.com/articles/chris/aspcharts/default.asp
http://www.netcontrols.org/scpl/

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

http://www.swiftchart.com/product.htm
http://www.steema.com/products/teechart/ax/features.html
http://www.dundas.com/home/index.aspx?Section=Home
http://www.proworks.com/product_chart_category.php?cid=2&pid=1

more links:

http://www.hotscripts.com/ASP/Scripts_and_Components/Graphs_and_Charts/index.html


See also the following URL:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_10298432.html?query=graphs+iis&searchType=all

Please keep us posted as to your progress...

-ives
0
 

Author Comment

by:NarangSachin
Comment Utility
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.
Thanks.
0
 
LVL 1

Expert Comment

by:ives
Comment Utility
NarangSachin,

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

http://www.experts-exchange.com/Web/Web_Languages/ASP/Q_20446099.html?query=graphs+iis&searchType=all

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

     Set oChart = CreateObject("OWC10.ChartSpace")

with:

     Set oChart = CreateObject("OWC11.ChartSpace")

The code worked for me without any code changes.

-ives


[----- 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
oChart.Charts.Add
oChart.Charts(0).Type=chChartTypeAreaStacked1003D

     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)
    oChart.Charts(0).ChartDepth=30
    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"
     oChart.Charts(0).DirectionalLightInclination=4
     oChart.Charts(0).ProjectionMode=chProjectionModePerspective
     oChart.Charts(0).Rotation=44

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

Response.End

%>
0
 
LVL 1

Expert Comment

by:ives
Comment Utility
Also check the following URL for how to do this in .NET...

http://msdn.microsoft.com/msdnmag/issues/02/02/ASPDraw/default.aspx

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Accepted Solution

by:
ives earned 500 total points
Comment Utility
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.

-ives

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

<HTML>
<BODY>
<img src=owcchart.asp>
</BODY>
</HTML>


[--- 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
      oChart.Charts.Add
      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)
Response.End


'Chart Types
'============================================
    'chChartTypeArea
    'chChartTypeArea3D
    'chChartTypeAreaOverlapped3D
    'chChartTypeAreaStacked
    'chChartTypeAreaStacked100
    'chChartTypeAreaStacked1003D
    'chChartTypeAreaStacked3D
    'chChartTypeBar3D
    'chChartTypeBarClustered
    'chChartTypeBarClustered3D
    'chChartTypeBarStacked
    'chChartTypeBarStacked100
    'chChartTypeBarStacked1003D
    'chChartTypeBarStacked3D
    'chChartTypeBubble
    'chChartTypeBubbleLine
    'chChartTypeColumn3D
    'chChartTypeColumnClustered
    'chChartTypeColumnClustered3D
    'chChartTypeColumnStacked
    'chChartTypeColumnStacked100
    'chChartTypeColumnStacked1003D
    'chChartTypeColumnStacked3D
    'chChartTypeCombo
    'chChartTypeCombo3D
    'chChartTypeDoughnut
    'chChartTypeDoughnutExploded
    'chChartTypeLine
    'chChartTypeLine3D
    'chChartTypeLineMarkers
    'chChartTypeLineOverlapped3D
    'chChartTypeLineStacked
    'chChartTypeLineStacked100
    'chChartTypeLineStacked1003D
    'chChartTypeLineStacked100Markers
    'chChartTypeLineStacked3D
    'chChartTypeLineStackedMarkers
    'chChartTypePie
    'chChartTypePie3D
    'chChartTypePieExploded
    'chChartTypePieExploded3D
    'chChartTypePieStacked
    'chChartTypePolarLine
    'chChartTypePolarLineMarkers
    'chChartTypePolarMarkers
    'chChartTypePolarSmoothLine
    'chChartTypePolarSmoothLineMarkers
    'chChartTypeRadarLine
    'chChartTypeRadarLineFilled
    'chChartTypeRadarLineMarkers
    'chChartTypeRadarSmoothLine
    'chChartTypeRadarSmoothLineMarkers
    'chChartTypeScatterLine
    'chChartTypeScatterLineFilled
    'chChartTypeScatterLineMarkers
    'chChartTypeScatterMarkers
    'chChartTypeScatterSmoothLine
    'chChartTypeScatterSmoothLineMarkers
    'chChartTypeSmoothLine
    'chChartTypeSmoothLineMarkers
    'chChartTypeSmoothLineStacked
    'chChartTypeSmoothLineStacked100
    'chChartTypeSmoothLineStacked100Markers
    'chChartTypeSmoothLineStackedMarkers
    'chChartTypeStockHLC
    'chChartTypeStockOHLC

%>

0
 

Author Comment

by:NarangSachin
Comment Utility
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.
Thanks.
0
 

Author Comment

by:NarangSachin
Comment Utility
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.
Thanks.
0
 

Author Comment

by:NarangSachin
Comment Utility
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.
Thanks.
0
 
LVL 1

Expert Comment

by:ives
Comment Utility
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
http://support.microsoft.com/default.aspx?scid=kb;en-us;319793

(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...

    oChart.Charts(0).Type=oConst.chChartTypePie

To enable percentages for the pie...

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

         (or)

     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)...

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnacbk02/html/odc_4010c12.asp

-ives
0
 

Author Comment

by:NarangSachin
Comment Utility
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.
0
 
LVL 1

Expert Comment

by:ives
Comment Utility
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
0
 

Author Comment

by:NarangSachin
Comment Utility
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.
Thanks.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now