Re-sizing Google chart in window - javascript

Please help me how to automatically re-size the Google chart when the windows re-size too.
Here is some code:
<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([
['Day', 'Open ticket', 'Closed ticket'],
['Day 1', 10, 400],
['Day 2', 170, 460],
['Day 3', 60, 1120],
['Day 4', 30, 540],
]);
var options = {
title: 'DAILY GRAPH',
hAxis: {title: 'NOVEMBER', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

Here's one way:
Add this event handler:
window.onresize = drawChart;
Then base the chart width and height on a percentage of the window's width and height:
var width = .4 * window.innerHeight;
var height = .4 * window.innerWidth;
var options = {
title: 'DAILY GRAPH',
width: width,
height: height,
hAxis: { title: 'NOVEMBER', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 }
};

You can have width and height defined in percentages in head section, for example:
<style>
#chart_div {
width: 80%;
height: 100%;
}
</style>
and add event listener for resize of window to the end of drawChart() method:
...
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
window.addEventListener('resize', function() {
chart.draw(data, options);
}, false);
}
See example at jsbin

Related

How can I create a column chart with dynamic data

I am using google charts, and I would like to get a column chart with a fixed period, but dynamic values.
This is an example of a column chart, with fixed values, I would like to use the variables that are in the code after the comment (variables i would like to use) taking into account that columns and values are not always the same size.
function drawChart() {
// Simple example
var data = google.visualization.arrayToDataTable(
[ ['Year', 'Example 1', 'Example 2', 'Example 3'],
['2004', 1000, 400, 100],
['2005', 1170, 460, 500],
]);
// variables i would like to use
// These variables are fixed
var periodOne = '2004';
var periodTwo = '2005';
// non-fixed variables, variables that I will receive and that will not always be the same size.
var columns = ['Example 1', 'Example 2', 'Example 3'];
var valuesP1 = [1000, 400, 100];
var valuesP2 = [1170, 460, 500];
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
to build dynamically, start with a blank data table...
// create blank data table
var data = new google.visualization.DataTable();
add a column for the period / year...
// add period column
data.addColumn('string', 'Year');
add the dynamic columns...
// add columns
columns.forEach(function (label) {
data.addColumn('number', label);
});
add the period / year to the row values...
// add period to data
valuesP1.splice(0, 0, periodOne);
valuesP2.splice(0, 0, periodTwo);
add the row values to the data table...
// add data
data.addRow(valuesP1);
data.addRow(valuesP2);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// These variables are fixed
var periodOne = '2004';
var periodTwo = '2005';
// non-fixed variables, variables that I will receive and that will not always be the same size.
var columns = ['Example 1', 'Example 2', 'Example 3'];
var valuesP1 = [1000, 400, 100];
var valuesP2 = [1170, 460, 500];
// create blank data table
var data = new google.visualization.DataTable();
// add period column
data.addColumn('string', 'Year');
// add columns
columns.forEach(function (label) {
data.addColumn('number', label);
});
// add period to data
valuesP1.splice(0, 0, periodOne);
valuesP2.splice(0, 0, periodTwo);
// add data
data.addRow(valuesP1);
data.addRow(valuesP2);
// draw chart
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
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>

Labels on google charts are not visible in specific coonfiguration

I have chart configured like in working jsfiddle.
I have configured labels(basing on google doc documentation: https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars)
But they aren't visible. When I change chart type to google.visualization.BarChart, then labels appear but bars structure is destroyed. How to add labels to my configuration?
Replicated:
https://jsfiddle.net/41fmq37j/
JS:
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[{label: 'Year', id: 'year', type: 'number'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{ role: 'annotation' }],
[2014, 10, 400 ,'label1'],
[2014, 800, 100 ,'label2'],
[2015, 200, 460 ,'label3'],
[2015, 110, 660 ,'label4'],
[2016, 100, 300 ,'label5'],
[2016, 600, 120 ,'label6'],
[2017, 360, 540 ,'label7'],
[2017, 300, 500 ,'label8']
]);
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT:
It is possible to configure yAxis like below? Because current format can be confusing.
I would like to create more, a little different graphs, for example which will group bars by string. So another question is: how we can archive grouping yAxis by string? Maybe we should create any comparator?
material charts do not support columns roles, such as 'annotation',
along with several other options
and, it's not possible to have multiple stacks per label in classic charts
as such, we can use a material chart,
and add our own annotations manually,
on the chart's 'ready' event
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[
{label: 'Year', id: 'year', type: 'number'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{role: 'annotation', type: 'string'}
],
[2014, 10, 400, 'label1'],
[2014, 800, 100, 'label2'],
[2015, 200, 460, 'label3'],
[2015, 110, 660, 'label4'],
[2016, 100, 300, 'label5'],
[2016, 600, 120, 'label6'],
[2017, 360, 540, 'label7'],
[2017, 300, 500, 'label8']
]);
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
vAxis: {
format: '0'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
// add annotations
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var copyLabel;
var coordsBar;
var coordsLabel;
var labels;
var svg;
// get svg
svg = container.getElementsByTagName('svg')[0];
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.textContent === data.getValue(0, 0).toString()) {
copyLabel = label;
}
});
// find top bars, add labels
bars = svg.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar, index) {
coordsBar = bar.getBBox();
annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
coordsLabel = annotation.getBBox();
annotation.textContent = data.getValue(index, 3);
annotation.setAttribute('fill', '#000000');
annotation.setAttribute('x', coordsBar.x + coordsBar.width - 16);
annotation.setAttribute('y', coordsBar.y + coordsBar.height - (coordsLabel.height / 2));
annotation.style.zIndex = -1;
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
the annotation script finds the first y-axis label,
and uses it as a clone for the annotations.
if the values for the y-axis change,
then the script to find the label needs to change.
updated here...
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
// find first y-axis label
if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
annotation = label;
}
});
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[
{label: 'Date', id: 'string', type:'date'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{role: 'annotation', type: 'string'}
],
[new Date('2011-12-20'), 10, 400, 'User1'],
[new Date('2011-12-20'), 800, 100, 'User2'],
[new Date('2011-12-21'), 200, 460, 'User3'],
[new Date('2011-12-21'), 200, 460, 'User3'],
]);
var dateFormat = 'YYYY/MM/dd';
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
vAxis: {
format: dateFormat,
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var formatDate = new google.visualization.DateFormat({
pattern: dateFormat
});
// add annotations
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var copyLabel;
var coordsBar;
var coordsLabel;
var labels;
var svg;
// get svg
svg = container.getElementsByTagName('svg')[0];
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
// find first y-axis label
if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
copyLabel = label;
}
});
// find top bars, add labels
bars = svg.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar, index) {
coordsBar = bar.getBBox();
annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
coordsLabel = annotation.getBBox();
annotation.textContent = data.getValue(index, 3);
annotation.setAttribute('fill', '#ffffff');
annotation.setAttribute('text-anchor', 'start');
annotation.setAttribute('x', coordsBar.x + coordsBar.width);
annotation.setAttribute('y', coordsBar.y + (coordsBar.height / 2) + (coordsLabel.height / 2));
annotation.style.zIndex = -1;
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How can I add different colors to bar in Column chart

How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help.
Below is the code snippet:
tdata.addRow([col1, arr[0].Manual])
tdata.addRow([col2, arr[0].Auto]);
tdata.addRow([col3, arr[0].Amount]);
options = {
fontSize: 12,
height: 430,
width: 380,
chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
backgroundColor: '#f5f5f5',
title: 'Project',
pieSliceText: 'value',
colors: ['red', 'green', 'blue'],
'is3D': true
};
var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
chart.draw(tdata, options);
return false;
the colors option applies colors to each series
so if you have 3 colors
you would need 3 y-axis columns
as follows...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['A', 100, 120, 130]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'green', 'blue']
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to color individual columns within a series,
use a 'style' column role
as follows...
note: using a 'style' column role will invalidate the legend
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y', {role: 'style', type: 'string'}],
['A', 100, 'red'],
['B', 120, 'green'],
['C', 130, 'blue']
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
This is answer according to google document, use color property instead of background color.
var options = { width: 400, height: 240, title: 'Toppings I Like On My Pizza', colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };
chart.draw(data, options);
you can find more here

