Mou
Mou

Reputation: 16312

MSChart: line chart UI does not look proper

I was trying to generate winform line chart from data table but UI does not look good.

see the UI

enter image description here

also see my full sample code. I believe I am missing something in code for which chart UI does not look good. I do not understand for what reason a white box is coming in chart?

please see my full code and tell me what I need to add or rectify in my code.

code

   private void show()
        {
            DataRow dr = null;
            DataTable dt = new DataTable();
            dt.Columns.Add("Date", typeof(DateTime));
            dt.Columns.Add("data", typeof(Int32));
            dt.Columns.Add("CountryCode", typeof(string));

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("01/01/2017");
            dr[1] = 03;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("02/01/2017");
            dr[1] = 09;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("03/01/2017");
            dr[1] = 15;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("04/01/2017");
            dr[1] = 22;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("05/01/2017");
            dr[1] = 13;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("06/01/2017");
            dr[1] = 22;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("07/01/2017");
            dr[1] = 07;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("08/01/2017");
            dr[1] = 11;
            dr[2] = "GB";
            dt.Rows.Add(dr);


            Chart1.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss;
            //Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
            Chart1.BorderlineWidth = 3;
            Chart1.BackColor = Color.NavajoWhite;

            Chart1.ChartAreas.Add("chtArea");
            Chart1.ChartAreas[0].AxisX.Title = "Category Name";
            Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].AxisY.Title = "UnitPrice";
            Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
            Chart1.ChartAreas[0].BorderWidth = 2;

            Chart1.Legends.Add("UnitPrice");
            Chart1.Series.Add("UnitPrice");
            //Chart1.Series[0].Palette = ChartColorPalette.Bright;
            Chart1.Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
            Chart1.Series[0].Points.DataBindXY(dt.DefaultView, "Date", dt.DefaultView, "Data");

            //Chart1.Series[0].IsVisibleInLegend = true;
            Chart1.Series[0].IsValueShownAsLabel = true;
            Chart1.Series[0].ToolTip = "Data Point Y Value: #VALY{G}";

            // Setting Line Width
            Chart1.Series[0].BorderWidth = 3;
            Chart1.Series[0].Color = Color.Red;

            // Setting Line Shadow
            //Chart1.Series[0].ShadowOffset = 5;

            //Legend Properties
            Chart1.Legends[0].LegendStyle = System.Windows.Forms.DataVisualization.Charting.LegendStyle.Table;
            Chart1.Legends[0].TableStyle = System.Windows.Forms.DataVisualization.Charting.LegendTableStyle.Wide;
            Chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
            Chart1.Width = 488;
            Chart1.Height = 345;
        }

Thanks

Upvotes: 2

Views: 248

Answers (2)

Mou
Mou

Reputation: 16312

issue solved. this line causing problem Chart1.ChartAreas.Add("chtArea"); so i removed this line.

my fresh code

    private void show()
    {
        DataRow dr = null;
        DataTable dt = new DataTable();
        dt.Columns.Add("Date", typeof(DateTime));
        dt.Columns.Add("data", typeof(Int32));
        dt.Columns.Add("CountryCode", typeof(string));

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("01/01/2017");
        dr[1] = 30;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("02/01/2017");
        dr[1] = 09;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("03/01/2017");
        dr[1] = 15;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("04/01/2017");
        dr[1] = 22;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("05/01/2017");
        dr[1] = 13;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("06/01/2017");
        dr[1] = 22;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("07/01/2017");
        dr[1] = 07;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("08/01/2017");
        dr[1] = 11;
        dr[2] = "GB";
        dt.Rows.Add(dr);


        //Chart1.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss;
        ////Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
        //Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
        //Chart1.BorderlineWidth = 3;
        //Chart1.BackColor = Color.NavajoWhite;
        //Chart1.ChartAreas.Add("chtArea");
        Chart1.ChartAreas[0].AxisX.Title = "NPS Dates";
        Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -60;

        Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
        Chart1.ChartAreas[0].AxisY.Title = "NPS Values";
        Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
        Chart1.ChartAreas[0].BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
        Chart1.ChartAreas[0].BorderWidth = 2;

        //Chart1.Legends.Add("UnitPrice");
        //Chart1.Series.Add("UnitPricexxx");
        //Chart1.Series[0].Palette = ChartColorPalette.Bright;
        Chart1.Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
        Chart1.Series[0].Points.DataBindXY(dt.DefaultView, "Date", dt.DefaultView, "Data");

        //Chart1.Series[0].IsVisibleInLegend = true;
        Chart1.Series[0].IsValueShownAsLabel = true;
        Chart1.Series[0].ToolTip = "Data Point Y Value: #VALY{G}";

        // Setting Line Width
        Chart1.Series[0].BorderWidth = 3;
        Chart1.Series[0].Color = Color.Red;

        // Setting Line Shadow
        //Chart1.Series[0].ShadowOffset = 5;

        //Legend Properties
        Chart1.Legends[0].LegendStyle = System.Windows.Forms.DataVisualization.Charting.LegendStyle.Table;
        Chart1.Legends[0].TableStyle = System.Windows.Forms.DataVisualization.Charting.LegendTableStyle.Wide;
        Chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
        Chart1.Width = 488;
        Chart1.Height = 345;
    }

Upvotes: 0

TaW
TaW

Reputation: 54453

A Chart comes with a few default elements, like a ChartArea, a Series and a Legend.

If you want to create a ChartArea of your own, why not clear the default ChartArea first? Chart1.ChartAreas.Clear(); Then (and only then) your will actually access your newly created one with the Chart1.ChartAreas[0] references.

I also suggest to use short and nicely named references to Series, ChartAreas etc..:

ChartArea chtArea = Chart1.ChartAreas.Add("chtArea");

Series unitPrice = Chart1.Series.Add("UnitPrice");

This makes the code more compact and clearer..

Upvotes: 2

Related Questions