Contents

Qt Chart

Features

Qt Chart Examples C++ Classes

AreaChart
Audio Example
Bar Chart
Bar Model Mapper
Box and Whiskers
Polar Chart Custom
Callout
Chart Theme
Custom Chart
Date-Time Axis
Donut Chart
Scatter Chart
Donut Chart
Stacked Bar Chart
Horizontal Bar Chart
Horizontal Percent Bar Chart
Horizontal Stacked Bar Chart
Scatter Interactions
Legend
Legend Markers
Line Chart
Line & Bar Chart
Logarithmic Axis
Spline Chart
Model / Data
Multiple Axes
Nested Donuts
OpenGL Accelerated Series
Temperature Records Example
Stacked Bar Chart Drilldown

Qt Chart Examples with QML Types

QML Axes
QML Line Chart, Spline chart, Area Chart
QML Scatter Chart , Pie Chart, Donut Chart
QML Bar Chart ,Stacked Bar Chart, Percent Bar Chart
QML Custom Legend
QML Customizations
Chart with Application
F1 Legends , Oscilloscope , Weather
QML Polar Chart

 

Qt Chart

> Qt Chart Module은 Qt 5.7 상용 제품에서 제공되는 Add-on Module 입니다.
> Qt Chart Module 은 다양한 Chart 를 그리는데 사용하기 편리한 Chart Component 모음을 제공합니다.
> 본 문서는 Qt Chart 를 이용해 구현한 예제 모음 입니다. 각 예제 들의 소스코드가 포함된 Tutorial 은 http://doc.qt.io/qt-5/qtcharts-index.html 에서 확인 할 수 있습니다. QML chart 를 이용한 Application 까지 다양한 활용 예제를 확인해 볼 수 있습니다.
> Qt 5.7 상용 제품의 체험 판은 https://www.qt.io/download-eval-for-applications-step-2/ 에서 다운로드 할 수 있습니다.
> Qt Data Visualization 구현에 관한 문의 사항은 june.joe@ocube.co.kr 로 연락 바랍니다.

 

Features

> 다양한 타입의 Chart 옵션을 선택할 수 있습니다. Line, Spline, Area, Scatter, Bar, Pie , Polar, Box and Whisker 등
> 대규모 data rendering 의 Performance 향상을 위해 OpenGL을 사용합니다(QAbstractSeries::useOpenGL).
> Qt Graphics View Framework 를 사용하여 GUI 에 통합시킬 수 있으며 , Qwidget(QChartView), QGraphicsWidget, QML type 에서 이용 가능합니다.
> Dynamic Data Drawing, Drilldown 과 Zoom 기능 등 Interactive 한 Chart 를 구현 할수 있습니다.
> Minimal configuration 이 가능하기 때문에 Embedded 환경에서도 뛰어난 performance 를 보여줍니다.

 

Qt Charts C++ Classes

QAbstractAxis

QAbstractBarSeries

QAbstractSeries

QAreaLegendMarker

QAreaSeries

QBarCategoryAxis

QBarLegendMarker

QBarSeries

QBarSet

QVPieModelMapper

QXYSeries

QBoxPlotLegendMarker

QBoxPlotSeries

QBoxSet

QCategoryAxis

QChart

QChartView

QDateTimeAxis

QHBarModelMapper

QHPieModelMapper

QVXYModelMapper

QHXYModelMapper

QHorizontalBarSeries

QHorizontalPercentBarSeries

QHorizontalStackedBarSeries

QLegend

QLegendMarker

QLineSeries

QLogValueAxis

QPercentBarSeries

QValueAxis

QPieLegendMarker

QPieSeries

QPieSlice

QPolarChart

QScatterSeries

QSplineSeries

QStackedBarSeries

QVBarModelMapper

QVBoxPlotModelMapper

QXYLegendMarker

 

AreaChart Example

areachart example 1

  • 두 개의 QLineSeries 인스턴스를 이용해 만든 line Chart 를경계로 QAreaSeries 를 이용해 제작한 Area Chart 예제입니다.
  • QChartView instance 를 사용해서 title, anti-aliasing property, axes range 등을 설정합니다.
Audio Example

audio example

 

BarChart Example

