Google chart can only display once upon running the app

Google chart can only display once upon running the app - javascript

My google chart can only be loaded once when I run the app. when I navigate to other pages and go back to the page which has the google chart, the chart will not display. I have to refresh or run the app again in order to display the chart.
<section>
<html>
<div class="container"></div>
<div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Week", "# of F2F=0"],
["WK1", 9],
["WK2", 5],
["WK3", 6],
["WK4", 0],
["WK5", 0],
["WK6", 0],
["WK7", 0],
["WK8", 0],
["WK9", 0],
["WK10", 0],
["WK11", 0],
["WK12", 0]
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Dashboard",
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
width: 1600,
height: 650,
bar: {groupWidth: "70%"},
legend: { position: "top" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Calls', 'People'],
['F2F = 0', 6],
['1 < F2F < 5', 8],
['F2F > 9', 5]
]);
var options = {
title: 'Period: 2QWK3',
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</html>
</section>

Call the required script on window.onload and call a empty function on window.onunload
<script src="https://www.gstatic.com/charts/loader.js"></script>
<section>
<html>
<div class="container"></div>
<div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
window.onload = function() {
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Week", "# of F2F=0"],
["WK1", 9],
["WK2", 5],
["WK3", 6],
["WK4", 0],
["WK5", 0],
["WK6", 0],
["WK7", 0],
["WK8", 0],
["WK9", 0],
["WK10", 0],
["WK11", 0],
["WK12", 0]
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Dashboard",
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
width: 1600,
height: 650,
bar: {
groupWidth: "70%"
},
legend: {
position: "top"
},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
};
window.onunload = function(){};
</script>
<div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Calls', 'People'],
['F2F = 0', 6],
['1 < F2F < 5', 8],
['F2F > 9', 5]
]);
var options = {
title: 'Period: 2QWK3',
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</html>
</section>

Related

Legends not showing properly in google pie chart

I am changing labels, to protect data by replacing it with dummy data with same length.
enter image description here
Code Link: https://jsfiddle.net/p_raveen/L84wnc6d/
I am ready to make size of pie chart smaller, but legends should be clearly visible.
ChartArea property not working
<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([
['Type', 'Value'],
['Manual Success:362', 362],
['Manual Ongoing:2', 2],
['Manual Failed:980', 980],
['Bulk Success:0', 0],
['Bulk Ongoing:0', 0],
['Bulk Failed:0', 0],
['Api Success:0', 0],
['Api Ongoing:0', 0],
['Api Failed:0', 0],
]);
var options = {
title: 'ABC Abcd Abcdef(1234)',
titleTextStyle: {
color: '#475F7B',
fontSize: '16',
bold: true
},
sliceVisibilityThreshold: 0,
slices: {
0: {
color: 'rgb(16, 148, 25)'
},
1: {
color: 'rgb(51,102,204)'
},
2: {
color: 'rgb(255, 0, 0)'
},
3: {
color: 'rgb(53,94,59)'
},
4: {
color: 'rgb(0,0,128)'
},
5: {
color: 'rgb(114,47,55)'
},
6: {
color: 'rgb(127,255,0)'
},
7: {
color: 'rgb(137,207,240)'
},
8: {
color: 'rgb(248,131,121)'
}
},
legend: {
position : 'top',
maxlines: 15,
textStyle: {
fontSize: 10,
bold: true
}
},
chartArea:{
left : '20%',
top : '20%',
width : '60%',
height : '60%',
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_1'));
chart.draw(data, options);
}
</script>
<div id="pie_chart_1" style="height: 400px;"></div>
I have try using chartArea Property, but It is not working

the L in maxLines should be capitalized
see following working snippet...
<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([
['Type', 'Value'],
['Manual Success:362', 362],
['Manual Ongoing:2', 2],
['Manual Failed:980', 980],
['Bulk Success:0', 0],
['Bulk Ongoing:0', 0],
['Bulk Failed:0', 0],
['Api Success:0', 0],
['Api Ongoing:0', 0],
['Api Failed:0', 0],
]);
var options = {
title: 'ABC Abcd Abcdef(1234)',
titleTextStyle: {
color: '#475F7B',
fontSize: '16',
bold: true
},
sliceVisibilityThreshold: 0,
slices: {
0: {
color: 'rgb(16, 148, 25)'
},
1: {
color: 'rgb(51,102,204)'
},
2: {
color: 'rgb(255, 0, 0)'
},
3: {
color: 'rgb(53,94,59)'
},
4: {
color: 'rgb(0,0,128)'
},
5: {
color: 'rgb(114,47,55)'
},
6: {
color: 'rgb(127,255,0)'
},
7: {
color: 'rgb(137,207,240)'
},
8: {
color: 'rgb(248,131,121)'
}
},
legend: {
position : 'top',
maxLines: 15,
textStyle: {
fontSize: 10,
bold: true
}
},
chartArea:{
left : '20%',
top : '20%',
width : '60%',
height : '60%',
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_1'));
chart.draw(data, options);
}
</script>
<div id="pie_chart_1" style="height: 400px;"></div>

Google Chart color of gridline margin

What option from Google Chart Api change the color of that lines?

use option --> baselineColor
on either / both --> hAxis, vAxis
var options = {
hAxis: {
baselineColor: 'magenta',
},
vAxis: {
baselineColor: 'magenta',
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y'],
[0, 1],
[1, 2],
[2, 3],
]);
var options = {
hAxis: {
baselineColor: 'magenta',
},
vAxis: {
baselineColor: 'magenta',
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts (GeoChart) - Europe region doesn't display correctly

I'm struggling to find out why geochart map cuts top of the map when using the Europe region.
For example Finland does not show up completely.
Has anyone ever encountered such problem?
Code
$(document).ready(function() {
google.charts.load('visualization', '1', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'ColorIndex'],
['fi', 2],
['ee', 1],
['gb', 2],
['at', 2],
['dk', 2],
['es', 2]
]);
var opts = {
region: '150',
displayMode: 'regions',
resolution: 'countries',
width: 480,
height: 320,
enableRegionInteractivity: true,
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
legend: 'none',
tooltip : { trigger : 'none' },
colorAxis: {
values: [1, 2, 3],
colors: ['#050b55', '#003399', '#eb5f0f']
}
};
var container = document.getElementById('visualization');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, opts);
}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization" style="width:100%; height:200px"></div>

Chart not displaying

I've tried the below code to display chart but for some reason its not working.
I tried to display chart with line chart, with different color points.
I'm trying to create google line charts
<!DOCTYPE html>
<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(drawLoadChart);
function drawLoadChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Length');
data.addColumn('number', 'Load');
data.addRows([
[Zero, 0],
[One, 1],
[Two, 2]
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 3
});
formatter.format(data, 0);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1]);
var options = {'width':400,'height':300,
title: 'Load vs Length',
titlePosition: 'out',
legend: {
position: 'none'
},
hAxis: {
title: 'Length (inch)',
viewWindow: {
min: 0
},
format: '#.000'
},
vAxis: {
title: 'Load (pound)',
viewWindow: {
min: 0
}
},
series: {
0: {
color: 'black',
lineWidth: 2
},
1: {
color: 'red',
lineWidth: 0,
pointSize: 5
}
}
};
var loadChart = new google.visualization.LineChart(document.getElementById('line_chart'));
loadChart.draw(view, options);
}
</script>
</head>
<body>
<div id='line_chart'></div>
</body>
</html>
The expected chart has the above 3 points but when I try with TryItEditor chart is not displaying.

