Click here to Skip to main content
Email Password   helpLost your password?

Introduction

There are quite a lot commercial or free charting controls available in the market. However, most of the charting requirements are presented with Microsoft Excel charts. In other words, if we can utilize the rich features offered by MS OWC (Office Web Component) including the office charting support, we shall be able to present Microsoft Office charts in web pages.

By employing MS OWC technology, there are basically two approaches to implement the charting control, i.e., server-driven and or client-driven. The server-driven approach is to render the chart at the server side with OWC COM class, through .NET interop. Another one is using OWC ActiveX object. The 2nd approach requires the Office OWC support at the client side and thus incurs the license issue. In this ChartFactory custom control, the server-driven model is adopted. As to how to install the OWC license on the server side, please refer to Microsoft site.

Using the code

Step 1: Adding Control Reference

To use the custom control, you can include the assembly from the toolbox bar in your VS.NET IDE (Add/Remove items -> locate the assembly -> OK). Once done, you can drag and drop that control into ASP.NET forms in any ASPX page or ASCX page.

Step 2: Prepare Chart Data

In order to render the charting, you will have to fill the DataSet first that is required by ChartFactory.AddChartData method. The DataSet instance can only have a single table that must contain three columns having names: "Series", "Group" and "Value". You shall not change the column names as they are referenced by ChartFactory control.

As the ChartFactory doesn't get any chart type information from the DataSet, there shall be some ways to pass the chart type information. It is achieved by passing a parameter ChartFactory.AddChartData method, which however has three types of method signatures:

The ChartFactory.AddChartData method can be called more than once such that more than one chart will be rendered within a single chart space (a term used by MS), and they will all appear in a single GIF image displayed in client HTML.

Render the Chart

Finally, it is to invoke the chart rendering from the application code by calling DataBind() method of the ChartFactory control. The reason why it has to be explicitly invoked is to give more control to the application developers so that they can decide when and where to invoke. Normally, on Page_Load event, ChartFactory.DataBind() has to be called for chart rendering. If there is any postback event, and that would change the DataSet of the ChartFactory or any other properties of it, during the postback event this method will have to be called again.

If any other questions or programming extension requirements, please send to my email box. Thanks. I do all this for the sake of sharing something that can be useful to you.

Appendix: CharTypeEnum Definition

#region CharTypeEnum
 public enum ChartTypeEnum
 {
  Area = 1, /** must start with value=1 as value=0 cause 
               display problem in property browser */
  AreaStacked,
  AreaStacked3D,
  BarStacked,
  Bar3D,
  Column,
  ColumnStacked,
  Column3DStacked,
  Doughnut,
  Line,
  Line3D,
  LineStacked,
  Pie,
  Pie3D,
  PieExploded,
  Pie3DExploded,
  RadarLine,
  ScatterLine
 }
 #endregion
You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
QuestionSet scaling to secondary Axis.
Babar Shaik
2:48 27 Feb '09  
Hi Catiger,

I am able to Add secondary Y Axis to the chart, but I am not able to set the scaling of its own, it is taking tha same sclaing of primary y Axis.
please have a look at my code and get let me know where I am failing.


oChart.SeriesCollection.Add(0);
oSeries = oChart.SeriesCollection[0];
oSeries.Caption = "Impacted Hours";
oSeries.Type = ChartChartTypeEnum.chChartTypeColumnClustered;
oSeries.SetData(ChartDimensionsEnum.chDimCategories,
Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), weeks);
oSeries.SetData(ChartDimensionsEnum.chDimValues,
Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), impactHrs);

//Series 2 oChart.SeriesCollection.Add(1);
oSeries = oChart.SeriesCollection[1];
oSeries.Caption = "Impacted Days";
oSeries.Type = ChartChartTypeEnum.chChartTypeLineMarkers;
oSeries.SetData(ChartDimensionsEnum.chDimCategories,
Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), weeks);
oSeries.SetData(ChartDimensionsEnum.chDimValues,
Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), impactDays);

