Quick Start

Quick Start

This example creates a line chart through the public ChartKit API. A ChartKit chart is a QWidget, so it can be placed in a Qt layout, a page widget, or a Qt-UI container.

Include Headers

#include "UIGQLineChart.h"
#include "UIGQChartTheme.h"

For other chart types:

#include "UIGQBarChart.h"
#include "UIGQOpenGLPieChart.h"
#include "UIGQScatterChart.h"

Create the Chart

using namespace UIGQtLib;

auto* chart = new UIGQLineChart(parent);
chart->setMinimumSize(640, 360);
chart->setTitle("Monthly Orders");

Set Categories and Data

chart->setCategories({"Jan", "Feb", "Mar", "Apr", "May"});
chart->setSeries("Orders", {128, 152, 176, 163, 209}, QColor(35, 128, 224));

Theme and Interaction

chart->setThemePreset(kChartThemeMacarons);
chart->setLegendPosition(kChartLegendBottom);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);
chart->setAnimationEnabled(true);

Refresh Data

chart->setSeries("Orders", latestValues, QColor(35, 128, 224));
chart->restartAnimation();

Do not update the chart through internal QtCharts objects. Re-apply data through ChartKit setters.

Usage Guide

Usage Guide

ChartKit uses a "control + data structure + theme" model. Business code prepares categories, values, points, or slices, then passes them to the chart control.

Shared Base API

All current ChartKit controls inherit UIGQChartBase.

Data Entry Points

Recommended Flow

auto* chart = new UIGQBarChart(parent);

chart->setTitle("Policy Status");
chart->setCategories({"Active", "Expiring", "Invalid"});

QVector<UIGQBarChartSeries> series;
UIGQBarChartSeries item;
item.name = "Policies";
item.values = {420, 15, 30};
item.fillColor = QColor(35, 128, 224);
series.append(item);

chart->setSeries(series);
chart->setThemePreset(kChartThemeShine);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);

Notes

• Keep category count and value count aligned whenever possible.
• Use QVector<UIGQLineChartSeries> or QVector<UIGQBarChartSeries> for multiple series.
• Use clearSeries() or clearSlices() to remove current data.
• Use setSeriesVisible(index, visible) to toggle series visibility without deleting data.
• Application code should configure data structures, theme settings, and interaction options through ChartKit public methods. Internal rendering objects are managed by the chart controls.

Line Chart

Line Chart

Line charts show continuous trends, historical comparisons, monitoring curves, and time-like business metrics.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQLineChart + IUIGQWidgetBase

Data Structure

struct UIGQLineChartSeries
{
    QString name;
    QVector<double> values;
    QColor lineColor;
    QColor areaColor;
    bool showSymbol = true;
    bool smooth = false;
    bool showArea = false;
    bool visible = true;
    qreal lineWidth = 2.0;
    qreal areaOpacity = 0.22;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQLineChart(parent);
chart->setTitle("CPU Usage");
chart->setCategories({"00:00", "00:05", "00:10", "00:15"});
chart->setSeries("CPU", {22.0, 35.0, 31.0, 48.0}, QColor(35, 128, 224));
chart->setSmooth(true);
chart->setShowSymbol(true);
chart->setThemePreset(kChartThemeMacarons);
chart->setTooltipMode(kChartTooltipAxis);
chart->setTooltipVisible(true);

setCategories(...) defines the horizontal labels. setSeries(...) provides the line name, values, and color. kChartTooltipAxis is useful when values should be inspected by category position.

Bar Chart

Bar Chart

Bar charts compare values across categories. The public class is UIGQBarChart; this chapter keeps the column-chart slug only for existing page compatibility.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQBarChart + IUIGQWidgetBase

Data Structure

struct UIGQBarChartSeries
{
    QString name;
    QVector<double> values;
    QColor fillColor;
    QColor borderColor;
    bool visible = true;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQBarChart(parent);
chart->setTitle("Policy Overview");
chart->setCategories({"Active", "Expiring Soon", "Need Validation", "Expired"});
chart->setSeries("Policies", {420, 15, 30, 12}, QColor(35, 128, 224));
chart->setThemePreset(kChartThemeShine);
chart->setLegendPosition(kChartLegendBottom);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);

setCategories(...) defines category names. setSeries(name, values, color) is the fastest entry point for one grouped dataset. For multiple datasets, pass QVector<UIGQBarChartSeries> to setSeries(...).

Pie Chart

Pie Chart

Pie charts show part-to-whole relationships. The public class is UIGQOpenGLPieChart.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQOpenGLPieChart + IUIGQWidgetBase

Data Structure

struct UIGQOpenGLPieChartSlice
{
    QString name;
    double value = 0.0;
    QColor fillColor;
    bool visible = true;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQOpenGLPieChart(parent);
chart->setTitle("Traffic Sources");

QVector<UIGQOpenGLPieChartSlice> slices;

UIGQOpenGLPieChartSlice search;
search.name = "Search";
search.value = 1048;
search.fillColor = QColor(35, 128, 224);
slices.append(search);

UIGQOpenGLPieChartSlice direct;
direct.name = "Direct";
direct.value = 735;
direct.fillColor = QColor(62, 180, 98);
slices.append(direct);

chart->setSlices(slices);
chart->setInnerRadiusRatio(0.55);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);

setSlices(...) is the data entry point. value is used to calculate proportions, so application code does not need to pre-compute percentages.

Scatter Chart

Scatter Chart

Scatter charts show relationships between two numeric dimensions, such as correlation, distribution, clusters, and outliers.

Base and Class Diagram

QOpenGLWidget
  └─ UIGQChartBase
      └─ UIGQScatterChart + IUIGQWidgetBase

Data Structure

struct UIGQScatterChartSeries
{
    QString name;
    QVector<QPointF> points;
    QColor color;
    bool visible = true;
    qreal symbolSize = 8.0;
};

Methods

Example

using namespace UIGQtLib;

auto* chart = new UIGQScatterChart(parent);
chart->setTitle("Validation Samples");

QVector<UIGQScatterChartSeries> series;

UIGQScatterChartSeries passed;
passed.name = "Passed";
passed.points = {QPointF(12, 80), QPointF(18, 88), QPointF(25, 91)};
passed.color = QColor(62, 180, 98);
passed.symbolSize = 8.0;
series.append(passed);

UIGQScatterChartSeries warning;
warning.name = "Warning";
warning.points = {QPointF(10, 52), QPointF(20, 58), QPointF(28, 61)};
warning.color = QColor(232, 148, 54);
warning.symbolSize = 10.0;
series.append(warning);

chart->setSeries(series);
chart->setThemePreset(kChartThemeShine);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);

Each QPointF(x, y) is one scatter point. Each UIGQScatterChartSeries represents one group.

License

License

ChartKit provides community and commercial editions.

Commercial editions are intended for production Qt applications and include source packages, examples, resources, and update rights according to the purchased plan.