barchart example

  • 카테고리 별로 각기 다른 Data 를 Bar Type Chart 로 보여주는예제 입니다. Bar Chart 를 구성하기 위해서는 QBarSet instance에서 Data 를 정의합니다.
  • Qchart object 를 이용해서 title 과 Axis 를 Setting 하고 Legend 도 표시해 줍니다.
BarModelMapper Example

barmodeimapper example

  • Model/View style 의 Chart 를 구성하기 위해서 QTableView 를사용한 예제 입니다. QAbstractTableModel 에서 만들어진 custom table model 을 이용해 Table view 에 setting 합니다.
  • Chart 는 QchartQVBarModelMapper 를 이용해서 series data를 Add 합니다.

 

Box and Whiskers Example

box and whiskers example

  • File 로부터 불연속 적인 data 를 읽어 들여 중간 값을 찾고 box & whisker style 로 plot 하는 예제 입니다.
  • Box & Whisker Chart 는 QBoxPlotSeries 를 이용해서 data 를handling 합니다.
  • Text file 을 open 하기 위해서 Qfile 클래스가 사용되었습니다.
  • Median 값을 찾기 위해 QStringListqSort 가 사용됩니다.
Callout Example

callout example

  • Line Chart 의 좌표 값을 읽어 Callout mark 안에 표시하는 예제 입니다.
  • Mouse over 로 자동으로 값을 읽어 들여 화면에 표시해 줍니다. Qchart 의 멤버 함수인 QChart::mapToPositionQChart::mapToValue 가 사용됩니다.

 

Chart Theme Example

chart theme example

  • Qt Chart 에서 지원하는 모든 Chart Type 에는 build-in Theme 를 적용할 수 있습니다. 보다 조화로운 시각 효과를 위해서 Application Window 의 background palette 도 함께 customized 합니다.
  • Qt 의 Main Chart API 인 QChart Class 에 7가지 pre-built in Chart  theme 를 지원합니다.
    • -> ChartThemeLight, ChartThemeBlueCerulean , ChartThemeDark, ChartThemeBrownSand, ChartThemeBlueNcs, ChartThemeHighContrast, ChartThemeBlueIcy, ChartThemeQt

 

Custom Chart Example

custom chart example

  • Chart 에 사용된 component 들을 QPen , Qfont , QLinearGradient , Qbrush 등을 이용해 Customize 하는 예제 입니다.
  • Data Series, Title, Background, Plot Area Background, Axes 등 대부분의 Component를 Customize 할 수 있습니다.
DateTimeAxis Example

datetimeaxis example

  • 시간에 따른 태양 흑점 주기를 QLineSeries 로 만든 line chart 입니다.원본 data 는 text file 형태로 되어 있고, QDateTime Object 가 참조 가능한data 로 converting 합니다.
  • QChartView 오브젝트를 Qchart 파라미터로 생성하여 Chart 를 plot합니다. Qpainter 를 이용해 Antialiasing 를 추가 합니다.

 

Donut Chart Example

donut chart example

  • 간단한 Donut Chart + Customization 이 포함된 예제 입니다.
  • QPieSeriesQPieSlice 를 사용하여 donut chart 를 제작하며, QChartView 를 이용해 BlueCerulean 테마를적용하였습니다.
Donut Chart Breakdown

donut chart breakdown

  • 세 개의 QPieSeries object 를 생성해서 세 개의 Slice를 정의합니다. Donut Chart 를 원하는 영역 별로 Breakdown 하는 예제 입니다.
  • 세부적인 slice 별 Legend 를 추가 하였습니다.

 

StackedBarChart Example

stackedbarchart example

  • Stacked Bar Chart 는 Category 별 Data 를 Stack 으로 쌓아 구분해 보여줍니다.  일반적인 Bar Chart 와 크게 다른 점은 없으나 Series 를 QStackedBarSeries 를 이용한다는 점이 다릅니다.
HorizontalBarChart Example

horizontalbarchart example

  • QBarSet 으로 정의된 instance 를 QHorizontalBarSeries 를 이용하면수평으로 되어 있는 Bar Chart 를 간단히 구현할 수 있습니다.
  • Legend 도 Qt::AlignBottom 를 이용해서 수평 형태로 Chart 밑에 위치시킵니다.

 

HorizontalPercentBarChart

