bullet graph

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
Captell
Newbie
Newbie
Posts: 65
Joined: Fri Sep 18, 2009 12:00 am

bullet graph

Post by Captell » Fri Apr 23, 2010 10:55 pm

Hi there,
I'm trying to create a bullet graph (do a google serach on "bullet graph" and you will see what I want, I've included a screen shot from wiki below fyi). I've managet to create the basic layout by utilising a horizontal bar series with stacking=none so that they sit in front of each other. I create 3 horiz bars, for the backgroung qualitative ranges and one for the metric. For the metric bar I change the width so that it looks like a thick line. So far so good and easy to do. The bit I can't figure out how to do it the comarative measure which needs to be represented as a line or mark of some description at a single point along the horizontal bar, in the wiki screen shot the first graph the comparative measure is the small line seen around 265.

Firstly, any ideas on how this can be achieved?

Secondly, is it possible to have bullet graphs added as a series type?

Cheers.
Adrian.
bullet.png
bullet.png (196.48 KiB) Viewed 8988 times
Adrian Heald
Director
ITSM Reporting Services Pty Ltd
http://www.reportingservices.com

Yeray
Site Admin
Site Admin
Posts: 9614
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: bullet graph

Post by Yeray » Mon Apr 26, 2010 7:59 am

Hi Adrian,

Have you tried with the linear gauges?
Please take a look at the All Features\Welcome !\Chart styles\Gauges\Linear Gauge demo. You should find Features demo at TeeChart programs group.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Captell
Newbie
Newbie
Posts: 65
Joined: Fri Sep 18, 2009 12:00 am

Re: bullet graph

Post by Captell » Tue Apr 27, 2010 10:05 am

I have tried with the Linear gauge but I can't get the layout I need, I have an absolute requirement to replicate the horizontal bullet graphs as shown in the wiki, with the exception that I don't want to show the scale. With the linear gauge I can't get the 3 colour bands. Here is what I've go so far using 4 horizontal bars with stack set to none.
bulet.PNG
bulet.PNG (8.33 KiB) Viewed 8963 times
The first 3 horizontal bars are used to set up the colour qualatative bands, the third bar (Black) shows the value, I just set this to be a little thinner that the others, all I am missing in the vertical comparative metric.
I can add a fifth bar to show the comparative metric, but my client really wants a vertical marker not the line.
bulet2.PNG
bulet2.PNG (9.12 KiB) Viewed 8964 times
So any suggestions on how to get a vertical marker... or any marker at a specific point along the graph whoul dbe much appreciated.
Adrian Heald
Director
ITSM Reporting Services Pty Ltd
http://www.reportingservices.com

Yeray
Site Admin
Site Admin
Posts: 9614
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: bullet graph

Post by Yeray » Tue Apr 27, 2010 4:02 pm

Hi Captell,

Have you tried with custom labels? You can remove all your bottom axes labels and add only those you want. And you can hide the grid if you don't like it.
If you don't want even the axis horizontal line, I'm afraid you should draw your text directly to the canvas at OnAfterDraw method. Here it is an example of both possibilities:

Code: Select all

private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            
            Steema.TeeChart.Styles.HorizBar tmpBar;
            Random rnd = new Random();
            int nValues = 2;
            int nParts = 3;

            for (int i = 0; i < nParts+2; i++)
            {
                tmpBar = new Steema.TeeChart.Styles.HorizBar(tChart1.Chart);
                tmpBar.MultiBar = Steema.TeeChart.Styles.MultiBars.None;
                tmpBar.Marks.Visible = false;

                if (i < nParts)
                    for (int j = 0; j < nValues; j++)
                        tmpBar.Add(rnd.Next(10) + ((nValues - i + 1) * 10));
                else
                {
                    if (i == nParts)
                    {
                        tmpBar.CustomBarWidth = 20;
                        for (int j = 0; j < nValues; j++)
                            tmpBar.Add(rnd.Next((int)(tChart1[0].XValues[j])));
                    }
                    else
                    {
                        tmpBar.CustomBarWidth = 10;
                        for (int j = 0; j < nValues; j++)
                            tmpBar.Add(rnd.Next((int)(tChart1[tChart1.Series.Count-2].XValues[j])));
                    }
                }
            }

            tChart1.AfterDraw += new Steema.TeeChart.PaintChartEventHandler(tChart1_AfterDraw);
            tChart1.Draw();

            tChart1.Axes.Left.Automatic = false;
            tChart1.Axes.Left.MaximumOffset = 70;
            tChart1.Axes.Left.MinimumOffset = 70;
            tChart1.Axes.Left.Visible = false;

            tChart1.Axes.Bottom.RelativePosition = 70;
            tChart1.Axes.Bottom.Grid.Visible = false;
            tChart1.Axes.Bottom.Labels.Items.Add(tChart1[0].XValues[1]);
            tChart1.Axes.Bottom.Labels.Items.Add(tChart1[1].XValues[1]);
            tChart1.Axes.Bottom.Labels.Items.Add(tChart1[2].XValues[1]);
        }

        void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
        {
            int tmpLeft = tChart1[1].CalcXPos(0);
            int tmpTop = tChart1[1].CalcYPos(0) + 100;

            g.TextOut(tmpLeft, tmpTop, tChart1[1].XValues[0].ToString());
        }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply