System.Web.UI.DataVisualization.Charting and Rangebar chart integration

Question

By using following code my chart looks like following image after code.

My question is now the bar and y axis points are not aligned correctly.

How do i show range bar and its corresponding y axis values in the same line?

List<dummyGraph> objGraphList = new List<dummyGraph>();
        dummyGraph objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Underwriter";
        objDummyGraph.min = 1;
        objDummyGraph.max = 8;
        objDummyGraph.Median = 1;
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = 2;
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = 3;
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = 3;
        objGraphList.Add(objDummyGraph);

        System.Web.UI.DataVisualization.Charting.Chart chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
        System.Web.UI.DataVisualization.Charting.ChartArea chartArea1 = new System.Web.UI.DataVisualization.Charting.ChartArea();
        System.Web.UI.DataVisualization.Charting.Legend legend1 = new System.Web.UI.DataVisualization.Charting.Legend();
        System.Web.UI.DataVisualization.Charting.Series seriesInstance;
        List<System.Web.UI.DataVisualization.Charting.Series> seriesList = new List<System.Web.UI.DataVisualization.Charting.Series>();

        int xordinal = 0;

        foreach (var i in objGraphList)
        {
            seriesInstance = new System.Web.UI.DataVisualization.Charting.Series(i.TKFEType);

            seriesInstance.ChartType = SeriesChartType.RangeBar;
            seriesInstance.Color = Color.SkyBlue;
            seriesInstance.YValuesPerPoint = 2;
            seriesInstance.AxisLabel = i.TKFEType;

            double yplot1 = (double)i.min;
            double yplot2 = (double)i.max;

            seriesInstance.IsValueShownAsLabel = true;

            xordinal = xordinal + 1;
            seriesInstance.Points.AddXY(xordinal, yplot1, yplot2);                

            chart1.Series.Add(seriesInstance);
        }

        chart1.ChartAreas.Add(chartArea1);
        chart1.ChartAreas[0].AxisY.Interval = 1;

        chartArea1 = chart1.ChartAreas[0];

        chartArea1.AxisY.IsStartedFromZero = true;
        chartArea1.AxisY.Enabled = AxisEnabled.False;


        chartArea1.AlignmentOrientation = AreaAlignmentOrientations.All;

        using (MemoryStream ms = new MemoryStream())
        {
            chart1.SaveImage(ms, ChartImageFormat.Png);
            return File(ms.ToArray(), "image/png");
        }

Spline Graph doubt

I have a spline graph. I need to show stright lines from x (Eg: Underwriter) to y (Eg: 200) as shown in the following figure. How do i do it?

UPDATED CODE:

  public ActionResult MMBRChart()
    {
        //Area for generating line chart
        List<dummyGraph> objGraphList = new List<dummyGraph>();
        dummyGraph objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Underwriter";
        objDummyGraph.min = 1;
        objDummyGraph.max = 8;
        objDummyGraph.Median = "201";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "187";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "243";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "200";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Auditor";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "29";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Associate";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "198";
        objGraphList.Add(objDummyGraph);

        System.Web.UI.DataVisualization.Charting.Chart chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
        System.Web.UI.DataVisualization.Charting.Chart lineChart1 = new System.Web.UI.DataVisualization.Charting.Chart();
        System.Web.UI.DataVisualization.Charting.ChartArea chartArea1 = new System.Web.UI.DataVisualization.Charting.ChartArea();
        System.Web.UI.DataVisualization.Charting.ChartArea linechartArea1 = new System.Web.UI.DataVisualization.Charting.ChartArea("lineChart");
        System.Web.UI.DataVisualization.Charting.Legend legend1 = new System.Web.UI.DataVisualization.Charting.Legend();
        System.Web.UI.DataVisualization.Charting.Series seriesInstance = new Series();

        chart1.Titles.Add("Median MBR");//Add chart title 
        chart1.Series.Add(seriesInstance);
        chart1.Series[0].Points.DataBindXY(objGraphList.Select(x => x.TKFEType).ToList(), objGraphList.Select(x => x.Median).ToList());
        chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Spline;
        chart1.Series[0].Color = Color.SkyBlue;
        chart1.Series[0].BorderWidth = 2;
        chart1.Series[0].MarkerStyle = MarkerStyle.Circle;
        chart1.Series[0].MarkerColor = Color.Blue;
        chart1.Series[0].Name = "MyGraph";

        seriesInstance = new System.Web.UI.DataVisualization.Charting.Series("lineSeries");
        //seriesInstance.ChartType = SeriesChartType.Bar;//Set chart type here
        seriesInstance.Color = Color.SkyBlue;
        seriesInstance.YValuesPerPoint = 2;

        chart1.Series.Add(seriesInstance);

        int j = 0;

        foreach (var p in objGraphList)
        {
            //chart1.Series[1].Points.AddXY(j, p.max);
            j = j + 1;
            chart1.Series[1].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;
            chart1.Series[1].Points.AddXY(p.TKFEType, p.Median);
            chart1.Series[1].Color = Color.Green;
            chart1.Series[1].BorderWidth = 2;
            chart1.Series[1].ToolTip = "#VALY, #VALX";
        }


        chart1.ChartAreas.Add(chartArea1);

        chart1.ChartAreas[0].Area3DStyle.Enable3D = false;
        chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.FromArgb(50, 200, 200, 200);
        chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.FromArgb(50, 200, 200, 200);

        using (MemoryStream ms = new MemoryStream())
        {
            chart1.SaveImage(ms, ChartImageFormat.Png);
            return File(ms.ToArray(), "image/png");
        }
    }

