Skip to content

Pie Chart

Hapaxia edited this page Feb 20, 2025 · 4 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({ 200u, 200u }), "Pie Chart simple example");
    sw::PieChart pieChart;
    pieChart.slices.resize(3);
    pieChart.slices[0u].color = sf::Color::Red;
    pieChart.slices[1u].color = sf::Color::Green;
    pieChart.slices[2u].color = sf::Color::Blue;
    pieChart.slices[0u].size = 0.65f;
    pieChart.slices[1u].size = 0.075f;
    pieChart.slices[2u].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())
    {
        while (const auto event{ window.pollEvent() }) if (event->is<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({ 200u, 200u }), "Pie Chart simple example with explosion");
    sw::PieChart pieChart;
    pieChart.slices.resize(3);
    pieChart.slices[0u].color = sf::Color::Red;
    pieChart.slices[1u].color = sf::Color::Green;
    pieChart.slices[2u].color = sf::Color::Blue;
    pieChart.slices[0u].size = 0.65f;
    pieChart.slices[1u].size = 0.075f;
    pieChart.slices[2u].size = 0.275f;
    pieChart.slices[1u].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())
    {
        while (const auto event{ window.pollEvent() }) if (event->is<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({ 200u, 200u }), "Pie Chart simple example with scale");
    sw::PieChart pieChart;
    pieChart.slices.resize(11u);
    for (std::size_t slice{ 0 }; slice < pieChart.slices.size(); ++slice)
    {
        pieChart.slices[slice].size = 1.f / pieChart.slices.size();
        switch (slice % 3u)
        {
        case 2u:
            pieChart.slices[slice].color = sf::Color::Green;
            pieChart.slices[slice].scale = 1.f;
            break;
        case 1u:
            pieChart.slices[slice].color = sf::Color::Blue;
            pieChart.slices[slice].scale = 0.75f;
            break;
        case 0u:
        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())
    {
        while (const auto event{ window.pollEvent() }) if (event->is<sf::Event::Closed>()) window.close();
        window.clear();
        window.draw(pieChart);
        window.display();
    }
    return EXIT_SUCCESS;
}

The code above displays:
Polar Area Diagram

(Pie Chart v1.0)