Google Visualization explorer options won't have any effect after chart redraw - google-visualization

How can I keep zoom-in, zoom-reset functionality after chart redraw? It seems like these options stop working after I use zoom-in option and then redraw the chart. What am I missing? My code is:
google.charts.load('current', {'packages':['corechart','table']});
function drawChart(data, chartType) {
var w = document.getElementById('chart_div').clientWidth;
var h = w * 0.5;
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization[chartType](document.getElementById('chart_div'));
var columns = [];
var series = {};
for(var i = 0; i < data.getNumberOfColumns(); i++) {
//push default columns
columns.push(i);
if (i > 0) {
series[i-1] = {};
}
}
var options = {
height: h,
series: series,
chartArea: {width: "65%", height: "65%"},
legend: {textStyle: {fontSize: 12}},
hAxis: {title: 'Date', titleTextStyle: {color: '#333'}, slantedTextAngle:80, format: 'yyy-MM-dd'},
vAxis: {title: 'GUIDs'},
explorer: {actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoom: 20}}
function redraw() {
chart.draw(data, options);
}
var view = new google.visualization.DataView(data);
window.addEventListener('resize', redraw, false);
chart.draw(view, options);
}

Related

Removing vertical separation bar in google bar chart

How can i hide the vertical bar that separates the values on the left and the bars on the right?
for bar charts, set hAxis.baselineColor to 'transparent', to hide the vertical bar
set hAxis.gridlines.count to zero, so the baseline isn't replaced with a gridline
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addRows([
['UK', 8.94],
['AF', 10.49],
['UN', 20.2],
['SK', 21.45],
]);
var options = {
legend: {
position: 'none'
},
hAxis: {
baselineColor: 'transparent',
gridlines: {
count: 0
}
},
vAxis: {
baselineColor: 'magenta'
},
width: 200
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart vAxis title being cut off and needs to move closer to axis

I'm trying to use Google charts to display the results of a survey. All seems fine, apart from the title of the vAxis is being cut off slightly and I can't work out how to move it closer to the axis.
This is the code:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have a fiddle here:
https://jsfiddle.net/SBComms/pa4yLcb3/
With a Core Chart, you can adjust the size of the chartArea to allow room for the title.
However, this doesn't appear to work for a Material Chart.
Also, I would recommend loading with loader.js vs. the older library jsapi.
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
chartArea: {
backgroundColor: 'cyan',
height: 400,
left: 60,
top: 20,
width: 500
},
legend: {
position: "none"
},
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical',
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var chart2 = new google.visualization.ColumnChart(document.getElementById('barchart_core'));
chart2.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>========MATERIAL========</div>
<div id="barchart_material"></div>
<div>==========CORE==========</div>
<div id="barchart_core"></div>
I managed to find a real fiddle to the problem. I have updated the chart script so that the vAxis fontSize is 18:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Percentage'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Company Performance'
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
titleTextStyle: {
fontSize: '18',
},
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 400,
height: 400
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have then added a CSS setting to force the font size back to normal:
#barchart_material g text {
font-size: 12px !important;
}
I have updated the fiddle here: https://jsfiddle.net/SBComms/pa4yLcb3/1/

How to make horizontal bar graph label values as hyperlink using google chart api

var options = {
May be vAxis have some properties for making label value as hyperlink
vAxis: { textStyle: { color: '#005500', fontSize: '13', fontName: 'Arial'} },
width: 700,
height: 400,
bar: { groupWidth: '15%' },
isStacked: true,
chartArea: { left: 150, width: 700 }
};
You cannot create hyperlinks from the axis labels, but you can use a "click" event handler for your chart that detects clicks on the axis labels and then acts as if a link was clicked:
google.visualization.events.addListener(chart, 'click', function (e) {
// match the id of the axis label
var match = e.targetID.match(/hAxis#0#label#(\d+)/);
if (match && match.length) {
var row = parseInt(match[1]);
// use row to fetch any data you need from the DataTable to construct your hyperlink, eg:
var label = data.getValue(row, 0);
// then construct your URL and use it however you want, eg:
var url = 'http://www.google.com/search?q=' + label;
window.location = url;
}
});

Google Diff Bar Chart - Change Bar Color

I have a Google Diff Bar chart. I am trying to change the color of the exterior bar. By default it is a faded color. I am able to change the inner bar color with color parameter under options. Can someone guide me out please? Here is my code below.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 250],
['Rachel', 4200],
['Patrick', 2900],
['Eric', 8200]
]);
var newData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 370],
['Rachel', 600],
['Patrick', 700],
['Eric', 3500]
]);
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = {
diff: { newData: { widthFactor: 0.6 } },
legend: { position: 'top' } ,
colors: ['#f38eff', '#C0C0C0'],
backgroundColor: '#fffff5',
hAxis: {title: 'People'},
vAxis: {title: 'Numbers'}};
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
}
</script>
You can set that in the diff object, e.g.,
var options = { ...
diff: {
oldData: { opacity: 1, color: '#e6693e' },
newData: { opacity: 1}
}...
}

Is it possible to show each legend in different color in google pie chart

Is it possible to show each legend in different color in google pie chart? I have 3 legends in my pie chart and i want to show each one of them in different color.
Yes, from google instructions:
use the legend.textStyle option and assign it like so
Object {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
An object that specifies the legend text style. The object has this format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
so for each pi chart in the drawchart
function drawChart() {//chart 1
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 1',
pieSliceText: 'label',
legend.textStyle: { color: 'blue', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
function drawChart() {//chart 2
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 2',
pieSliceText: 'label',
legend.textStyle: { color: 'red', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
} function drawChart() {//chart 3
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 3',
pieSliceText: 'label',
legend.textStyle: { color: 'green', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart3'));
chart.draw(data, options);
}