Skip to content

Pie Chart

Hapax edited this page Jan 5, 2016 · 3 revisions

Introduction

A class to draw a pie chart. Slices can be any size (ratio to whole pie) and sf::Color. Slices can be exploded (separated from the pie and offset from its centre) individually. Slices can be scaled (from the centre - can be used to create polar area diagrams)

Usage

Declaration

sw::PieChart pieChart;
creates a Pie Chart with the default size (32x32)

Drawing

This class inherits from sf::Drawable so it is drawn in the same way as all SFML drawables:
window.draw(pieChart);
where window is an sf::RenderWindow.

Transformations

This class inherits from sf::Transformable so it has all the usual SFML transformations available.

Manipulation

Slices

There is a public member in the class called slices, which is a vector of slice that represents how each slice of the Pie Chart should be. A single slice contains:

  • size
    float value representing the size of the slice. This is measured in a ratio to the whole pie. For example, a slice that is a quarter of the pie would be size 0.25. The default value is 0.1, which is a tenth of the pie

  • scale
    float value representing the scale of the slice. The slice is scaled from its point (at the centre of the pie). The default scale is 1

  • explode
    float value representing the distance that the slice should be offset from its point (at the centre of the pie). This is measured in lengths-of-slice so an explode value of 1 would cause the slice's point to move from the centre of the pie to where the outer edge of the slice would have been. The default value is 0

  • color
    sf::Color representing the colour of the slice. The default colour is opaque white

Visual Representation

  • update()
    updates the visual representation of the Pie Chart from the current state of the slices vector and its current size (see setSize below)

  • setSize(sf::Vector2f)
    sets the size of the Pie Chart's frame (the circle/ellipse when entire chart is covered, all slices are at scale of 1 and there are no explosions)

  • setRadius(float)
    sets the radius of the circular frame of the Pie Chart (see setSize above). This effectively sets the length of each slice (at scale 1)

  • setDiameter(float)
    sets the diameter of the circular frame of the Pie Chart (see setSize above)

Information

  • getSize()
    returns an sf::Vector2f of the size of the Pie Chart's frame (see setSize above)

  • getLocalBounds()
    returns an sf::FloatRect that contains all of the vertices (before any SFML transformations)

  • getGlobalBounds()
    returns an sf::FloatRect that contains all of the vertices (after any SFML transformations)

Simple Examples

Standard Pie Chart

#include <SFML/Graphics.hpp>
#include <SelbaWard/PieChart.hpp>
int main()
{
    sf::RenderWindow window(sf::VideoMode(200, 200), "Pie Chart simple example");
    sw::PieChart pieChart;
    pieChart.slices.resize(3);
    pieChart.slices[0].color = sf::Color::Red;
    pieChart.slices[1].color = sf::Color::Green;
    pieChart.slices[2].color = sf::Color::Blue;
    pieChart.slices[0].size = 0.65f;
    pieChart.slices[1].size = 0.075f;
    pieChart.slices[2].size = 0.275f;
    pieChart.setSize({ 150.f, 150.f });
    pieChart.update();
    pieChart.setOrigin(pieChart.getSize() / 2.f);
    pieChart.setPosition(window.getView().getCenter());
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }
        window.clear();
        window.draw(pieChart);
        window.display();
    }
    return EXIT_SUCCESS;
}

The code above displays:
Standard Pie Chart

Exploded Pie Chart

#include <SFML/Graphics.hpp>
#include <SelbaWard/PieChart.hpp>
int main()
{
    sf::RenderWindow window(sf::VideoMode(200, 200), "Pie Chart simple example with explosion");
    sw::PieChart pieChart;
    pieChart.slices.resize(3);
    pieChart.slices[0].color = sf::Color::Red;
    pieChart.slices[1].color = sf::Color::Green;
    pieChart.slices[2].color = sf::Color::Blue;
    pieChart.slices[0].size = 0.65f;
    pieChart.slices[1].size = 0.075f;
    pieChart.slices[2].size = 0.275f;
    pieChart.slices[1].explode = 0.3f;
    pieChart.setSize({ 150.f, 150.f });
    pieChart.update();
    pieChart.setOrigin(pieChart.getSize() / 2.f);
    pieChart.setPosition(window.getView().getCenter());
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }
        window.clear();
        window.draw(pieChart);
        window.display();
    }
    return EXIT_SUCCESS;
}

The code above displays:
Exploded Pie Chart

Polar Area Diagram

#include <SFML/Graphics.hpp>
#include <SelbaWard/PieChart.hpp>
int main()
{
    sf::RenderWindow window(sf::VideoMode(200, 200), "Pie Chart simple example with scale");
    sw::PieChart pieChart;
    pieChart.slices.resize(11);
    for (unsigned int slice{ 0 }; slice < pieChart.slices.size(); ++slice)
    {
        pieChart.slices[slice].size = 1.f / pieChart.slices.size();
        switch (slice % 3)
        {
        case 2:
            pieChart.slices[slice].color = sf::Color::Green;
            pieChart.slices[slice].scale = 1.f;
            break;
        case 1:
            pieChart.slices[slice].color = sf::Color::Blue;
            pieChart.slices[slice].scale = 0.75f;
            break;
        case 0:
        default:
            pieChart.slices[slice].color = sf::Color::Red;
            pieChart.slices[slice].scale = 0.5f;
        }
    }
    pieChart.setSize({ 150.f, 150.f });
    pieChart.update();
    pieChart.setOrigin(pieChart.getSize() / 2.f);
    pieChart.setPosition(window.getView().getCenter());
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }
        window.clear();
        window.draw(pieChart);
        window.display();
    }
    return EXIT_SUCCESS;
}

The code above displays:
Polar Area Diagram