<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- examples-chartthemes.qdoc -->
<title>Chart Themes Example | Qt Charts 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtcharts-index.html">Qt Charts</a></td><td ><a href="qtcharts-examples.html">Qt Charts Examples</a></td><td >Chart Themes Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtcharts-index.html">Qt Charts | Commercial or GPLv3</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#creating-charts">Creating Charts</a></li>
<li class="level1"><a href="#changing-theme">Changing Theme</a></li>
<li class="level1"><a href="#changing-animation-legend-and-anti-aliasing">Changing Animation, Legend and Anti-Aliasing</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Chart Themes Example</h1>
<span class="subtitle"></span>
<!-- $$$chartthemes-brief -->
<p>The example shows the look and feel of the different built-in themes.</p>
<!-- @@@chartthemes -->
<!-- $$$chartthemes-description -->
<div class="descr"> <a name="details"></a>
<p>This example shows the look and feel of the different built-in themes for some of the supported chart types.</p>
<p class="centerAlign"><img src="images/examples_chartthemes_light.png" alt="" /></p><p class="centerAlign"><img src="images/examples_chartthemes_brown_sand.png" alt="" /></p><p class="centerAlign"><img src="images/examples_chartthemes_blue_cerulean.png" alt="" /></p><a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="creating-charts"></a>
<h2 id="creating-charts">Creating Charts</h2>
<p>The charts of different types are generated and added to the layout separately. For example, the line chart is created as follows. The creation of other chart types is similar.</p>
<p>First a chart is created.</p>
<pre class="cpp">
<span class="type"><a href="qchart.html">QChart</a></span> <span class="operator">*</span>chart <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qchart.html">QChart</a></span>();
chart<span class="operator">-</span><span class="operator">></span>setTitle(<span class="string">"Line chart"</span>);
</pre>
<p>A common set of random data is generated and placed in a list. This list is used in each chart type to add data to the series of the chart. For the line series, <a href="qlineseries.html">QLineSeries</a> instances are created and added to the chart.</p>
<pre class="cpp">
<span class="type">QString</span> name(<span class="string">"Series "</span>);
<span class="type">int</span> nameIndex <span class="operator">=</span> <span class="number">0</span>;
<span class="keyword">for</span> (<span class="keyword">const</span> DataList <span class="operator">&</span>list : m_dataTable) {
<span class="type"><a href="qlineseries.html">QLineSeries</a></span> <span class="operator">*</span>series <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineseries.html">QLineSeries</a></span>(chart);
<span class="keyword">for</span> (<span class="keyword">const</span> Data <span class="operator">&</span>data : list)
series<span class="operator">-</span><span class="operator">></span>append(data<span class="operator">.</span>first);
series<span class="operator">-</span><span class="operator">></span>setName(name <span class="operator">+</span> <span class="type">QString</span><span class="operator">::</span>number(nameIndex));
nameIndex<span class="operator">+</span><span class="operator">+</span>;
chart<span class="operator">-</span><span class="operator">></span>addSeries(series);
}
</pre>
<p>Default axes are created for the line series. We also specify ranges for the axes based on the range of the data used for the series.</p>
<pre class="cpp">
chart<span class="operator">-</span><span class="operator">></span>createDefaultAxes();
chart<span class="operator">-</span><span class="operator">></span>axes(<span class="type">Qt</span><span class="operator">::</span>Horizontal)<span class="operator">.</span>first()<span class="operator">-</span><span class="operator">></span>setRange(<span class="number">0</span><span class="operator">,</span> m_valueMax);
chart<span class="operator">-</span><span class="operator">></span>axes(<span class="type">Qt</span><span class="operator">::</span>Vertical)<span class="operator">.</span>first()<span class="operator">-</span><span class="operator">></span>setRange(<span class="number">0</span><span class="operator">,</span> m_valueCount);
</pre>
<p>We also want to add more space between the labels and the y-axes. For this we specify a label format that adds space characters to the labels.</p>
<pre class="cpp">
<span class="comment">// Add space to label to add space between labels and axis</span>
<span class="type"><a href="qvalueaxis.html">QValueAxis</a></span> <span class="operator">*</span>axisY <span class="operator">=</span> qobject_cast<span class="operator"><</span><span class="type"><a href="qvalueaxis.html">QValueAxis</a></span><span class="operator">*</span><span class="operator">></span>(chart<span class="operator">-</span><span class="operator">></span>axes(<span class="type">Qt</span><span class="operator">::</span>Vertical)<span class="operator">.</span>first());
Q_ASSERT(axisY);
axisY<span class="operator">-</span><span class="operator">></span>setLabelFormat(<span class="string">"%.1f "</span>);
</pre>
<p>Finally the line chart is added to the grid layout.</p>
<pre class="cpp">
chartView <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qchartview.html">QChartView</a></span>(createLineChart());
m_ui<span class="operator">-</span><span class="operator">></span>gridLayout<span class="operator">-</span><span class="operator">></span>addWidget(chartView<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">2</span>);
</pre>
<a name="changing-theme"></a>
<h2 id="changing-theme">Changing Theme</h2>
<p>The user can select a built-in theme to be used in the example. This theme is then applied to all charts in the layout.</p>
<pre class="cpp">
<span class="type"><a href="qchart.html">QChart</a></span><span class="operator">::</span>ChartTheme theme <span class="operator">=</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qchart.html">QChart</a></span><span class="operator">::</span>ChartTheme<span class="operator">></span>(
m_ui<span class="operator">-</span><span class="operator">></span>themeComboBox<span class="operator">-</span><span class="operator">></span>itemData(m_ui<span class="operator">-</span><span class="operator">></span>themeComboBox<span class="operator">-</span><span class="operator">></span>currentIndex())<span class="operator">.</span>toInt());
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>setTheme(theme);
</pre>
<p>In order to give the result a more harmonious look, the background palette of the application is customized to match the selected theme. The QPalette::Window and QPalette::WindowText roles are set based on the selected theme.</p>
<pre class="cpp">
<span class="type">QPalette</span> pal <span class="operator">=</span> window()<span class="operator">-</span><span class="operator">></span>palette();
<span class="keyword">if</span> (theme <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qchart.html">QChart</a></span><span class="operator">::</span>ChartThemeLight) {
pal<span class="operator">.</span>setColor(<span class="type">QPalette</span><span class="operator">::</span>Window<span class="operator">,</span> <span class="type">QRgb</span>(<span class="number">0xf0f0f0</span>));
pal<span class="operator">.</span>setColor(<span class="type">QPalette</span><span class="operator">::</span>WindowText<span class="operator">,</span> <span class="type">QRgb</span>(<span class="number">0x404044</span>));
</pre>
<a name="changing-animation-legend-and-anti-aliasing"></a>
<h2 id="changing-animation-legend-and-anti-aliasing">Changing Animation, Legend and Anti-Aliasing</h2>
<p>In this example, it is also possible to see how changing animation, legend and anti-aliasing affects the appearance of the chart.</p>
<p>Based on the user's selection, the used animation type is set on each chart. It is possible to have no animations in the chart, or have animations for grid axis or series, or both.</p>
<pre class="cpp">
<span class="type"><a href="qchart.html">QChart</a></span><span class="operator">::</span>AnimationOptions options(
m_ui<span class="operator">-</span><span class="operator">></span>animatedComboBox<span class="operator">-</span><span class="operator">></span>itemData(m_ui<span class="operator">-</span><span class="operator">></span>animatedComboBox<span class="operator">-</span><span class="operator">></span>currentIndex())<span class="operator">.</span>toInt());
<span class="keyword">if</span> (<span class="operator">!</span>m_charts<span class="operator">.</span>isEmpty() <span class="operator">&</span><span class="operator">&</span> m_charts<span class="operator">.</span>at(<span class="number">0</span>)<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>animationOptions() <span class="operator">!</span><span class="operator">=</span> options) {
<span class="keyword">for</span> (<span class="type"><a href="qchartview.html">QChartView</a></span> <span class="operator">*</span>chartView : charts)
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>setAnimationOptions(options);
}
</pre>
<p>The chart can be shown with a legend. The legend can be aligned to different sides of the chart.</p>
<pre class="cpp">
<span class="type">Qt</span><span class="operator">::</span>Alignment alignment(
m_ui<span class="operator">-</span><span class="operator">></span>legendComboBox<span class="operator">-</span><span class="operator">></span>itemData(m_ui<span class="operator">-</span><span class="operator">></span>legendComboBox<span class="operator">-</span><span class="operator">></span>currentIndex())<span class="operator">.</span>toInt());
<span class="keyword">if</span> (<span class="operator">!</span>alignment) {
<span class="keyword">for</span> (<span class="type"><a href="qchartview.html">QChartView</a></span> <span class="operator">*</span>chartView : charts)
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>legend()<span class="operator">-</span><span class="operator">></span>hide();
} <span class="keyword">else</span> {
<span class="keyword">for</span> (<span class="type"><a href="qchartview.html">QChartView</a></span> <span class="operator">*</span>chartView : charts) {
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>legend()<span class="operator">-</span><span class="operator">></span>setAlignment(alignment);
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>legend()<span class="operator">-</span><span class="operator">></span>show();
}
}
</pre>
<p>The user can also see how changing anti-aliasing option changes the appearance of the chart. Anti-aliasing is updated based on the user's selection.</p>
<pre class="cpp">
bool checked <span class="operator">=</span> m_ui<span class="operator">-</span><span class="operator">></span>antialiasCheckBox<span class="operator">-</span><span class="operator">></span>isChecked();
<span class="keyword">for</span> (<span class="type"><a href="qchartview.html">QChartView</a></span> <span class="operator">*</span>chart : charts)
chart<span class="operator">-</span><span class="operator">></span>setRenderHint(<span class="type">QPainter</span><span class="operator">::</span>Antialiasing<span class="operator">,</span> checked);
</pre>
<p>Files:</p>
<ul>
<li><a href="qtcharts-chartthemes-chartthemes-pro.html">chartthemes/chartthemes.pro</a></li>
<li><a href="qtcharts-chartthemes-main-cpp.html">chartthemes/main.cpp</a></li>
<li><a href="qtcharts-chartthemes-themewidget-cpp.html">chartthemes/themewidget.cpp</a></li>
<li><a href="qtcharts-chartthemes-themewidget-h.html">chartthemes/themewidget.h</a></li>
<li><a href="qtcharts-chartthemes-themewidget-ui.html">chartthemes/themewidget.ui</a></li>
</ul>
</div>
<!-- @@@chartthemes -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
