Google visualisation - Chart table add column with chart line

Google visualisation - Chart table add column with chart line - javascript

I'm actually working with the google visualisation API for a google app engine.
The API works great to build values table, here is the javascript that I use :
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}
But do you think it is possible to add a column which type is a new chart ? For example : data.addColumn('Chart line', 'Graphic Title');
Thanks,

Related

Exporting google visualization data table to PDF

I'm currently using the google visualization library to display data in a table view. However, I'm not able to export the table into a PDF format. I tried to adapt the solution of previous asked question as well as the google api references but for some reason neither of them work for me:
How to convert and download chart to pdf?
https://developers.google.com/chart/interactive/docs/printing
var imgData;
var id = 'chart_div';
google.charts.load('current', {
'packages': ['Table']
});
google.charts.setOnLoadCallback(function () {
drawTable();
});
var ctx = this.shadowRoot.getElementById('chart_div');
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true]
]);
var table = new google.visualization.Table(ctx);
table.draw(data,{showRowNumber: false, width: '100%', height: '100%'});
imgData = table.getImageURI()
generatePDF();
function generatePDF() {
var doc = new jsPDF();
doc.setFontSize(33);
doc.setFillColor(135, 124,45,0);
doc.addImage(imgData, 'png', 10, 10, 150, 100);
doc.save('sample.pdf');
}
The function only works, when replacing:
google.charts.load('current', {
'packages': ['Table']
});
by
google.charts.load('current', {
'packages': ['corechart']
});
and changing the new google.visualization.Table(ctx)
to new google.visualization.ColumnChart(ctx);
I think that this has to do with the visualization type i'm using but is there any way to make this work ?
I hope that you can help me out.
Thanks.

Google geo chart map: tooltip without region name

