Skip to content
A set of C++ classes for generating HTML5 graphs using the Javascript Canvas API.
C++ CMake
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cmake_modules
include
src
.gitignore
CMakeLists.txt
LICENSE.md
README.md
main.cpp

README.md

HTML5 Canvas Graph Generator

A set of C++ classes for generating Javascript which can be rendered browsers into graphs, using the HTML5 Canvas API.

Note: This project is not very old, or mature, at all, and so its functionality is very limited. Though hopefully that will change with time. At the moment, only line graphs with a set style are supported, but I plan to add support for bar charts and PIE charts in time, along with more options, and customisable style.

Examples

Line Chart

Example Graph 1

HTMLLineChart chart;
chart.set_size(600, 500);
chart.set_increment(2, 2);

chart.set_x_index_strings({"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"});
chart.add_point({"Monday", 1});
chart.add_point({"Tuesday", 0});
chart.add_point({"Wednesday", 2});
chart.add_point({"Thursday", 3});
chart.add_point({"Friday", 1});
chart.add_point({"Saturday", 5});
chart.add_point({"Sunday", 2});

chart.set_title("Cookie Consumption");
chart.set_x_label("Cookies Eaten");
chart.set_y_label("Day");

Another Line Chart

Example Graph 2

HTMLLineChart chart;
chart.set_size(600, 500);
chart.set_increment(50, 10);

for(uint32_t a = 0; a < 600; a += 20)
    chart.add_point({a, 40 + rand() % 3 + 1});

chart.set_title("GPU Temperature");
chart.set_x_label("Frame Number");
chart.set_y_label("Temperature (c)");

Bar Chart

Example Graph 2

HTMLBarChart chart;
chart.set_size(600, 500);
chart.set_increment(1, 1);

chart.add_point({"Monday", 2, HTMLGraph::Colour(249, 199, 168)});
chart.add_point({"Tuesday", 3, HTMLGraph::Colour(243, 154, 155)});
chart.add_point({"Wednesday", 1, HTMLGraph::Colour(236, 110, 141)});
chart.add_point({"Thursday", 0});
chart.add_point({"Friday", 5, HTMLGraph::Colour(169,55,144)});
chart.add_point({"Saturday", 6, HTMLGraph::Colour(123,35,151)});
chart.add_point({"Sunday", 2, HTMLGraph::Colour(92,24,134)});

chart.set_x_index_strings({"Monday", "Tuesday", "Wednesday", "Thursday", "Friday"                                                                                                                                                                                 , "Saturday", "Sunday"});

chart.set_title("Distance Ran");
chart.set_x_label("Day");
chart.set_y_label("Miles");
You can’t perform that action at this time.