Here in your code change
data.addRows([
[Zero, 0],
[One, 1],
[Two, 2]
]);
to this
data.addRows([
['Zero', 0],
['One', 1],
['Two', 2]
]);
Strings has to be specified with quotes.

Show selected countries without data

I want to highlight specific countries, but not show the data when you hover over the country. In reality this needs to be a true/false type data.
var data = google.visualization.arrayToDataTable([
['Country','Active'],
['Germany',1],
['United States',1],
['Brazil',1],
['Canada',1],
['France',1],
['Russia',1]
]);
How do I get it to not display the "Active" data on hover? If I don't include a second column in that data array, nothing shows.
Example:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country','Active'],
['Germany',1],
['United States',1],
['Brazil',1],
['Canada',1],
['France',1],
['Russia',1]
]);
var options = {
legend: 'none',
backgroundColor: '#f1f1f1',
colorAxis: {colors: ['#052c60']},
datalessRegionColor: '#FFFFFF'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" style="width: 1600px; height: 500px;"></div>

Per the documentation, set tooltip.trigger to 'none'
var options = {
legend: 'none',
backgroundColor: '#f1f1f1',
colorAxis: {colors: ['#052c60']},
datalessRegionColor: '#FFFFFF',
tooltip: {trigger:'none'}
};
fiddle
code snippet:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Active'],
['Germany', 1],
['United States', 1],
['Brazil', 1],
['Canada', 1],
['France', 1],
['Russia', 1]
]);
var options = {
legend: 'none',
backgroundColor: '#f1f1f1',
colorAxis: {
colors: ['#052c60']
},
datalessRegionColor: '#FFFFFF',
tooltip: {
trigger: 'none'
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" style="width: 1600px; height: 500px;"></div>

Develop Reference

JavaScript is the programming language of the Web.

Google chart can only display once upon running the app - javascript

Related

Legends not showing properly in google pie chart

Google Chart color of gridline margin

Google Charts (GeoChart) - Europe region doesn't display correctly

Chart not displaying

Show selected countries without data

Categories

Resources