horizontalpercentbarchart example

  • 수평 Bar Chart 에서 각 카테고리 별 Percentage 를 보여주는 형태의 Chart 예제입니다. 일반적인 Bar Chart 에서 QBarSeries를사용하는것과 달리 QHorizontalPercentBarSeries 를 사용하면 간단하게 Percentage 별로 분류 되어 있는 Chart 를 구성할 수 있습니다.
HorizontalStackedBarChart

horizontalstackedbarchart example

  • 왼편의 Horizontal Percent Bar Chart 와 동일하나 X축의 총합이 100이 아닌Stack 으로 이루어져 있는 Chart 입니다. 동일한 Data 로 만들어진 Chart 이기때문에 차이를 쉽게 확인해 볼 수 있습니다.
  • QHorizontalStackedBarSeries API 를 사용하면 쉽게 구현할 수 있습니다.

 

Legend Example

legend example

  • Legend 를 Chart 에서 따로 떼어내 Chart 와 별도로 독립시킬 수도 있고, Chart 내에 포함시킬 수도 있습니다. Chart 내에 포함 될때는alignment 가 수정될 수도 있습니다. Legend 를 Chart 와 병행시키는 다양한 방법에 대한 예제 입니다.
  • Control 메뉴의 QWidgetQPushButton QGridLayout QDoubleSpinBox QGroupBox 등을 이용해 제작되었습니다. Chart 는 일반적인 QBarSeriesQBarSet 으로 제작됩니다. Legend 의 font 를 조절하는 옵션은 Qfont 를 이용합니다.

 

LegendMarkers Example

legendmarkers example

  • LegendMarker 를 클릭하면 Chart 를 visible/invisible 하게 다룰 수 있도록 한 예제 입니다.
  • QLegendMarkerQlegend 내부의 marker 에 access 할 수 있는 abstract object 로서, Legend Marker 는 Colored Box 와 Label 의두가지로 구성되어 있습니다. 단순히 안보이게 하는 것뿐 아니라 Marker가 Toggele 되었을 때 Alpha값을 Dimming 할 수 도 있습니다.

 

LineChart Example

linechart example

  • 기본 적인 형태의 Line Chart 를 구성하는 예제 입니다.
  • QLineSeries 인스턴스를 Create 한 후 Series 값을 입력합니다. 이후 QChart 인스턴스를 Create 한 후 series, Axis, title 를 세팅합니다.
  • 마지막으로 QChart 를 파라미터로 하는 QChartView Object를 생성하면 간단하게 Line Chart 가 만들어 집니다.
Line and BarChart Example

line and barchart example

  • Line Chart 와 Bar Chart 를 양쪽 모두의 Category Axis를 동일하게 공유 하면 두 chart 를 한번에 표시할 수 있습니다. 이를 위해서 custom axes 를 만들어서 두 개의 series range 가 동일한 axis 를 따르도록 만들어 주어야 합니다. X-Axis 는 QBarCategoryAxis를사용하고, Y-Axis 는 QValueAxis 를 사용 합니다.

 

Logarthmic Axis Example

logarithmic axis example

  • Line Chart 의 Axis 에 QLogValueAxis 를 이용하면
    Logarithmic Axis 를 구현할 수 있습니다. 예제 Chart 의 X-Axis 는일반적인 QValueAxis 로 되어 있습니다. 예제 Chart 의 Y-Axis 는 QLogValueAxis 에 의한 Value 입니다.
Model Data Example

model data example

  • AbstractTableModel 을 사용한 Model / View(Chart) 형태의 Chart 입니다.
  • Model Data 는 QTableView 를 이용해서 구현되었습니다.

 

Multiple Axes Example

multiple axes example

Nested Donuts Example

nested donuts example

  • 중첩된 Donut Chart가 또한 각각 여러 개의 Slice로 구분되어 있는 예제입니다. 각각의 Chart 는 QPieSeries로 Slice 는 QPieSlice 로 object 가생성됩니다.
  • 재미있는 효과를 주기 위해 Chart 는 Qtimer를 이용해 1.25 sec 마다Random하게 Rotate 합니다.

 

OpenGL Accelerated Series

opengl accelerated series example

  • Data Series 의 OpenGL 가속은 QLineSeriesQScatterSeries 에서만지원됩니다. OpenGL 가속 기능은 단지 QAbstractSeries::useOpenGL프로퍼티 를 true로 설정하면 됩니다.
  • 가속 기능이 구동되면 QOpenGLWidget 가 transparent 하게 instantiate되며, chart 위에 가속된 series 를 draw 합니다.
