×
Namespaces

Variants
Actions

Google Chart Integration to Qt Using Google API and QtWebKit

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to draw Google Chart / Google Visualization on Qt Application using Google API and QtWebKit. You can use such charts in your Qt application by just passing values to Google API using Javascript and Google API draw the Chart according to data.

Article Metadata
Compatibility
Platform(s): Symbian
Symbian
Article
Created: chintandave_er (25 Nov 2010)
Last edited: kiran10182 (31 Oct 2013)

Contents

Preconditions

What are Google Chart Tools?

The Google Chart Tools enable adding live charts to any web page and it's very simple to use and free. It Uses JavaScript library to draw Chart on webpage.

You can get more information about Google Chart from this link.

There are two type of Charts.

  1. Image Charts (Chart API)
    Dynamically generate chart Image with a URL string. You can embed these charts on your web page, or download the image for local or offline use. Check this Google API for more information and code example.
  2. Interactive Charts (Visualization API)
    Lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations.

Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications. Please check this Google API for more information and code example.

Google Charts Example

Below is some Google Chart Example Integrated with Qt Application and tested in Emulator. You can get more Examples on Google API Code Example. You can also find there complete html Page for each Example.

Gauge

This Script is use for display Meter type Visualization using Google API.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
 
function drawVisualization() {
// Create and populate the data table.
 
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Memory');
data.setValue(0, 1, 44);
data.setValue(1, 0, 'CPU');
data.setValue(1, 1, 88);
data.setValue(2, 0, 'Network');
data.setValue(2, 1, 11);
 
// Create and draw the visualization.
new google.visualization.Gauge(document.getElementById('visualization')).
draw(data);
}
 
//drawVisualization();
google.setOnLoadCallback(drawVisualization);
 
</script>


Screenshot

GMeter.png

Area Chart

This Script is use to display Area Chart. Here we use dummy data.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Some raw data (not necessarily accurate)
var countries =
['Bolivia', 'Ecuador',
'Madagascar', 'Papua Guinea', 'Rwanda'];
var months = ['2004/05', '2005/06', '2006/07', '2007/08', '2008/09'];
var productionByCountry = [[165, 135, 157, 139, 136],
[938, 1120, 1167, 1110, 691],
[522, 599, 587, 615, 629],
[998, 1268, 807, 968, 1026],
[450, 288, 397, 215, 366]];
 
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
for (var i = 0; i < countries.length; ++i) {
data.addColumn('number', countries[i]);
}
data.addRows(months.length);
for (var i = 0; i < months.length; ++i) {
data.setCell(i, 0, months[i]);
}
for (var i = 0; i < countries.length; ++i) {
var country = productionByCountry[i];
for (var month = 0; month < months.length; ++month) {
data.setCell(month, i + 1, country[month]);
}
}
// Create and draw the visualization.
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
isStacked: true,
width: 600,
height: 340,
vAxis: {title: "Cups"},
hAxis: {title: "Month"}
});
}
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

AreaChartSS.png

Bar Chart

This Script is use to display bar type Chart. Here we used dummy data.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Austria', 1336060, 1538156, 1576579, 1600652, 1968113, 1901067],
['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206],
['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965],
['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036]];
 
var years = [2003, 2004, 2005, 2006, 2007, 2008];
 
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
 
data.addRows(years.length);
 
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
 
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:340,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

BarChart.png

Column Chart

This Script is use to display Column type Chart. Here we used dummy data.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Austria', 1336060, 1538156, 1576579, 1600652, 1968113, 1901067],
['Belgium', 3817614, 3968305, 4063225, 4604684, 4013653, 6792087],
['Czech Republic', 974066, 928875, 1063414, 940478, 1037079, 1037327],
['Finland', 1104797, 1151983, 1156441, 1167979, 1207029, 1284795],
['France', 6651824, 5940129, 5714009, 6190532, 6420270, 6240921],
['Germany', 15727003, 17356071, 16716049, 18542843, 19564053, 19830493]];
 
var years = [2003, 2004, 2005, 2006, 2007, 2008];
 
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
 
data.addRows(years.length);
 
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
 
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:340,
hAxis: {title: "Year"}}
);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>


Screenshot

ColumnChart.png

Image Chart

This Script Dynamically generate chart Image for applied data.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var options = {};
// Chart API chart type 'rs' is radar chart
options.cht = 'rs';
 
// set the line colors
options.colors = ['#00FF00' , '#FF00FF'];
 
// fill the area under the lines
options.fill = true;
 
// create a grid for the chart
options.chg = '25.0,25.0,4.0,4.0';
 
dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows(8);
 
