Link to home
Start Free TrialLog in
Avatar of NarangSachin
NarangSachin

asked on

Creating Charts and Graphs on Web Page

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.

Avatar of duz
duz
Flag of United Kingdom of Great Britain and Northern Ireland image

Avatar of spyderman03
spyderman03

If you are using Java, check out: http://www.jfree.org/jfreechart/index.html
It's a great free charts and graphs generator.
~Spyder
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:

https://www.experts-exchange.com/questions/10298432/generate-graph.html?query=graphs+iis&searchType=all

Please keep us posted as to your progress...

-ives
Avatar of NarangSachin

ASKER

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.
NarangSachin,

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

https://www.experts-exchange.com/questions/20446099/ASP-Office-Web-component-Performance-Issue.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

%>
Also check the following URL for how to do this in .NET...

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

ASKER CERTIFIED SOLUTION
Avatar of ives
ives

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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.
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.
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
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.
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
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.