I am using screenfull.js to allow a Google chart to be viewed in fullscreen.
I want the chart to use 100% of the screen width/height when in full screen mode but be a specific size otherwise (width: 100%; height: 200px). The problem is that my current code results in black bars above and below the chart in fullscreen mode. What am I doing wrong?
My fiddle is here
HTML:
<html>
<body>
<input type="button" value="Full Screen Mode" id="button1">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
<script>
</script>
<div id="piechart" style="width: 100%; height: 200px;"></div>
</body>
</html>
Javascript (which adapts the Google pie chart example code):
$(function() {
$('#button1').click(function() {
screenfull.request(document.getElementById('piechart'));
})
})
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'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
$(window).resize(function() {
chart.draw(data, options);
});
}
the style attribute on the chart's container will need to be changed once in full screen mode,
or else it will still be height: 200px;
let's use a css class instead, then we can listen for screenfull's 'change' event,
and switch the class name, then re-draw the chart, just to be safe
screenfull.on('change', function () {
if (screenfull.isFullscreen) {
chartContainer.className = 'chart-full';
} else {
chartContainer.className = 'chart-normal';
}
drawChart();
});
next, the chart will not fill the container completely by default,
we can use the following config options to maximize the chart
chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 16,
right: 16,
bottom: 16
},
height: '100%',
width: '100%'
see following snippet...
js
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
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',
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 16,
right: 16,
bottom: 16
},
height: '100%',
width: '100%'
};
var chartContainer = $('#piechart').get(0);
var chart = new google.visualization.PieChart(chartContainer);
$('#button1').click(function() {
if (screenfull.enabled) {
screenfull.request(chartContainer);
screenfull.on('change', function () {
if (screenfull.isFullscreen) {
chartContainer.className = 'chart-full';
} else {
chartContainer.className = 'chart-normal';
}
drawChart();
});
}
})
drawChart();
$(window).resize(drawChart);
function drawChart() {
chart.draw(data, options);
}
});
css
.chart-normal {
height: 200px;
}
.chart-full {
height: 100%;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" value="Full Screen Mode" id="button1">
<div class="chart-normal" id="piechart"></div>
working fiddle --> https://jsfiddle.net/0m3x6aea/
Related
How I can modify the size of bar width of google chart column? I tried to add 'bar: { groupWidth: "20%" }' but it does nothing to the chart.
I really wanted it to make it thinner.
Here is the code that I want to use from google chart:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>
</html>
According to the documentation,
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
One of these options is the bar.groupWidth, which seems to not have support yet.
In this case, since you are working with a group of bars and there's only one array of information in data:
['2017', 1030, 540, 350]
then that option doesn't seem to work. However, if there were two or more groups, it seemed to render but in a limited way. This said, I was able to find some workarounds, each one with its own positive aspects and drawbacks.
Change from Material Charts to Classical Charts
Here you have to reconstruct the chart's code following the Classical one
Pros: options fully supported
Cons: you will change from Material Charts to Classical Charts
google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Financial status',{ role: "style" }],
["Sales", 1030, "#4285f4"],
["Expenses", 540, "#db4437"],
["Profit", 350, "f4b400"],
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Company Performance",
subtitle: "Sales, Expenses, and Profit: 2017",
width: 600, // chart width
bar: { groupWidth: "45%" }, // width of bars here
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Separate that only group of bars into single bars
Put that only group bar in different arrays and adapt your labels
Pros: the width will indeed change from 0 to 100% in groupWidth
Cons: looses colored bars
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Financial status'],
["Sales", 1030],
["Expenses", 540],
["Profit", 350],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017',
},
bar: { groupWidth: '50%' }, // change width here
width: 600, // width of the chart
height: 400 // height of the chart
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">
Use meaningless arrays
Put the array of information in the middle of two other meaningless arrays so
that you center your main data and gives the impression
Pros: still uses the Material Chart design
Cons: stretches the bars, doesn't provide space between bars
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
[' ', 0, 0, 0], // meaningless
['2017', 1030, 540, 350],
[' ', 0, 0, 0] // meaningless
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017',
},
bar: { groupWidth: '90%' }, // change width of bar here,
width: 600, // width of the chart
height: 400, // height of the chart
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">
I am trying to sum the minutes of two bars on a bar chart and it breaks. jsfiddle
I'm basing myself on the example from the Stacked column charts, but I can't get it to work with "H: i: s"
this is my code
var GoogleColumnBasic = function() {
var _googleColumnBasic = function() {
google.charts.load('visualization', '1.0', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dtos= [];
var data = google.visualization.arrayToDataTable([
['','preparation time ', 'time when he retired',
{ role: 'annotation' } ],
['box 1', '00:43:22', '00:03:22', ''],
['box 2', '00:13:22', '00:73:22' , ''],
['box 3', '00:23:22', '00:53:22', '']
]);
var options = {
height: 350,
isStacked: true
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
//chart.draw(data, options);
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
return {
init: function() {
_googleColumnBasic();
}
}
}();
GoogleColumnBasic.init();
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
thanks.
you can use a 'timeofday' column, see working with timeofday.
The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively. Using timeofday is different than using date and datetime in that the values are not specific to a date, whereas date and datetime always specify a date. For example, the time 8:30am would be: [8, 30, 0, 0], with the 4th value being optional ([8, 30, 0] would output the same timeofday value).
the data table used to draw the chart would be similar to the following...
var data = google.visualization.arrayToDataTable([
['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
['Caja 1', [0, 43, 22], [0, 3, 22], ''],
['Caja 2', [0, 13, 22], [0, 73, 22], ''],
['caja 3', [0, 23, 22], [0, 53, 22], '']
]);
see following working snippet...
var GoogleColumnBasic = function() {
var _googleColumnBasic = function() {
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
['Caja 1', [0, 43, 22], [0, 3, 22], ''],
['Caja 2', [0, 13, 22], [0, 73, 22], ''],
['caja 3', [0, 23, 22], [0, 53, 22], '']
]);
var options = {
height: 350,
isStacked: true,
colors: ['#4285f4', '#a1c2fa'],
theme: 'material',
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 64,
height: '100%',
width: '100%'
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, (options));
}
}
return {
init: _googleColumnBasic
}
}();
GoogleColumnBasic.init();
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart_div {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTES
the jsapi loader has been deprecated and should no longer be used.
instead, use the new loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, see above snippet.
do not recommend using a material chart. (google.charts.Bar)
they do not work well with 'timeofday' columns,
they do not support column roles such as 'annotation',
AND many of the chart options simply do not work, see Tracking Issue for Material Chart Feature Parity
instead, we can use option --> theme: 'material' on a classic chart (google.visualization.ColumnChart)
I can able to create a 3d pie chart using google charts,but while rotating it's converting to 2d pie chart even though i set the options is3D:true, can anyone please help me how to fix this issue.
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,
pieHole: 0.25,
pieStartAngle: 0,
animation:
{
startup: true,
duration: 2000,
easing: 'out'
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(chart, 'ready', function () {
if (options.pieStartAngle < 360) {
options.pieStartAngle++;
// options.is3D = true;
setTimeout(function () {
// options.is3D = true;
chart.draw(data, options);
}, 1);
}
});
// options.is3D = true;
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
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.