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
Related
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.
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>
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,
I have a pie chart that contains various values. When hovering over a slice of the pie, the value is displayed. I'd like to make the value displayed a percentage. For example, I want 11 to be 11%. Is it possible to add a percent symbol to all values when hovering over the slice? Here's my jsFiddle.
HTML
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JS
google.load("visualization", "1", {
packages: ["corechart"]
});
google.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',
tooltip: {
text: 'value'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
the tooltip will display the formatted value of the row by default
format the data table column before drawing the chart...
var formatNumber = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatNumber.format(data, 1);
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var formatNumber = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatNumber.format(data, 1);
var options = {
title: 'My Daily Activities',
tooltip: {
text: 'value'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Curious about your use case, but this works. Google visualization allows you to add custom labels for each data point.
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day')
data.addColumn({type:'string', role:'tooltip'})
data.addRows([
['Work', 11, '11%'],
['Eat', 2, '2%'],
['Commute', 2, '2%'],
['Watch TV', 2, '2%'],
['Sleep', 7, '7%']
]);
var options = {
title: 'My Daily Activities',
tooltip: {
text: 'value'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I'm looking for a way to consistently color the last slice in a google pie chart. The last slice is titled other and I won't always know how many other slices are showing. I set up the following bin...
http://jsbin.com/sugere/1/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
I considered making Other the first item that comes back which would allow me to target the first item's color, but then I would need some way of rotating the pie chart back. As far as I can tell you can only do that by percentage and not by number of slices.
If you want to change color of the slice you have an option on this chart.
Link
https://developers.google.com/chart/interactive/docs/gallery/piechart
Example
slices: [{color: 'black', {}, {}, {color: 'red'}] // order of the slice
slices: {0: {color: 'black'}, 3: {color: 'red'}} // number of the slice
Your code modified
I am taking the liberty to change all color on the first chart and just change the last slice.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: { color: 'blue' },
1: { color: 'red' },
2: { color: 'orange' },
3: { color: 'grey' },
4: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2',
slices: {
3: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
I believe you are looking for pieResidueSliceColor
See https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options
This is the color for the 'Other' category for the data meeting your specified threshold.
However, if you are not using the threshold other then to use Hann's option you could just figure out the index of your last data point array and use the slices:{idxYourFiguredOut:{fontColor:'red'}} but the api has something built in.