Chart Director - Box-Whisker Chart

(4 posts) (2 voices)
  1. ajdjackson, Member


    and a Happy New Year.

    Any chance of adding a Box-Whisker type chart?

    What I would like to do is to graph the max/min/average value of bank account balance by month.

    I'll have a look at adding it as an extension but some of it looks 'Greek' to me :)



  2. myDBR Team, Key Master

    Sure, we'll take a look at it.

    myDBR Team

  3. ajdjackson, Member


    I've had a go at creating an extension and it works (up to a point). I decided to create a floating box chart.

    I've a couple of queries:

    As you can see I've had to hard-code the data. I don't know how I can loop it into the array.

    The chart doesn't follow the size as defined in $this->c = new XYChart(450, 400);. I get a chart that is full width and very tall.

    I can't work out how to define a numeric format for the y-axis label eg I need 2,000 instead of 2000.

    Any help is much appreciated.



    select 'dbr.echart', 'boxwhisker', 'Monthly Max/Min Balances';

    select a.period as 'Month', max(a.val)/1000 as 'Balance, £,000s', min(a.val)/1000 from maxmin_tmp a join periods_tmp b on a.period = b.period_desc group by a.period order by b.period;

    // Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd quartile // and maximum values of some quantities //$this->Q0Data = array(40, 45, 40, 30, 20, 50, 25, 44); //$this->Q1Data = array(55, 60, 50, 40, 38, 60, 51, 60); //$this->Q2Data = array(62, 70, 60, 50, 48, 70, 62, 70); //$this->Q3Data = array(70, 80, 65, 60, 53, 78, 69, 76); //$this->Q4Data = array(80, 90, 75, 70, 60, 85, 80, 84); $this->Q1Data = array($this->dataIn[0][1],$this->dataIn[1][1], $this->dataIn[2][1], $this->dataIn[3][1], $this->dataIn[4][1], $this->dataIn[5][1], $this->dataIn[6][1], $this->dataIn[7][1], $this->dataIn[8][1], $this->dataIn[9][1], $this->dataIn[10][1], $this->dataIn[11][1], $this->dataIn[12][1], $this->dataIn[13][1], $this->dataIn[14][1], $this->dataIn[15][1], $this->dataIn[16][1], $this->dataIn[17][1], $this->dataIn[18][1], $this->dataIn[19][1], $this->dataIn[20][1], $this->dataIn[21][1], $this->dataIn[22][1], $this->dataIn[23][1], $this->dataIn[24][1]); $this->Q3Data = array($this->dataIn[0][2],$this->dataIn[1][2], $this->dataIn[2][2], $this->dataIn[3][2], $this->dataIn[4][2], $this->dataIn[5][2], $this->dataIn[6][2], $this->dataIn[7][2], $this->dataIn[8][2], $this->dataIn[9][2], $this->dataIn[10][2], $this->dataIn[11][2], $this->dataIn[12][2], $this->dataIn[13][2], $this->dataIn[14][2], $this->dataIn[15][2], $this->dataIn[16][2], $this->dataIn[17][2], $this->dataIn[18][2], $this->dataIn[19][2], $this->dataIn[20][2], $this->dataIn[21][2], $this->dataIn[22][2], $this->dataIn[23][2], $this->dataIn[24][2]);

    // The labels for the chart $this->labels = array($this->dataIn[0][0],$this->dataIn[1][0], $this->dataIn[2][0], $this->dataIn[3][0], $this->dataIn[4][0], $this->dataIn[5][0], $this->dataIn[6][0], $this->dataIn[7][0], $this->dataIn[8][0], $this->dataIn[9][0], $this->dataIn[10][0], $this->dataIn[11][0], $this->dataIn[12][0], $this->dataIn[13][0], $this->dataIn[14][0], $this->dataIn[15][0], $this->dataIn[16][0], $this->dataIn[17][0], $this->dataIn[18][0], $this->dataIn[19][0], $this->dataIn[20][0], $this->dataIn[21][0], $this->dataIn[22][0], $this->dataIn[23][0], $this->dataIn[24][0]);

    // Create a XYChart object of size 450 x 400 pixels $this->c = new XYChart(450, 400);

    // Set the plotarea at (50, 30) and of size 380 x 340 pixels, with transparent background and border // and light grey (0xcccccc) horizontal grid lines $this->c->setPlotArea(50, 30, 380, 340, Transparent, -1, Transparent, 0xcccccc);

    // Add a title box using grey (0x555555) 18pt Arial font $this->title = $this->c->addTitle($this->options['dbr.echart']['name'], $this->title_font, '8em', 0x000000);

    $this->c->xAxis->setTitle("Period"); $this->c->yAxis->setTitle("Balance £,000s");

    // Set the x and y axis stems to transparent and the label font to 12pt Arial $this->c->xAxis->setColors(Transparent); $this->c->yAxis->setColors(Transparent); $this->c->xAxis->setLabelStyle("arial.ttf", 5,"black",90); $this->c->yAxis->setLabelStyle("arial.ttf", 5);

    // Set the labels on the x axis $this->c->xAxis->setLabels($this->labels);

    // For the automatic y-axis labels, set the minimum spacing to 30 pixels. $this->c->yAxis->setTickDensity(10);

    // Add a box whisker layer using light blue (0x99ccee) for the fill color and blue (0x6688aa) for the // whisker color. Set line width to 2 pixels. Use rounded corners and bar lighting effect. $this->b = $this->c->addBoxWhiskerLayer($this->Q3Data, $this->Q1Data, $this->Q4Data, $this->Q0Data, $this->Q2Data, 0x99ccee, 0x6688aa); $this->b->setLineWidth(2); $this->b->setRoundedCorners(); $this->b->setBorderColor(Transparent, barLighting());

    // Adjust the plot area to fit under the title with 10-pixel margin on the other three sides. $this->c->packPlotArea(10, $this->title->getHeight(), $this->c->getWidth() - 10, $this->c->getHeight() - 10);

  4. myDBR Team, Key Master

    you might want to save your effort elsewhere as we will be including the floating box chart into the next release alongside the box whisker chart.

    myDBR Team


You must log in to post.