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.
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.
If you are using Java, check out: http://www.jfree.org/jfreechart/index.html
It's a great free charts and graphs generator.
~Spyder
It's a great free charts and graphs generator.
~Spyder
can try to refer to http://www.asp101.com
there is code which might useful
http://www.asp101.com/samples/bar_chart.asp
http://www.asp101.com/samples/bar_chart_stacked.asp
there is code which might useful
http://www.asp101.com/samples/bar_chart.asp
http://www.asp101.com/samples/bar_chart_stacked.asp
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
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
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.
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.ChartS pace")
with:
Set oChart = CreateObject("OWC11.ChartS pace")
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.ChartS pace")
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=chCh artTypeAre aStacked10 03D
Set oSeries1 = oChart.Charts(0).SeriesCol lection.Ad d
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.chChartTypeBarClus tered3D
'Add a second series of type Line.
Set oSeries2 = oChart.Charts(0).SeriesCol lection.Ad d
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(oCon st.chAxisP ositionLef t)
oChart.Charts(0).ChartDept h=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.Po sition = oConst.chLegendPositionBot tom
'Display the title for the chart.
oChart.Charts(0).HasTitle = True
oChart.Charts(0).Title.Cap tion = "Performance Metrics"
oChart.Charts(0).Direction alLightInc lination=4
oChart.Charts(0).Projectio nMode=chPr ojectionMo dePerspect ive
oChart.Charts(0).Rotation= 44
Response.BinaryWrite oChart.GetPicture ("GIF", 600, 412)
Response.End
%>
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.ChartS
with:
Set oChart = CreateObject("OWC11.ChartS
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.ChartS
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=chCh
Set oSeries1 = oChart.Charts(0).SeriesCol
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.chChartTypeBarClus
'Add a second series of type Line.
Set oSeries2 = oChart.Charts(0).SeriesCol
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(oCon
oChart.Charts(0).ChartDept
oAxis1.Scaling.Maximum = 100
oAxis1.Scaling.Minimum = 10
' oAxis1.NumberFormat = "$0"
oAxis1.HasMajorGridlines = True
'Display the legend.
oChart.Charts(0).HasLegend
oChart.Charts(0).Legend.Po
'Display the title for the chart.
oChart.Charts(0).HasTitle = True
oChart.Charts(0).Title.Cap
oChart.Charts(0).Direction
oChart.Charts(0).Projectio
oChart.Charts(0).Rotation=
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
http://msdn.microsoft.com/msdnmag/issues/02/02/ASPDraw/default.aspx
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
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.
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.
ASKER
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.
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.ChartSp ace")
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=oCon st.chChart TypePie
To enable percentages for the pie...
With oChart.Charts(0).SeriesCol lection(0) .DataLabel sCollectio n.Add
...
.HasPercentage = True
.HasValue = False
...
End With
(or)
Set oSeries2 = oChart.Charts(0).SeriesCol lection.Ad d
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
Set oChart = CreateObject("OWC9.ChartSp
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=oCon
To enable percentages for the pie...
With oChart.Charts(0).SeriesCol
...
.HasPercentage = True
.HasValue = False
...
End With
(or)
Set oSeries2 = oChart.Charts(0).SeriesCol
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
ASKER
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.
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).SeriesCol lection(0) .DataLabel s.HasValue = True
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).SeriesCol
ASKER
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.
Thanks.
PHP Scripts Library Graphs and Charts http://www.phpfreaks.com/scripts/Graphs_and_Charts/49.php
Hot Scripts http://www.hotscripts.com/PHP/Scripts_and_Programs/Graphs_and_Charts/
- duz