var pi = '\u03C0';
dataTable.setValue(0, 0, '0');
dataTable.setValue(1, 0, pi + '/4');
dataTable.setValue(2, 0, pi + '/2');
dataTable.setValue(3, 0, '3' + pi + '/4');
dataTable.setValue(4, 0, pi);
dataTable.setValue(5, 0, '5' + pi + '/4');
dataTable.setValue(6, 0, '3' + pi + '/2');
dataTable.setValue(7, 0, '7' + pi + '/4');
 
dataTable.setValue(0, 1, 10);
dataTable.setValue(1, 1, 20);
dataTable.setValue(2, 1, 30);
dataTable.setValue(3, 1, 40);
dataTable.setValue(4, 1, 50);
dataTable.setValue(5, 1, 60);
dataTable.setValue(6, 1, 70);
dataTable.setValue(7, 1, 80);
 
dataTable.setValue(0, 2, 100);
dataTable.setValue(1, 2, 80);
dataTable.setValue(2, 2, 60);
dataTable.setValue(3, 2, 30);
dataTable.setValue(4, 2, 25);
dataTable.setValue(5, 2, 20);
dataTable.setValue(6, 2, 10);
dataTable.setValue(7, 2, 5);
 
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>


Screenshot

ImageChart.png

Image Area Chart

Script

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imageareachart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addColumn('boolean', 'Smokes');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
data.setCell(0, 2, true);
data.setCell(1, 2, false);
data.setCell(2, 2, true);
 
// Create and draw the visualization.
new google.visualization.ImageAreaChart(document.getElementById('visualization')).
draw(data, null);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>


Screenshot

ImageAreaChart.png

Image Bar Chart

Script

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
 
var options = {};
 
// 'bhg' is a horizontal grouped bar chart in the Google Chart API.
// The grouping is irrelevant here since there is only one numeric column.
options.cht = 'bhg';
 
// Add a data range.
var min = 0;
var max = 700;
options.chds = min + ',' + max;
 
// Now add data point labels at the end of each bar.
 
// Add meters suffix to the labels.
var meters = 'N** m';
 
// Draw labels in pink.
var color = 'ff3399';
 
// Google Chart API needs to know which column to draw the labels on.
// Here we have one labels column and one data column.
// The Chart API doesn't see the label column. From its point of view,
// the data column is column 0.
var index = 0;
 
// -1 tells Google Chart API to draw a label on all bars.
var allbars = -1;
 
// 10 pixels font size for the labels.
var fontSize = 10;
 
// Priority is not so important here, but Google Chart API requires it.
var priority = 0;
 
options.chm = [meters, color, index, allbars, fontSize, priority].join(',');
 
// Create and draw the visualization.
new google.visualization.ImageChart(document.getElementById('visualization')).
draw(data, options);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>


Screenshot

ImageBarChart.png

Image Line Chart

Script

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagelinechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
 
// Create and draw the visualization.
new google.visualization.ImageLineChart(document.getElementById('visualization')).
draw(data, null);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

ImageLineChart.png

Image Pie Chart

Script

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagepiechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
 
// Create and draw the visualization.
new google.visualization.ImagePieChart(document.getElementById('visualization')).
draw(data, null);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

ImagePiaChart.png

Intensity Map

Script

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['intensitymap']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', '', 'Country');
data.addColumn('number', 'Population (mil)', 'a');
data.addColumn('number', 'Area (km2)', 'b');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);
 
// Create and draw the visualization.
new google.visualization.IntensityMap(document.getElementById('visualization')).
draw(data, null);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

IntensityMap.PNG IntensityMap2.PNG

Line Chart

Script

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
 
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 340,
vAxis: {maxValue: 10}}
);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

LineChart.PNG

Org Chart

Script

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['orgchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows(5);
data.setCell(0, 0, 'Mike');
data.setCell(0, 2, 'The President');
data.setCell(1, 0,
'Jim', 'Jim<br/><font color="red"><i>Vice President<i></font>');
data.setCell(1, 1, 'Mike');
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 'Mike');
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 'Jim');
data.setCell(3, 2, 'Bob Sponge');
data.setCell(4, 0, 'Carol');
data.setCell(4, 1, 'Bob');
 
// Create and draw the visualization.
new google.visualization.OrgChart(document.getElementById('visualization')).
draw(data, {allowHtml: true});
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

OrgChart.PNG

Pie Chart

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
 
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?"});
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>


Screenshot

PiaChart.PNG

Scatter Chart

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Shape 1');
data.addColumn('number', 'Shape 2');
for (var i = 0; i < 500; ++i) {
data.addRow([Math.sin(i / 5) * 0.25, Math.cos(i / 25), null])
}
for (var i = 0; i < 500; i++) {
data.addRow([Math.sin(i / 25), null, Math.cos(i / 10) * 0.5]);
}
 
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(
document.getElementById('visualization'));
chart.draw(data, {title: 'Cool shapes',
width: 600, height: 340,
vAxis: {title: "Y", titleTextStyle: {color: "green"}},
hAxis: {title: "X", titleTextStyle: {color: "green"}}}
);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>


