Chart for WinForms Tutorials / Multiple Charts Tutorial
In This Topic
Multiple Charts Tutorial
In This Topic

This section provides step-by-step instructions for programatically adding a Bar and XYPlot chart on the C1Chart control. The graph shows the Bar chart with a y-axis that represents the double values for the average precipitation and the x-axis that represents string values for each month from March till August. The XYPlot chart has a y2-axis that represents the double values for the average high temperature for each month from March till August and the x-axis that represents string values for each month from March till August.

The following chart illustration is shown before you begin creating the chart:

Multiple charts can be created programmatically using the following steps:

  1. Add the following directive to declare the C1.Win.C1Chart namespace:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    Imports C1.Win.C1Chart
    

    To write code in C#

    C#
    Copy Code
    using C1.Win.C1Chart;
    
  2. Double click Form1 and add the following code in the Form1_Load procedure to create the multiple charts:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    Private Sub Form1_Load(sender As Object, e As EventArgs)
        Dim cgroup As ChartGroup = c1Chart1.ChartGroups.Group0
        cgroup.ChartType = Chart2DTypeEnum.Bar
        'input the data through the series collection
        Dim cdsc As ChartDataSeriesCollection = cgroup.ChartData.SeriesList
        cdsc.Clear()
            
        'remove default data
        'create the series object from the collection and add data
        Dim cds As ChartDataSeries = cdsc.AddNewSeries()
        ' Add Data for ChartGroup0, Bar chart
        Dim MonthNames As String() = {"March", "April", "May", "June", "July", "August"}
        Dim AvgPrecip As Double() = {3.17, 3.01, 3.8, 4.12, 3.96, 3.38}
            
        'create a label for the Bar chart data series
        cds.Label = "Avg. Precip"
        'Use the CopyDataIn method of the ChartDataArray object to copy the X and Y value data into the data series
        cds.X.CopyDataIn(MonthNames)
        cds.Y.CopyDataIn(AvgPrecip)
        'create variable for chart area
            
        Dim carea As C1.Win.C1Chart.Area = c1Chart1.ChartArea
        'Set axes titles for the ChartGroup0 (Bar)
        carea.AxisX.Text = "Month"
        carea.AxisY.Text = "Avg. Precip (in)"
        'create and add the data for the XY chart in Group1
        Dim cgroup2 As ChartGroup = c1Chart1.ChartGroups.Group1
        cgroup2.ChartType = Chart2DTypeEnum.XYPlot
        'input the bar chart data of group1 through the series collection
        Dim cdsc2 As ChartDataSeriesCollection = cgroup2.ChartData.SeriesList
        'create the series object from the second collection and add data
        Dim cds2 As ChartDataSeries = cdsc2.AddNewSeries()
        cds2.X.CopyDataIn(MonthNames)
        cds2.Y.CopyDataIn(New Double() {49.5, 60.7, 70.8, 79.1, 82.7, 81.1})
        cds2.Label = "Avg. High Temp"
            
        'customize axes
        'create new font for the X, Y and Y2 axes
        Dim f As New Font("Arial", 10)
        carea.AxisX.Font = f
        carea.AxisY.Font = f
        carea.AxisX.ForeColor = Color.SteelBlue
        carea.AxisY.ForeColor = Color.SteelBlue
        carea.AxisY2.ForeColor = Color.SteelBlue
        carea.AxisY2.Font = f
            
        'Set axes titles for the ChartGroup1 (XYPlot)
        carea.AxisY2.Text = "Avg. High Temp (F)"
        'set axis bounds
        carea.AxisY.Min = 2.75
        carea.AxisY2.Min = 30
        carea.AxisY2.Max = 90
        carea.AxisY.UnitMinor = 0.25
            
        'rotate the axis X annotation
        carea.AxisX.AnnotationRotation = 60
            
        'add legend
        c1Chart1.Legend.Visible = True
            
        'add header
        c1Chart1.Header.Visible = True
        c1Chart1.Header.Text = "Pittsburgh Spring and Summer Season"
            
        'add visual effects
        Dim s As Style = carea.Style
        s.ForeColor = Color.White
        s.BackColor = Color.LightBlue
        s.BackColor2 = Color.Azure
        s.GradientStyle = GradientStyleEnum.Radial
        c1Chart1.ColorGeneration = ColorGeneration.Flow
    End Sub
    

    To write code in C#

    C#
    Copy Code
    private void Form1_Load(object sender, EventArgs e)
    {
            ChartGroup cgroup = c1Chart1.ChartGroups.Group0;
            cgroup.ChartType = Chart2DTypeEnum.Bar;
            //input the data through the series collection
            ChartDataSeriesCollection cdsc = cgroup.ChartData.SeriesList;
            cdsc.Clear();
            
            //remove default data
            //create the series object from the collection and add data
            ChartDataSeries cds = cdsc.AddNewSeries();    
            // Add Data for ChartGroup0, Bar chart
            string[] MonthNames = { "March", "April", "May", "June", "July", "August" };
            double[] AvgPrecip = { 3.17, 3.01, 3.80, 4.12, 3.96, 3.38};   
            //create a label for the Bar chart data series
            cds.Label = "Avg. Precip";
            //Use the CopyDataIn method of the ChartDataArray object to copy the X and Y value data into the data series
            cds.X.CopyDataIn(MonthNames);
            cds.Y.CopyDataIn(AvgPrecip);   
            
            //create variable for chart area
            C1.Win.C1Chart.Area carea = c1Chart1.ChartArea;
            //Set axes titles for the ChartGroup0 (Bar)
            carea.AxisX.Text = "Month";
            carea.AxisY.Text = "Avg. Precip (in)";
            //create and add the data for the XY chart in Group1
            ChartGroup cgroup2 = c1Chart1.ChartGroups.Group1;
            cgroup2.ChartType = Chart2DTypeEnum.XYPlot;
            //input the bar chart data of group1 through the series collection
            ChartDataSeriesCollection cdsc2 = cgroup2.ChartData.SeriesList;   
            //create the series object from the second collection and add data
            ChartDataSeries cds2 = cdsc2.AddNewSeries();
            cds2.X.CopyDataIn(MonthNames);
            cds2.Y.CopyDataIn(new double[] { 49.5, 60.7, 70.8, 79.1, 82.7, 81.1});
            cds2.Label = "Avg. High Temp";
            
            //customize axes
            //create new font for the X, Y and Y2 axes
            Font f = new Font("Arial", 10);
            carea.AxisX.Font = f;
            carea.AxisY.Font = f;
            carea.AxisX.ForeColor = Color.SteelBlue;
            carea.AxisY.ForeColor = Color.SteelBlue;
            carea.AxisY2.ForeColor = Color.SteelBlue;
            carea.AxisY2.Font = f;  
            //Set axes titles for the ChartGroup1 (XYPlot)
            carea.AxisY2.Text = "Avg. High Temp (F)";    
            //set axis bounds
            carea.AxisY.Min = 2.75;
            carea.AxisY2.Min = 30;
            carea.AxisY2.Max = 90;
            carea.AxisY.UnitMinor = .25;  
            
            //rotate the axis X annotation
            carea.AxisX.AnnotationRotation = 60;   
            //add legend
            c1Chart1.Legend.Visible = true;   
            
            //add header
            c1Chart1.Header.Visible = true;
            c1Chart1.Header.Text = "Pittsburgh Spring and Summer Season";  
            
            //add visual Effects
            Style s = carea.Style;
            s.ForeColor = Color.White;
            s.BackColor = Color.LightBlue;
            s.BackColor2 = Color.Azure;
            s.GradientStyle = GradientStyleEnum.Radial;
            c1Chart1.ColorGeneration = ColorGeneration.Flow;
    }
    
See Also