Combined graph in ASP.NET with OWC

By mattie, Mon 14 September 2009, in category Code, Code, graph, .NET, OWC, web development

It took me a while to find out how to get a hang of making graphs in ASP.NET combined with OWC. There aren't many places on the internet that show, or have a good guide. I was having troubles with creating a combined OWC graph in ASP.NET and I finally worked it out. I thought I would share. I've left some of the different methods and properties in there, mostly the styling ones to give a better idea on how to style your graph to suit you. The DataTable bit is in there also. If you want to test it straight out you can replace that with an array of your choosing.

    const int XAxis = 0;
    const int YAxis = 1;

    DataTable dt = this.DataSource;

    ChAxis axis = null;
    ChAxis axis2 = null;
    ChSeries seriesValue = null;
    ChSeries seriesMoreValue = null;
    ChSeries seriesY2 = null;

    ChartSpace = this.GetBaseChartSpace();
    ChChart chart = ChartSpace.Charts[0];

    #region Grab the data from the database and put it in a couple of arrays

    List<object> listValues = new List<object>();
    List<object> listMoreValues = new List<object();
    List<object> dateList = new List<object>();
    List<object> listY2Values = new List<object>();

    foreach( DataRow row in dt.Rows )

    object [] dateArray = dateList.ToArray();
    object [] valueArray = listValues.ToArray();
    object [] moreValueArray = listMoreValues.ToArray();
    object [] y2Array = listY2Values.ToArray();


    #region Series data
    seriesValue = chart.SeriesCollection.Add(0);
    seriesValue.Caption = "Value Array";
    seriesValue.SetData( ChartDimensionsEnum.chDimCategories,
    Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), dateArray);
    seriesValue.SetData( ChartDimensionsEnum.chDimValues,
    Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), valueArray);
    seriesValue.Interior.Color = "#FF9E00";

    seriesMoreValue = chart.SeriesCollection.Add(1);
    seriesMoreValue.Caption = "More Value Array";
    seriesMoreValue.SetData( ChartDimensionsEnum.chDimValues,
    seriesMoreValue.Interior.Color = "#F7D708";

    #region Chart settings
    chart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;
    chart.Interior.Color = "whitesmoke";
    chart.PlotArea.Interior.Color = "white";
    chart.Title.Caption = "The chart header";
    chart.HasLegend = true;
    chart.Legend.Position = ChartLegendPositionEnum.chLegendPositionBottom;

    #region value axis (Y Axis)
    chart.Axes[YAxis].Scaling.Minimum = 0;
    chart.Axes[YAxis].HasTitle = true;
    chart.Axes[YAxis].Title.Caption = "This is the Y-axis";
    chart.Axes[YAxis].HasMajorGridlines = true;
    chart.Axes[YAxis].HasMinorGridlines = true;
    chart.Axes[YAxis].MajorGridlines.Line.Color = "lightgrey";
    chart.Axes[YAxis].MinorGridlines.Line.Color = "#EEEEEE";
    chart.Axes[YAxis].HasTickLabels = true;

    #region date axis (X Axis)
    chart.Axes[XAxis].HasMajorGridlines = true;
    chart.Axes[XAxis].MajorGridlines.Line.Color = "lightgrey";
    chart.Axes[XAxis].HasMinorGridlines = false;
    chart.Axes[XAxis].HasTitle = true;
    chart.Axes[XAxis].Title.Caption = "Date";

    #region value axis (Y2 Axis)
    seriesY2 = chart.SeriesCollection.Add(0);
    seriesY2.Type = ChartChartTypeEnum.chChartTypeLine;
    seriesY2.SetData( ChartDimensionsEnum.chDimValues,
    Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), y2Array );
    seriesY2.Caption = "This is the Y2-axis";
    seriesY2.Line.Color = "#CE0000";

    axis2 =
    axis2.Scaling.Minimum = 0;
    axis2.HasMajorGridlines = false;
    axis2.Position = ChartAxisPositionEnum.chAxisPositionRight;
    axis2.HasTitle = true;
    axis2.Title.Caption = "Y2 caption";


Some related links: MSDN Office Web Components Constants

There are probarly some other, better, controls out there.