Screenshot

ScatterChart.PNG

Sparkline

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagesparkline']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn("number", "Revenue");
data.addColumn("number", "Licenses");
data.addRows(10);
data.setValue(0,0,435);
data.setValue(1,0,438);
data.setValue(2,0,512);
data.setValue(3,0,460);
data.setValue(4,0,491);
data.setValue(5,0,487);
data.setValue(6,0,552);
data.setValue(7,0,511);
data.setValue(8,0,505);
data.setValue(9,0,509);
 
data.setValue(0,1,132);
data.setValue(1,1,131);
data.setValue(2,1,137);
data.setValue(3,1,142);
data.setValue(4,1,140);
data.setValue(5,1,139);
data.setValue(6,1,147);
data.setValue(7,1,146);
data.setValue(8,1,151);
data.setValue(9,1,149);
 
// Create and draw the visualization.
new google.visualization.ImageSparkLine(
document.getElementById('visualization')).draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

Sparkline.PNG

Image Multicolor Bar Chart

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
// This function applies color formatting to a bar chart,
// by calculating the color of each bar based on the data.
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number');
data.addRows([
['a', 14],
['b', 47],
['c', 80],
['d', 55],
['e', 16],
['f', 90],
['g', 29],
['h', 23],
['i', 58],
['j', 48]
]);
 
var red = 'ff0000';
var green = '00ff00';
var yellow = 'ffff00';
 
// Loop over the data table to create the color specification.
var colors = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
var value = data.getValue(i, 1);
var color = value < 20 ? red : (value < 80 ? yellow : green);
colors.push(color);
}
colors = colors.join('|');
 
var options = {cht: 'bvs', chco: colors, max: 100};
 
// Create and draw the visualization.
new google.visualization.ImageChart(document.getElementById('visualization')).
draw(data, options);
}
 
 
google.setOnLoadCallback(drawVisualization);
</script>

Screenshot

ImageMulticolorBarChart.PNG

Gauge Interaction

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
var gauge;
var gaugeData;
var gaugeOptions;
function drawGauge() {
gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', 'Engine');
gaugeData.addRows(2);
gaugeData.setCell(0, 0, 120);
 
 
gauge = new google.visualization.Gauge(document.getElementById('gauge'));
gaugeOptions = {
min: 0,
max: 280,
yellowFrom: 200,
yellowTo: 250,
redFrom: 250,
redTo: 280,
minorTicks: 5
};
gauge.draw(gaugeData, gaugeOptions);
}
 
function changeTemp(dir) {
gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
gauge.draw(gaugeData, gaugeOptions);
}
 
 
google.setOnLoadCallback(drawGauge);
</script>

Screenshot

GaugeMeterInteractionSS.png

Sample code for Integration to Qt

Here is sample code to integrate chart to Qt Application. Here I used "Querystring" to send data to webpage's JavaScript. There are also other methods. Also you can make simple fully web based Qt Application using QtWebkit. Check this QtWebKit: Cartoon Reader Example v1.2 for reference. You can also find this Cartoon Reader Example, its details and Documents on CartoonReader.

Source:

    /**
* Create the central widget
* and set it.
*/

QFrame* cW = new QFrame(this);
 
/**
* Set the layout to central widget.
*/

_layout = new QVBoxLayout(this);
cW->setLayout(_layout);
_layout->setMargin(0);
_layout->setSpacing(0);
 
/**
* Let's create the web view which
* will be used to display our page.
*/

_webView = new QWebView(this);
 
// Send data to the webpage in QueryString
_webView->load(QUrl("qrc:///html/Gauge.html?Mem=44&CPU=88&Network=11"));
 
_webView->show();
 
/** Add it to layout */
_layout->addWidget(_webView);

Html Web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
// get the Querystring Function
function getQuerystring(key, default_) {
if (default_ == null) default_ = "";
key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs == null)
return default_;
else
return qs[1];
}
 
function drawVisualization() {
 
// get the Querystring value and use it in function
var Mem = getQuerystring('Mem');
var CPU = getQuerystring('CPU');
var Network = getQuerystring('Network');
 
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Memory');
data.setValue(0, 1, parseInt(Mem));
data.setValue(1, 0, 'CPU');
data.setValue(1, 1, parseInt(CPU));
data.setValue(2, 0, 'Network');
data.setValue(2, 1, parseInt(Network));
 
// Create and draw the visualization.
new google.visualization.Gauge(document.getElementById('visualization')).
draw(data);
}
//drawVisualization();
google.setOnLoadCallback(drawVisualization);
 
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 340px;"></div>
</body>
</html>

Screenshot

GMeter.png

Disclaimer

The Google Code is one service of Google Inc.


-- chintandave_er 05:38, 9 December 2010 (UTC)

This page was last modified on 31 October 2013, at 23:36.
214 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×