Temperature Records Example

temperature records example

  • QBarCategoryAxis를이용해서 구성한 간단 한 Bar 형태의 Temperature Record Bar Chart 입니다.

 

Pie Chart Customization Example

pie chart customization example

  • Pie chart 를 Widget Control과 함께 Customization 한 Chart 예제입니다.
Polar Chart Example

polar chart example

  • Scrolling 과 Zooming 기능을 가진 Polar Chart 를 구현한 예제 입니다.
  • Polar Chart 는 QPolarChart instance 를 이용해서 제작됩니다. Axes를구성할 때, Cartesian Chart 와 동일한 방식을 따르면 되며, alignment대신에 polar orientation 을 사용할 수 있습니다.

 

ScatterChart Example

scatterchart example

  • Scatter Chart 의 예제 입니다. Scatter Chart 는 QScatterSeries instance 를이용해 제작 합니다.
  • QPainterPath 를 이용해서 흩뿌릴 Image 를 입력 받아 사용할 수 있습니다.
Scatter Interactions Example

scatter interactions example

  • QScatterSeries 로 만들어진 Scatter chart 가 두 종류의 data series 를포함합니다. 클릭이 되면 한쪽의 data series 에서 다른 쪽 Series 로link 를 바꾸어주며 화면상으로는 scattered point 의 색상을 교체 합니다.

 

StackedBarChart Drilldown Example

stackedbarchart drilldown example

  • Stacked Bar Chart 를 이용해서 Click 하면 Seanson(Monthly)->Weekly chart 로 Drill down 되는 예제 입니다.
  • Drilldown Bar Series 의 Structure는 QStackedBarSeries 를 이용해서 만듭니다.
  • 모든 QBarSeries 를 상속받은 클래스는 클릭 했을 때 signal(QBarSet* -> 클릭된 bar set 포인터, int-> 클릭된 카테고리 인덱스) 을 발생시킵니다.

 

Spline Chart Example

spline chart example

  • QSplineSeries 를 사용한 기본적인 spline chart 예제입니다.
Dynamic Spline Example

dynamic spline example

  • 스플라인 함수에 의한 Dynamic Chart 를 생성해주는 예제 입니다.
  • QSplineSeries 가 사용됩니다. QSplineSeriesQPainterPath 에 의해 필요한 segment control point 와 함께 data point 를 저장하여 Data 변화에 따라 자동으로 spline Control point 를 그려줍니다.

 

StackedBarChart Drilldown Example

stackedbarchart drilldown 2 example

 

QML Chart Classes

AbstractAxis

AbstractBarSeries

AbstractSeries

AreaSeries

BarCategoryAxis

BarSeries

BarSet

BoxPlotSeries

BoxSet

CategoryAxis

ChartView

DateTimeAxis

HBarModelMapper

HPieModelMapper

HXYModelMapper

HorizontalBarSeries

HorizontalPercentBarSeries

HorizontalStackedBarSeries

Legend

LineSeries

LogValueAxis

Margins

PercentBarSeries

PieSeries

PieSlice

PolarChartView

ScatterSeries

SplineSeries

StackedBarSeries

VBarModelMapper

VBoxPlotModelMapper

VPieModelMapper

VXYModelMapper

VXYModelMapper

XYPoint

XYSeries

CategoryRange

 

QML Axes

qml axes example 1

  • QML 의 ValueAxis 를 이용해 만든 Chart 로Line Chart 와 Scatter Chart 가 섞여 있습니다.
  • Line 과 Scatter Series 는 각각 LineSeries ScatterSeries 를 이용해 구성합니다.

qml axes example 2

qml axes example 3

 

QML Charts Example 1

qml charts example 3

qml charts example 2

  • Spline chart 도 제작 가능합니다. QML Type 인 SplineSeriesXYPoint 값을 정해주면간단하게 Spline Chart 를 구성할 수 있습니다.

qml charts example 1

  • AreaSeries QML Type 을 이용하면 손쉽게Area Chart  를 만들 수 있습니다. Area 는LineSeries 로 영역을 구성합니다.

 

QML Charts Example 2

qml chart example 2 1

