I'm using angular 6 and I want to draw a column chart of Google. I found below codes from documantation but I don't know how to use it in my app?
html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div" style="width: 800px; height: 600px;"></div>
js
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
width: 800,
legend: { position: 'none' },
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
You need to first declare in your component like this:
declare var google:any;
then your component will know what your are refering to when you call
google.charts.load..
Everything else looks good..
Related
I've run into a problem creating a bar chart with google charts.
Which is if you're creating a dynamic chart and there's a low amount of rows, the individual bars will be too thick.
I understand that this question has been asked, the problem with the awnser that has been most frequent is that it does not work if there is only a single bar in the chart, that awnser is:
to input bar: {groupWidth: <value>}
I have actually also found an awnser for if there is a single bar in the chart which is to insert an empty bar, so groupWidth works, but there are two problems with this solution, which are:
-the bar will not be centered
-and it will have an undefined title.
enter image description here
My question is, how can I set the maxWidth of a bar in google charts without using groupWidth.
also here is the code for my google chart
$(document).ready(function() {
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(chartCreate);
function chartCreate() {
data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number', 'Movimentos');
data.addRows([[ "ola", 4 ]]);
var options = {
height: 405,
width: 400,
legend: {
position: 'none'
},
titleTextStyle: {
fontSize: '24',
bold: 'true',
color: '#242354'
},
bar: {groupWidth: "80%"},
colors: ['#242354']
};
var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
});
you can use two additional bars to center,
use a space for the first column to avoid undefined
[' ', null],
['ola', 4],
[' ', null]
otherwise, bar.groupWidth will not work
it's actually reported here as not working period, for material charts...
Tracking Issue for Material Chart Feature Parity
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number', 'Movimentos');
data.addRows([
[' ', null],
['ola', 4],
[' ', null]
]);
var options = {
height: 405,
width: 400,
legend: {
position: 'none'
},
titleTextStyle: {
fontSize: '24',
bold: 'true',
color: '#242354'
},
bar: {groupWidth: "80%"},
colors: ['#242354']
};
var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="graph"></div>
I am using google pie charts, all is working fine but legend label on right side is cut off.
there is also no option in google API to control these labels. here is documentations
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
for whiteHat
please see here are images..
1st with hide div
and a div not hide...
the legend would normally wrap, see following working snippet,
using the options shown in the attached image
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var data = google.visualization.arrayToDataTable([
['Education', 'People'],
['less than high school', 10],
['high school', 10],
['college associate', 10],
]);
var options = {
width: '470',
height: '450',
chartArea: {
width: '80%',
height: '80%',
left: 100,
},
pieSliceTextStyle: {
color: 'white',
fontSize: '17.5'
},
colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I tried multiple solutions given out from
How to set Axis step in Google Chart?, Trying to set y axis to 0 in google charts, and several other posts that I have looked over without any luck. Does anyone have an idea of what can be done in order to set the y axis to a starting point of 0? I can provide more information if need be. Also a side question, is it possible to bring a line to the front when clicked on. For example when you click on the current trend line, it bolds but the data points do not appear for them.
<div id="thelinechart" style="width: 1000px; height: 550px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var chart = new google.charts.Line(document.getElementById('thelinechart'));
chart.draw(data, options);
}
</script>
I have a jsfiddle link where I have my code.
https://jsfiddle.net/abufr36y/
Need to convert options for Material Charts, depending on the package...
google.charts.Line.convertOptions(options)
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['line']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, 3, 4, 5, 1]);
var chart = new google.charts.Line(document.getElementById('thelinechart'));
// convert options for Material Charts, use view vs. data
chart.draw(view, google.charts.Line.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="thelinechart"></div>
I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart
You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.
I am using a Google Pie Chart and have a problem modifying it. After many complicated calculations I get a percentage value, say 67%. I want that single percentage value to be shown in pie/donut chart.
My HTML code is
<div id="chart_div"></div>
My Javascript code is
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Foo', 67]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pieHole: 0.5,
pieSliceTextStyle: {
color: '#000000'
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
You can have a look here http://jsfiddle.net/asgallant/mx03tcx5/
How do I make the graph cover up only 67% of the pie instead of 100%, since I am only providing a single value. Is there any other way to achieve this..
add this
slices: {
1: { color: 'transparent', textStyle : {color:'transparent'} }
}
to the same scope with pieSliceTextStyle. And
add
['', 33]
after ['Foo', 67].
For more info you can check this : Google Developers
After modification :
chart.draw(data, {
height: 400,
width: 600,
pieHole: 0.5,
pieSliceTextStyle: {
color: '#000000'
},
slices: {
1: { color: 'transparent', textStyle : {color:'transparent'} }
}
});
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Foo', 67],
['', 33]
]);
if you want to check it in jsfiddle http://jsfiddle.net/4oxbnmqr/