Google Chart color of gridline margin

Google Chart color of gridline margin - javascript

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>

Related

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>

How to have different colors for different value range in simple Google Line Charts?

Here is my JS Fiddle. From the values I have specified in the Y-Axis, 0, 10, 23, 17, 18 etc, I want the line from 0-10 to have a different color, 10-23 to have a different color, 23-17 a different color.
https://jsfiddle.net/pyvqcbou/
Here is my JS. I tried adding colors to various places but I was unable to do so. How do I go about it?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

use a style column, see following working snippet...
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
[0, 0, 'red'], [1, 10, 'blue'], [2, 23, 'green'], [3, 17, 'orange'], [4, 18, 'purple'], [5, 9, 'black'],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart can only display once upon running the app

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>

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 color of gridline margin - javascript

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

Related

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

How to have different colors for different value range in simple Google Line Charts?

Google chart can only display once upon running the app

Chart not displaying

Show selected countries without data

Categories

Resources