//Add Secondery Y Axis to the Chart

oScaling = oSeries.get_Scalings(ChartDimensionsEnum.chDimValues);
oScaling.HasAutoMinimum = oScaling.HasAutoMaximum = true;
oScaling.Orientation = ChartScaleOrientationEnum.chScaleOrientationMinMax;
oChart.Axes.Add(oScaling);
oChart.Axes[2].Position = ChartAxisPositionEnum.chAxisPositionRight;

GeneralWhere Is AIMS.Data.AccessLogic.Common?
Aponilolo
14:58 25 Sep '07  
Hi Richard,

You forgot to include the DLL for "AIMS.Data.AccessLogic.Common" class. Can you send me the DLL of this or the source code so that i can compile it.

You can send me the Source or the DLL from this email dbarcelon@yahoo.com or Daniel.Barcelon@Digitel.PH


Thanks & Regards,
Daniel
GeneralRe: Where Is AIMS.Data.AccessLogic.Common?
Catiger
17:20 26 Sep '07  
Hi Daniel,

This class is not actually needed and you can remove this line. it was my mistake to keep it there.

this class is used for database access. you can use your own method to access the database as needed.

cheers,
Richard

IT's a wish IT's a way!
---------------
Richard Chen

GeneralRe: Where Is AIMS.Data.AccessLogic.Common?
Aponilolo
15:15 9 Oct '07  
thanks richard//
Generalwhere is AIMS.Data.AccessLogic.Common
fengjinzhi
15:53 1 Mar '07  
Dear Richard

Can you post me DLL at MZQ_mark@163.com

Thanks

mark
GeneralRe: where is AIMS.Data.AccessLogic.Common
Catiger
17:21 26 Sep '07  
as i explained as above, it is not really needed. please customize my code to what you need.

IT's a wish IT's a way!
---------------
Richard Chen

QuestionAdd reference
Etwanadoo
6:50 22 Dec '06  
Hi,

I want to use a Microsoft Office Chart 11.0 to represent values of a SQL database in a (XY-)chart. I've added the component to my toolbox, but I can't use it, it isn't available: it's 'grey'. I think the solution is to add a COM reference, but I can't figure out which reference to add. I've tried a lot, but no luck.

So I'm stuck at one of the first lines in your article (good article by the way!):"Once done, you can drag and drop that control into ASP.NET forms in any ASPX page or ASCX page." the dropping doesn't occur in my case.

Could you help me or give some hints?
(Windows XP pro, Visual Studio 2005, Office 2003)

Thanks in advance.

Regards,
Tonny
Questioncan i use this ...
kaksx
17:28 5 Dec '06  
Can i use this natively within c#?

I have a large number of arrays, both one and two dimensional, which i take the float values within those array and print the results in XML format.
However i was wondering if i can use the data from these arrays and generate charts, within my C# Windows application.

thanks....
nice example btw Poke tongue
AnswerRe: can i use this ...
Catiger
17:24 26 Sep '07  
sorry for replying you that late.


my code provided is purely managed C# code...so no issue with being used within your C#

IT's a wish IT's a way!
---------------
Richard Chen

QuestionHelp Needed
Sarma K N
23:41 18 Jul '06  
Hi

I saw your article. It was neat and self explanatory. But i need an enhacement to that. I need a chart with two series. One is a bar series and other is a line series. The tricky thing here is that the second series has to be plotted on the right of the chart it has different Y Axis Scale. The regular Y Axis scale (on the left) has a scale ranging from 0 to 300. the one on the right(ie the secondary Axis) has a range from 0 to 4. This line sereis is being plotted on the right by selecting the Value(Y) axis in secondary axis option of the Axes Tab in the Chart Options. This Chart Options menu item can be found in the popoup menu that appears when u right click on the chart.

Please help me ASAP as my client is getting impatient about this.

Thanks
Sarma