I'm creating a Google GeoChart Map and I can customize the tooltip, but I can't seem to get rid of the name of region in it. I'm creating a map of Poland and Google GeoChart Map uses ISO 3166-2 standard for regions and it shows the code of the province in the tooltip which just looks bizarre.
This is the code
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Województwo');
data.addColumn('number', 'Frekwencja');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');
data.addRows( [
['PL-DS', 60, '<p>Dolnośląskie</p>60%'],
['PL-KP', 62, '<p>Kujawsko-Pomorskie</p>62%'],
['PL-LU', 59, '<p>Lubelskie</p>59%'],
['PL-LB', 61, '<p>Lubuskie</p>61%']
])
var options = {
region: 'PL',
resolution: 'provinces',
datalessRegionColor: 'transparent',
displayMode: 'regions',
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
And I end up with something like this:

you can use object notation for data table values
you can provide both the value (v:) and formatted value (f:)
{v: 'PL-DS', f: ''}
the tooltip will display the formatted value by default,
supply a blank string to remove it from the tooltip...
see following working snippet...
google.charts.load('current', {
packages: ['geochart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Województwo');
data.addColumn('number', 'Frekwencja');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');
data.addRows([
[{v: 'PL-DS', f: ''}, 60, '<p>Dolnoslaskie</p>60%'],
[{v: 'PL-KP', f: ''}, 62, '<p>Kujawsko-Pomorskie</p>62%'],
[{v: 'PL-LU', f: ''}, 59, '<p>Lubelskie</p>59%'],
[{v: 'PL-LB', f: ''}, 61, '<p>Lubuskie</p>61%']
]);
var options = {
region: 'PL',
resolution: 'provinces',
datalessRegionColor: 'transparent',
displayMode: 'regions',
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>

Google Charts: Plotting mutiple "Y" values on same "X" value

I am using scatter plot of Google Charts.
This is what I currently have:
I am plotting values against named entities (On X axis). The entities can have multiple Blue/Red values. Referring to the screenshot above, I would like the blue dot to plot above A1, instead of A1 getting duplicated.
Can this be done?
Here is my code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Blue Value');
data.addColumn('number', 'Red Value');
data.addRows([
['A1', 3500, 4500],
['A1', 4000, null],
['A2', 3700, 4100],
['A3', 3110, 4200],
['A4', 3600, 4300]
]);
// Set chart options
var options = {'title':'My Title',
'width':800,
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

by default, a discrete axis (string values) will show all x-axis values,
even if they repeat
to get the desired chart, you could use a continuous axis (number values),
and use object notation to format the values and the axis labels (ticks)
object notation allows you to provide both the value (v:) and the formatted value (f:)
{v: 1, f: 'A1'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Name');
data.addColumn('number', 'Blue Value');
data.addColumn('number', 'Red Value');
data.addRows([
[{v: 1, f: 'A1'}, 3500, 4500],
[{v: 1, f: 'A1'}, 4000, null],
[{v: 2, f: 'A2'}, 3700, 4100],
[{v: 3, f: 'A3'}, 3110, 4200],
[{v: 4, f: 'A4'}, 3600, 4300]
]);
var options = {
title: 'My Title',
width: 800,
height: 500,
hAxis: {
gridlines: {
color: 'transparent'
},
ticks: [
{v: 0.5, f: ''},
{v: 1, f: 'A1'},
{v: 2, f: 'A2'},
{v: 3, f: 'A3'},
{v: 4, f: 'A4'}
]
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Color google virtualization boolean column

I am trying to use the ColorPattern formatter to color the cell that contains boolean data but not having any luck.
Anyone know if this is possible or whether you have to go about it a different way because its boolean data?
Fiddle here
Code
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var formatter = new google.visualization.ColorFormat();
formatter.addRange(true, true, 'red', 'red');
formatter.format(data, 2); // Apply formatter to second column
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

ColorFormat assigns colors to the foreground or background of numeric cells
however, table charts are unique, using custom cell properties placed in the data, you can assign...
className - A string class name to assign to an individual cell. Use this to assign CSS styling to individual cells.
style - A style string to assign inline to the cell. This will override CSS class styles applied to that cell. You must set the property allowHtml=true for this to work. Example: 'border: 1px solid green;'.
to use either, you must set this option --> allowHtml: true
ref: table chart data format
see following working snippet, which implements style...
google.charts.load('current', {
callback: drawTable,
packages:['table']
});
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, {v: true, p: {style: 'background-color: red;'}}],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, {v: true, p: {style: 'background-color: red;'}}],
['Bob', {v: 7000, f: '$7,000'}, {v: true, p: {style: 'background-color: red;'}}]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {
allowHtml: true,
showRowNumber: true,
width: '100%',
height: '100%'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
EDIT
use setProperty to set the property dynamically
see following working snippet...
google.charts.load('current', {
callback: drawTable,
packages:['table']
});
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
// check each row
for (var i = 0; i < data.getNumberOfRows(); i++) {
// check boolean value
if (data.getValue(i, 2)) {
data.setProperty(i, 2, 'style', 'background-color: red;');
}
}
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {
allowHtml: true,
showRowNumber: true,
width: '100%',
height: '100%'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

Google charts and google table not displaying simultaneously

I am using google charts and google table for my project. The problem is that, I am not able to display two google charts and one google table on a single page. How can this be solved?
My code:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages': ['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?= $jsonTable ?>);
var options = {
title: ' Audit Schedule ',
is3D: 'true',
width: 500,
height: 250
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
width: 501.2,
height: 250
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
//html code
<div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br>
<div class="chart-wrapper">
<div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div>
</div><br>
<div id="table_div"></div>
Link to google charts: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles

You have defined multiple instances of google.charts.setOnLoadCallback(). This function should only be defined ONCE in your code, because otherwise you'll be overwriting the callback event everytime. Anyway, you should wrap all your chart drawing functions in something like :
function drawCharts(){
drawchart1();
drawchart2();
drawwhateveryouwant();
}
google.setOnLoadCallback(drawCharts);
Also, I might have to point out that you have two functions with the same name ^^, you might want to correct that. Other than that, you might want to call all your chart packages at once by doing this since I also noticed that you were loading the same package twice, which is a waste of resources even if it doesn't stop your code from functioning correctly :
google.load('visualization', '1', {'packages': ['corechart','table']});
I modified your code a bit to help you towards achieving desired results :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="piechart"></div>
<div id="table_div"></div>
</body>
<script>
google.charts.setOnLoadCallback(init);
google.charts.load('current', {'packages':['corechart','table']});
//Function to draw piechart
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
width: 501.2,
height: 250
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
};
//Function to draw table
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
//Function to initialize everything
function init(){
drawTable();
drawChart();
}
</script>
</html>
You'll forgive me for skipping the chart with JSON data though :p

We Keep Coding

JavaScript is the programming language of the Web.

Google visualisation - Chart table add column with chart line - javascript

Related

Exporting google visualization data table to PDF

Google geo chart map: tooltip without region name

Google Charts: Plotting mutiple "Y" values on same "X" value

Color google virtualization boolean column

Google charts and google table not displaying simultaneously

Categories

Resources