score 1 · Accepted Answer · answered Aug 18 '15 at 18:24

1

You're adding multiple series to your chart. Not sure that was your intention. Also, you're using TKFEType as a label, and not as the actual value for the axis. These factors combined are probably mis-aligning your chart. Here's my suggestion how to do it:

        List<DummyGraph> list1 = new List<DummyGraph>();
        list1.Add(new DummyGraph { TKFEType = "Underwritter", Min = 1, Max = 8, Median = 1 });
        list1.Add(new DummyGraph { TKFEType = "Construction", Min = 2, Max = 5, Median = 2 });
        list1.Add(new DummyGraph { TKFEType = "Design", Min = 3, Max = 6, Median = 3 });
        list1.Add(new DummyGraph { TKFEType = "Partner", Min = 4, Max = 6, Median = 4 });

        Chart1.DataSource = list1;
        Chart1.Series[0].XValueMember = "TKFEType";
        Chart1.Series[0].YValueMembers = "Min, Max";
        Chart1.DataBind();

answered Aug 18 '15 at 18:24

jsanalytics

13,058
4
22
43

That was beautifully explained beautyfull answer, Thanks a lot :) it worked. Need one more chart to integrate, will come up with new questions jstreet ;) – Nithin Paul Aug 19 '15 at 04:32
I have one more doubt on this. Do you have any idea on how to show min and max values at each end of my bar? For example on my Underwriter bar i need to show min value at the start and max value at the end. – Nithin Paul Aug 19 '15 at 04:34
Thank you for the green check ! The closest thing i know you could do would be to put the min/max in the label. i tried that but it is picking the wrong values... Also you could make your axis label and grid lines match the start and end of each point in your series, but that's not very robust. I'll let you know in case i can think of something. Thanks again ! – jsanalytics Aug 19 '15 at 07:03
jstreet ok will wait here for reply. can you also check my updated question and area "Spline Graph doubt" do you know how to do it? – Nithin Paul Aug 19 '15 at 09:40
Can you also check my updated question and area "Spline Graph doubt" do you know how to do it? – Nithin Paul Aug 19 '15 at 12:32
I'm going to look into the spline chart once i have a chance. You could add a second vertical bar series together with the spline series and make the bars as thin as possible, to look like a line. I think you should post it as a brand new question so there's a good chance someone else would answer it for you. – jsanalytics Aug 19 '15 at 13:11
But one thing i need to mention is i was able to add line chart and spline chart together in one chart area. But when i add bar chart i am getting error as "Chart Area Axes - The chart area contains incompatible chart types. For example, bar charts and column charts cannot exist in the same chart area." – Nithin Paul Aug 20 '15 at 04:19
I was able to get the spline and a bar chart together. Which ones did you use? – jsanalytics Aug 20 '15 at 04:34
1

Sorry, use `SeriesChartType.Column`, not `SeriesChartType.Bar` – jsanalytics Aug 20 '15 at 05:12
Ok now that worked, also do you know how to reduce the size of that bars? – Nithin Paul Aug 20 '15 at 05:13
That's the problem...:O) I was "sure" it would be possible to make the bars narrower, but... couldn't do it. – jsanalytics Aug 20 '15 at 05:16
1

Ok i got it jstreet i used chart1.Series[1]["PixelPointWidth"] = "5"; and bar size reduced :) – Nithin Paul Aug 20 '15 at 05:17
Now the only thing i need to find out is How to show Start and End value on my Range bar chart :( – Nithin Paul Aug 20 '15 at 05:18
Ah, well done ! As for the Start/End date, i had used this: `Label="#VAL, #VALY1"`. However it gets always the same value for each one of the range bars.... I expected to get the min/max for each bar but it didn't... – jsanalytics Aug 20 '15 at 05:27
mmm yes but the value will only come in the middle of the bar. Need to find another solution. :( – Nithin Paul Aug 20 '15 at 05:33
There's something called `Annotations` but i've never used it before. – jsanalytics Aug 20 '15 at 05:42
I found this article, in this they have showed start and end with dates, but dont know how did they achieved it. https://crmchartguy.wordpress.com/category/barchart/ – Nithin Paul Aug 20 '15 at 08:25
i have one more issue now. when ever i have records more than 10 the design breaks it is now looks like http://stackoverflow.com/questions/32223834/how-to-align-labels-properly-using-system-web-ui-datavisualization-charting – Nithin Paul Aug 26 '15 at 12:26

System.Web.UI.DataVisualization.Charting and Rangebar chart integration

1 Answers1