<?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-modeldata.qdoc -->
<title>Model Data Example | Qt Charts 5.9</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.9</td><td ><a href="qtcharts-index.html">Qt Charts</a></td><td ><a href="qtcharts-examples.html">Qt Charts Examples</a></td><td >Model Data Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</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="#using-model-data">Using Model Data</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Model Data Example</h1>
<span class="subtitle"></span>
<!-- $$$modeldata-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/examples_modeldata.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="using-model-data"></a>
<h2 id="using-model-data">Using Model Data</h2>
<p>Let's start by creating an instance of the CustomTableModel class. The CustomTableModel class is derived from QAbstractTableModel and it was created for the purpose of this example. The constructor of this class populates the internal data store of the model with the data that is suitable for our chart example.</p>
<pre class="cpp">
CustomTableModel <span class="operator">*</span>model <span class="operator">=</span> <span class="keyword">new</span> CustomTableModel;
</pre>
<p>We now have a model with data that we would like to display both on the chart and in a QTableView. First, we create QTableView and tell it to use the model as a data source. To make the data cells fill the table view we also change headers resize mode.</p>
<pre class="cpp">
<span class="comment">// create table view and add model to it</span>
<span class="type">QTableView</span> <span class="operator">*</span>tableView <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QTableView</span>;
tableView<span class="operator">-</span><span class="operator">></span>setModel(model);
tableView<span class="operator">-</span><span class="operator">></span>horizontalHeader()<span class="operator">-</span><span class="operator">></span>setSectionResizeMode(<span class="type">QHeaderView</span><span class="operator">::</span>Stretch);
tableView<span class="operator">-</span><span class="operator">></span>verticalHeader()<span class="operator">-</span><span class="operator">></span>setSectionResizeMode(<span class="type">QHeaderView</span><span class="operator">::</span>Stretch);
</pre>
<p>Now we need the <a href="qchart.html">QChart</a> instance to display the same data on the chart. We also enable animations. It makes it easier to see how modifying the model's data affect the chart.</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>setAnimationOptions(<span class="type"><a href="qchart.html">QChart</a></span><span class="operator">::</span>AllAnimations);
</pre>
<p>The code below creates new line series and gives it a name. The following line creates an instance of <a href="qvxymodelmapper.html">QVXYModelMapper</a> class. The next two lines specify that X-coordinates are taken from the model's column(Qt::Vertical) with index 0. The Y-coordinates are taken from the model's column with index 1. To create a connection between the series and the model we set both of those objects to <a href="qvxymodelmapper.html">QVXYModelMapper</a>.</p>
<p>Finally, the series is added to the chart.</p>
<pre class="cpp">
<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>;
series<span class="operator">-</span><span class="operator">></span>setName(<span class="string">"Line 1"</span>);
<span class="type"><a href="qvxymodelmapper.html">QVXYModelMapper</a></span> <span class="operator">*</span>mapper <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qvxymodelmapper.html">QVXYModelMapper</a></span>(<span class="keyword">this</span>);
mapper<span class="operator">-</span><span class="operator">></span>setXColumn(<span class="number">0</span>);
mapper<span class="operator">-</span><span class="operator">></span>setYColumn(<span class="number">1</span>);
mapper<span class="operator">-</span><span class="operator">></span>setSeries(series);
mapper<span class="operator">-</span><span class="operator">></span>setModel(model);
chart<span class="operator">-</span><span class="operator">></span>addSeries(series);
</pre>
<p>To show in QTableView which data corresponds with which series this example uses table coloring. When a series is added to the chart it is assigned a color based on the currently selected theme. The code below extracts that color from the series and uses it to create a colored QTableView. The coloring of the view is not a part of the <a href="qchart.html">QChart</a> functionality.</p>
<pre class="cpp">
<span class="comment">// for storing color hex from the series</span>
<span class="type">QString</span> seriesColorHex <span class="operator">=</span> <span class="string">"#000000"</span>;
<span class="comment">// get the color of the series and use it for showing the mapped area</span>
seriesColorHex <span class="operator">=</span> <span class="string">"#"</span> <span class="operator">+</span> <span class="type">QString</span><span class="operator">::</span>number(series<span class="operator">-</span><span class="operator">></span>pen()<span class="operator">.</span>color()<span class="operator">.</span>rgb()<span class="operator">,</span> <span class="number">16</span>)<span class="operator">.</span>right(<span class="number">6</span>)<span class="operator">.</span>toUpper();
model<span class="operator">-</span><span class="operator">></span>addMapping(seriesColorHex<span class="operator">,</span> <span class="type">QRect</span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> model<span class="operator">-</span><span class="operator">></span>rowCount()));
</pre>
<p>The same operations are done with a second series. Notice that for this series different columns of the same model are mapped.</p>
<pre class="cpp">
series <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineseries.html">QLineSeries</a></span>;
series<span class="operator">-</span><span class="operator">></span>setName(<span class="string">"Line 2"</span>);
mapper <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qvxymodelmapper.html">QVXYModelMapper</a></span>(<span class="keyword">this</span>);
mapper<span class="operator">-</span><span class="operator">></span>setXColumn(<span class="number">2</span>);
mapper<span class="operator">-</span><span class="operator">></span>setYColumn(<span class="number">3</span>);
mapper<span class="operator">-</span><span class="operator">></span>setSeries(series);
mapper<span class="operator">-</span><span class="operator">></span>setModel(model);
chart<span class="operator">-</span><span class="operator">></span>addSeries(series);
<span class="comment">// get the color of the series and use it for showing the mapped area</span>
seriesColorHex <span class="operator">=</span> <span class="string">"#"</span> <span class="operator">+</span> <span class="type">QString</span><span class="operator">::</span>number(series<span class="operator">-</span><span class="operator">></span>pen()<span class="operator">.</span>color()<span class="operator">.</span>rgb()<span class="operator">,</span> <span class="number">16</span>)<span class="operator">.</span>right(<span class="number">6</span>)<span class="operator">.</span>toUpper();
model<span class="operator">-</span><span class="operator">></span>addMapping(seriesColorHex<span class="operator">,</span> <span class="type">QRect</span>(<span class="number">2</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> model<span class="operator">-</span><span class="operator">></span>rowCount()));
</pre>
<p>To avoid setting up the QGraphicsScene we use the <a href="qchartview.html">QChartView</a> class that does it for us. <a href="qchart.html">QChart</a> object pointer is used as a parameter of the <a href="qchartview.html">QChartView</a> constructor. To make the chart look nicer, Antialiasing is turned on and the minimum size of the chartView widget is set.</p>
<pre class="cpp">
chart<span class="operator">-</span><span class="operator">></span>createDefaultAxes();
<span class="type"><a href="qchartview.html">QChartView</a></span> <span class="operator">*</span>chartView <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qchartview.html">QChartView</a></span>(chart);
chartView<span class="operator">-</span><span class="operator">></span>setRenderHint(<span class="type">QPainter</span><span class="operator">::</span>Antialiasing);
chartView<span class="operator">-</span><span class="operator">></span>setMinimumSize(<span class="number">640</span><span class="operator">,</span> <span class="number">480</span>);
</pre>
<p>Finally we place both widgets in a layout and use the layout as the application layout.</p>
<pre class="cpp">
<span class="comment">// create main layout</span>
<span class="type">QGridLayout</span> <span class="operator">*</span>mainLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QGridLayout</span>;
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(tableView<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span>);
mainLayout<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">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setColumnStretch(<span class="number">1</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setColumnStretch(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span>);
setLayout(mainLayout);
</pre>
<p>The application is ready. Try modifying the data in the table view and see how it affects the chart.</p>
<p>Files:</p>
<ul>
<li><a href="qtcharts-modeldata-customtablemodel-cpp.html">modeldata/customtablemodel.cpp</a></li>
<li><a href="qtcharts-modeldata-customtablemodel-h.html">modeldata/customtablemodel.h</a></li>
<li><a href="qtcharts-modeldata-tablewidget-cpp.html">modeldata/tablewidget.cpp</a></li>
<li><a href="qtcharts-modeldata-tablewidget-h.html">modeldata/tablewidget.h</a></li>
<li><a href="qtcharts-modeldata-main-cpp.html">modeldata/main.cpp</a></li>
<li><a href="qtcharts-modeldata-modeldata-pro.html">modeldata/modeldata.pro</a></li>
</ul>
</div>
<!-- @@@modeldata -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 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>
distrib
>
Mageia
>
6
>
x86_64
>
media
>
core-updates
>
by-pkgid
>
19952c5e751bf7e3108c3c59625b0f35
>
files
>
354
