I'm using google donut chart, but it's showing the title and bullets.
I need to know how to remove them and make the chart fit inside the card.
<div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
<div class="card">
<h5 class="card-header">Credits History</h5>
<div class="card-body">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
<div id="donutchart" style="width: 220px; height: 155px;"></div>
</div>
</div>
</div>
to remove the chart title, remove the title option from the chart options.
as for the bullets, or bulletins, that is the chart's legend,
to remove, add the following option --> legend: 'none'
and you can use the chartArea option to maximize the chart within the container.
var options = {
chartArea: {
height: '100%',
width: '100%'
},
legend: 'none',
pieHole: 0.4
};
see following working snippet...
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]
]);
var options = {
chartArea: {
height: '100%',
width: '100%'
},
legend: 'none',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 220px; height: 155px;"></div>
Related
Here's my google pie chart. Right now, I can right click and save image as PNG.
However I need the image download to happen automatically on a specified folder when the page loads.
I tried various canvas options however couldn't get anything to work.
Download SVG as a PNG image
save google gauge chart as a png
Can someone help?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img src=' + chart.getImageURI() + '>';
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="JSFiddle">
<div id="piechart_3d" style="width: 1100px; height: 500px;"></div>
</div>
</body>
</html>
You can achiev a download with the download html-attribute.
example:
<a href="/image.png" download>
To achiev that in your app do this:
add a download link
<a id="download_link" href="/" download="">download</a>
and change its href attribute as soon as the chart loaded
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
});
if you want to download to happen automatically as soon as the page loaded:
make the a tag invisible
<a style="display:none" id="download_link" href="/" download="">download</a>
and fire a click event directly on it
document.getElementById("download_link").click();
so the google.visualization.events.addListener function should look like this:
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
the whole code should look like this: (auto-download)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="piechart_3d"></div>
<a style="display:none" id="download_link" href="/" download>download</a>
</body>
<script>
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',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
chart.draw(data, options);
}
</script>
</html>
selecting a folder to put in the download is not possible (for security reasons)
I would like to move the annotation to the bottom or the top of the Google Chart API as the image below. I've tried with magin-bottom: 50px, padding-bottom: 50px or bottom: 50px but these didn't work to me.
HTML:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
You have a option to move bottom using "legend" keyword.
Update your options part like below.
var options = {
legend: 'bottom',
title: 'Company Performance'
};
FIDDLE DEMO
I have a line chart created in Google Charts API, Now I want to change the LIne Colour and body colour differently,But when i created a chart i can see line and body colour same , please can any one let me know how to change the colours using google API
<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([
['',''],
['',27],
['',25],
['',60],
['',31],
['',25],
['',39],
['',25],
['',31],
['',26],
['',28],
['',80],
['',28],
['',27],
['',31],
['',27],
['',29],
['',26],
['',35],
['',70],
['',25]
]);
var options = {
backgroundColor: {
stroke: '#4322c0',
strokeWidth: 3},
'is3D':true,
series: {0:{color:'#DF013A',lineWidth:2}},
colors:['#D8D8D8'],
backgroundColor: "transparent",
legend: {position: 'none'}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 300px; height: 300px;"></div>
</body>
</html>
<body>
<div id="chart_div"></div>
</body>
</html>
Please refer the below developer documentation to change the line series color and the background color:
Line series color
BG color
I'm using the google-chart-api to draw a graph using ChartWrapper class and ControlWrapper class. Here is the code I have been using.
This is the function to load hard-coded data.
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['TimeLine', 'Time-Option', 'LOC', 'Comments'],
['Monthly', '1', 200, 20],
['Monthly', '2', 300, 30],
['Weekly', '1', 150, 15],
['Weekly', '3', 35, 3],
['Daily', '1', 230, 23],
['Daily', '2', 178, 17],
]);
This is my ControlWrapper.
var timelinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'Timeline',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
And this is my ChartWrapper.
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
'width': 900,
'height': 500,
'chartArea': {top: 0, right: 0, bottom: 0}
},
'view': {'columns': [1, 2]}
});
new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
}
google.setOnLoadCallback(drawVisualization);
And to view the graph,
<body>
<div id="chart">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
But still, I don't get any output. Any idea what has gone wrong here?
Strong suggestion: always try to debug your own code first. There are oh-so-many careless mistakes in there that could be easily caught if you used firebug or the like to catch errors.
Error #1: DashBoard -> Dashboard
Wrong: new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
Right:
new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);`
Error #2: TimeLine -> Timeline
Wrong: 'filterColumnLabel': 'Timeline',
Right: 'filterColumnLabel': 'TimeLine',
Error #3: chart -> dashboard
Wrong: new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
Right: new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
Correct the HTML as well (you have two divs with the 'chart' id):
<body>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
Final Working Version
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['TimeLine', 'Time-Option', 'LOC', 'Comments'],
['Monthly', '1', 200, 20],
['Monthly', '2', 300, 30],
['Weekly', '1', 150, 15],
['Weekly', '3', 35, 3],
['Daily', '1', 230, 23],
['Daily', '2', 178, 17],
]);
var timelinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'TimeLine',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
'width': 900,
'height': 500,
'chartArea': {top: 0, right: 0, bottom: 0}
},
'view': {'columns': [1, 2]}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
My Problem is, when i put js code of any google chart in an external javascript file. it start loading page and dosen't display any thing. in case of inline javascripts its working fine.
following is my HTML code "google barchart.html"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn" value="Show Graph" />
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</body>
</html>
and this is my js file "test.js"
$(document).ready(function() { $('#btn').click(function() { //alert("hi");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
//title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
} }); });
*NOTE: it also working fine in external js when this piece of code is not in any js function. but i want to use this in Javascript function.
Thnx in advance.
Moaz
I fixed up your code into 2 working solutions you may use (tested working with IE, Chrome and Mozilla).
JavaScript loads with index page
JavaScript loads after button click
.
Solution 1: JavaScript loads with index page
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test.js
google.load('visualization', '1', {'packages':['corechart']});
$(document).ready(function() {
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip: {trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
Solution 2: JavaScript loads after button click
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
function loadjsfile(filename, filetype)
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test2.js
$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip:{trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});