AnswerRe: Help Needed
Catiger
16:54 30 Jul '06  
sorry that i do not touch code very often these days and thus really can not look into the code to figure out how to help with. I am thinking of multiplying the Y axis of your second series by 75 and then draw them in the same graph if the two charts are not directly related/dependent.

as for poping up a window with a choice of the chart types, i think it can be easily done with simple web UI techniques. another way can be providing a dropdown list in the same page where the chart is embeded.

IT's a wish IT's a way!
---------------
Richard Chen

QuestionGreat Work
Rakhaylo
23:43 10 Jun '06  
Your work is great, but why didnt you put the DLL on the site.... Can you send it to me Please?

My email is: mohamedrakha@gmail.com or rakhaylo@yahoo.com

Thanks anyway
AnswerRe: Great Work
Catiger
16:59 30 Jul '06  
yeah. i'd want to attach a dll onto the post. however, after i finished posting this message i can no longer edit it except answering here.

anyway the dll can be generated by yourself by compiling the above source code attached. sorry about the inconvenience.

IT's a wish IT's a way!
---------------
Richard Chen

General.DLL Requested
barodesign
23:50 5 Apr '06  
Big Grin
Dear Richard,
Would you please post me a .DLL Version (C#) at barodesign@empal.com Thanks for cooperation.
thanks a lot
Laugh
GeneralAccess Denied in ExportPicture Method
kkrac
4:23 30 Mar '06  
Hi!
I'm generating the chart OK locally, but when I deploy the project, I get the following error:

System.Runtime.InteropServices.COMException (0x80030005): Access Denied. at OWC10.ChartSpaceClass.ExportPicture(String Filename, String FilterName, Int32 Width, Int32 Height)

I've referenced the Interop.OWC10.dll with "Copy local=true" and I'm creating the COM object with late binding (Server.CreateObjectFromClsid(.....)
Apparently the object is created OK, but when it tries to write the gif file it crashes.
I have write permissions in the directory in which it tries to create the .gif file and I'm using impersonation () in the web.config file.
Any ideas??? Please help!!
Thanks in advance.
Generalvb .net version?
taptu
13:28 22 Feb '06  
Hi Richard,

Looks like this is what I have been looking for. Do you have a vb .net version of your code? And an example in vb .net will also be helpful.

Thanks a lot and stay healthy! We need you here... Big Grin

taptu
GeneralDLL needed
gsdtgzesg
17:58 20 Feb '06  
Could you send me the DLL version at dvidal@isep.fr please
thanks a lot
Generalproblem with pie charts
kkrac
11:11 1 Feb '06  
Hi, I'm having a problem with the pie charts. It always adds an extra reference key which is obviously in blank 'cause I didn't put in the dataset that's the datasource por the chart.
Here's my code. As a result I get a Pie chart with 4 references beside the chart when I've added only 3.
if you can write to my mail, I will appreciate it. By the way, I don't know if there have been updates to the control. If they have, maybe you could send me the latest version? Thanks!
My mail is kkrac@hotmail.com

DataSet ds = new DataSet();
DataTable dt = new DataTable();
DataRow row;

DataColumn dc;
dc = new DataColumn("Group");
dt.Columns.Add(dc);
dc = new DataColumn("Series");
dt.Columns.Add(dc);
dc = new DataColumn("Value");

dt.Columns.Add(dc);

ds.Tables.Add(dt);

int i = 0;
foreach(DataRow dr in this.dtTest.Rows)
{
row = dt.NewRow();
row[0] = "Value 1";
row[1] = i.ToString();
row[2] = dr["value1"].ToString();
dt.Rows.Add(row);

row = dt.NewRow();
row[0] = "Value 2";
row[1] = i.ToString();
row[2] = dr["value2"].ToString();
dt.Rows.Add(row);

row = dt.NewRow();
row[0] = "Value 3";
row[1] = i.ToString();
row[2] = dr["value3"].ToString();
dt.Rows.Add(row);

i++;
}

this.chart.ChartWebCacheFolder = @"~/Files/Charts/";

if (!System.IO.Directory.Exists(Server.MapPath(this.chart.ChartWebCacheFolder)))
System.IO.Directory.CreateDirectory(Server.MapPath(this.chart.ChartWebCacheFolder));

this.chart.AddChartData(ds, ChartTypeEnum.Pie);
this.chart.DataBind();
GeneralRe: problem with pie charts
Catiger
21:42 5 Feb '06  
your code is quite faulty.

The line below will never get executed due to zero length of the new DataRow
foreach(DataRow dr in this.dtTest.Rows)

I have also replied separately inside another email to you. pls check it.

IT's a wish IT's a way!
---------------
Richard Chen
GeneralRe: problem with pie charts
kkrac
2:26 6 Feb '06  
Yes, the example was just a portion of the real code. Anyway, I found the solution, there was a problem in the chart factory control: it was adding an extra \t separator, that's why it was drawing an extra reference key beside the graph.
Thanks anyway!
QuestionRan into a problem with OWC...wondered if you ever observed this behavior with OWC
Arthur Strutzenberg
10:57 17 Jan '06  
I'm also working on a charting web control for a project, and I ran into a highly bizarre problem--I am not sure what is causing this and wanted to find out if you ever ran into it?

The problem is with line charts (and area charts), namely certain values in the chart magically double, seemingly at random. This has the effect of causing a chart with a normally horizontal slope to appear with a "sawtooth" pattern instead?

Thank You,

Arthur Strutzenberg

It is by caffeine alone that I set my mind in motion. By the beans of java, my thoughts acquire speed the hands acquire the shakes, the shakes become a warning. It is by caffeine alone that I set my mind in motion...

-- modified at 15:58 Tuesday 17th January, 2006
AnswerRe: Ran into a problem with OWC...wondered if you ever observed this behavior with OWC
Catiger
22:06 5 Feb '06  
Interesting observation!

We share the same problem. But I suppose the saw tooth effect is due to low resolution offered in OWC.

Pls share with me your further findings if there are.

Regards,
Richard

IT's a wish IT's a way!
---------------
Richard Chen
GeneralRe: Ran into a problem with OWC...wondered if you ever observed this behavior with OWC
Arthur Strutzenberg
5:44 6 Feb '06  
Actually I finally found something...This is being caused by some sort of problem where the OWC is trying to group axis points. (I found this after doing some frantic google searching, and I finally found this possible solution buried about 10 postings deep on a googlecached site that was a foriegn language...

Basically what I discovered was that if you play with the GroupingType enum when setting your axis data, this will solve your problem. (in this case, a one line fix.) In the instance of the charting control I created, I call a method which loops through each axis, to apply layout information (Title, orientation etc). I added the following line in this loop:

//oChart is of type OfficeInterop.ChChart
oChart.Axes[i].GroupingType=OfficeInterop.ChartAxisGroupingEnum.chAxisGroupingNone;

As far as I am able to hypothesize, the x-axis data for a series will need to be matched...eg. the Category data for one series will need to match the Category data for a different series.

Hope this helps...


It is by caffeine alone that I set my mind in motion. By the beans of java, my thoughts acquire speed the hands acquire the shakes, the shakes become a warning. It is by caffeine alone that I set my mind in motion...

-- modified at 10:45 Monday 6th February, 2006
Generaldll please
Mackerel Catcher
22:45 6 Jan '06  
Could you please email me your dll at fishcarnarvon@hotmail.com

Thanks
Greg
GeneralRe: dll please
Catiger
22:07 5 Feb '06  
sorry that i no longer maintain the source code but you can definitly compile the above source code to generate that dll. it can be fun for you.

good luck,
richard

IT's a wish IT's a way!
---------------
Richard Chen


Last Updated 16 Sep 2004 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2010