qml chart example 2 2

  • PieSeries QML Type 을 이용하면 손쉽게 Pie Chart 를 만들 수 있습니다. PieSlice 로 각Slice의 Value 와 Label을 지정합니다.

qml chart example 2 3

  • 두개의 PieSeries 의 Size 와 holeSize 를조절하여 Donut Chart 를 제작할 수 있는 예제입니다.

 

QML Charts Example 3

qml chart example 3 1

  • QML Type 인 BarSeriesBarSet 을 사용해서 구성한 Bar Chart 입니다.

qml chart example 3 2

qml chart example 3 3

  • PercentBarSeries 를 사용하면 Percent Bar chart 를 구현할 수 있습니다. Stacked Bar Series 와 달리 BarSet 에 value 를 입력하면자동으로 Percent 변환하여 표시해 줍니다.

 

QML Custom Legend

qml custom legend

  • ChartView QML Type 에 지정되어 있는 built-in Legend 대신에, Custom Legend 를 제작하는 Example 입니다.
  • AreaSeries 를 수정하여 animated area Chart 를 만들었으며, Mouse Hover 와 Click 으로 Chart 를 세분화 하여 조사할 수 있습니다. 이를 위해 MouseAreaGradient 관리가 필요 합니다.
  • Custom Legend 는 Component Rectangle 등의 QML Type 을 이용하여 직접 제작하고,  Signal 로 event 처리를 합니다.

 

QML Customizations

qml customizations example

  • 여러 가지 QML Type 을 복합한 Custom Chart 입니다. 에니메이션효과를 사용하여 실제로 Wheel(Pie)가돌아가도록 제작되어 있습니다. 돌아가다가 멈추면 조각이 떨어져 나오고 Value 를 scatter 가 point하도록 움직입니다.
  • PieSeries SplineSeries ScatterSeries 를 각각 Customize하였습니다. Chartview 와 Series 간의 다양한 Visual Property 를 어떻게 customize 하는지 살펴볼 수 있습니다.
QML F1 Legends

qml f1 legends

  • XmlListModel 을 사용하여 data source 를 입력 받습니다.실제 application 에 사용된다면 timing System 을 통해 XML data 를 직접 받을 수 있습니다. Data 는 Timer를 이용해서 Parse 됩니다.

 

QML Oscilloscope

qml oscilloscope example

  • Oscilloscope Application 은 Qt Chart 에서 제공하는 QML API를 고 신뢰도가 요구되는 Application에서 구현하는 예제를 보여줍니다.
  • 실제 output console에서의 Rendering Time을 구현하기 위해서 configuration option을 조절해야 합니다.
  • Application은 크게 Scope/Control View 로 구성됩니다.
  • Wave 는 LineSeries 를 이용해 구현하였습니다. 본 예제의 lineseries 는 QML Timer 를 이용해서 구현되었으나, 실제의 Embedded Application 에서는 Qt C++ Code 에서 보내주는 Signal 을 이용해서 구현할 수 있습니다.
QML Weather App.

qml weather app. example

  • http://www.worldweatheronline.com/ 에서 제공하는 Weather API 에 access 하여 Data를 받아 오는 QML example 입니다. Chart 는 LineSeriesBarSeries 를 이용하여 구성되었으며, Data 를 받아 오기 위한 request 는 HTTP GET, response 는 JSON data 포맷을 활용 합니다.
  • Weather Icon URL 의 container 는 Qt 의 ListModel 를 사용하였습니다.

 

QML Polar Chart

  qml polar chart example 1

  • QML 을 이용한 첫 번째 Polar Chart 예제는SplineSeriesScatterSeries 를 결합하여구성하였습니다.
  • 각각의 Series 는 동일한 Axis 를 공유합니다.
  • Polar Chart 는 Series 의 Axis를 axisAngular 와 axisRadial axes 를 사용하면 됩니다.

qml polar chart example 2

  • QML Type 인 DateTimeAxisAreaSeries 를 이용해구성한 Polar Chart 예제 입니다. AreaSeriesLineSeries 두개를 사용하여 lowerseries/upperseries 를 정의하고 사이를 채워주는 방식으로 운영합니다.
  • 첫 번째 예제와 마찬가지로  axisAngular 와 axisRadial axes 를 사용하여 Polar Chart 를구성하였습니다.

qml polar chart example 3