Adding different colored bar in Column chart [duplicate]

How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help.
Below is the code snippet:
tdata.addRow([col1, arr[0].Manual])
tdata.addRow([col2, arr[0].Auto]);
tdata.addRow([col3, arr[0].Amount]);
options = {
fontSize: 12,
height: 430,
width: 380,
chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
backgroundColor: '#f5f5f5',
title: 'Project',
pieSliceText: 'value',
colors: ['red', 'green', 'blue'],
'is3D': true
};
var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
chart.draw(tdata, options);
return false;
the colors option applies colors to each series
so if you have 3 colors
you would need 3 y-axis columns
as follows...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['A', 100, 120, 130]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'green', 'blue']
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to color individual columns within a series,
use a 'style' column role
as follows...
note: using a 'style' column role will invalidate the legend
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y', {role: 'style', type: 'string'}],
['A', 100, 'red'],
['B', 120, 'green'],
['C', 130, 'blue']
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
This is answer according to google document, use color property instead of background color.
var options = { width: 400, height: 240, title: 'Toppings I Like On My Pizza', colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };
chart.draw(data, options);
you can find more here

Wrapping text of x-Axis Labels for Google Visualization Charts

I cannot seem to wrap my label for my column chart. I tried fiddling around with the options but it doesn't make any difference.
This is my current chart view, as you can see the label for column 2 has completely disappeared as the column 1 label has overlapped:
this is my Column Chart View:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
#Html.Raw(rows)]);
var options = {
title: '',
'width': 800,
'height': 500
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
</script>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
You can reduce the font size down to 11 to get the label to show...
var options = {
'title': '',
'width': 800,
'height': 500,
'hAxis': {'textStyle': {'fontSize': 11}}
};
To do so, you will need to convert your options...
chart.draw(data1, google.charts.Bar.convertOptions(options));
you may draw a classical ColumnChart (when it is an option):
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
['Commerce, Law and Managment', 4, 9, 9, 1],
['foobar',2,2,2,3],
['Health Sciences', 0,2,3,1],
['Humanities', 0, 1, 1, 0],
['Science', 0, 0, 0, 1]
]);
var options = {
title: '',
'width': 800,
'height': 500,
vAxis: {
gridlines: {
count: 10
}
}
};
var chart = new google.visualization
.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Categories