Page 1 of 1

bullet graph

Posted: Fri Apr 23, 2010 10:55 pm
by 15654268
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 8450 times

Re: bullet graph

Posted: Mon Apr 26, 2010 7:59 am
by yeray
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.

Re: bullet graph

Posted: Tue Apr 27, 2010 10:05 am
by 15654268
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 8425 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 8426 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.

Re: bullet graph

Posted: Tue Apr 27, 2010 4:02 pm
by yeray
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());
        }