Develop Reference

Google Charts change color on side box

So I'm using Google Charts and using the Column charts (https://developers.google.com/chart/interactive/docs/gallery/columnchart) specifically and I have a question regarding colors on charts.
Here are two questions:
Does anyone know how to change the color on the outer box? I was able to change the color on the bars to the orange color, but I can't target the outer box.
I am using 'Aug', 7283, 'color: #ff8a73' to define the hex colors on each bar, does anyone know a better way to define colors or is this the proper way?
Here is the JS code:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(sle_interactions);
function sle_interactions() {
var data = google.visualization.arrayToDataTable([
['Year', 'Interactions', { role: 'style' }],
['Aug', 7283, 'color: #ff8a73'],
['Sep', 8263, 'color: #ff8a73'],
['Oct', 9827, 'color: #ff8a73'],
['Nov', 9362, 'color: #ff8a73'],
['Dec', 10625, 'color: #ff8a73']
]);
var options = {
title: 'Interactions',
is3D: true,
backgroundColor: 'transparent',
hAxis: {
title: 'Timeframe',
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('sle_interactions'));
chart.draw(data, options);
}
document.addEventListener('DOMContentLoaded', sle_interactions);

Both of the questions have been resolved using this:
var options = {
title: 'Age Range',
is3D: true,
backgroundColor: 'transparent',
hAxis: {
title: 'Followers',
},
vAxis: {
minValue: 0,
maxValue: 100,
format: "#.#'%'",
},
colors: ['#ff8a73'],
};

How to draw a google column chart in angular 6 project?

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..

How to set axis starting point to 0 for google material line chart

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>

Google Charts - Cannot get column chart to format

Ugh, the documentation for this seems so blasted clear, but I can't seem to correctly change the colors of the bars in my chart. There has to be something obvious that I'm missing....here's what I'm working with at the moment:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var options = {
width: 700,
height: 500,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'distance'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
chart.draw(data, options);
};
</script>
In my mind, I've defined the role, and formatted the colors exactly as they're shown on the docs - and yet I still have all blue (default) bar colorings.
[![Screenshot of Blue Bars][1]][1]
So, yeah, there's that. What did I botch?
As always, SO community, thanks for your time, attention, and expertise.
CDM
Update:
So now I'm here, but still with blue bars:
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres", { role: "style" } ],
["Conoco", 8.94, "#b87333"],
["Tesla", 10.49, "silver"],
["Texaco", 19.30, "gold"],
["Yahoo.com", 21.45, "color: #e5e4e2"]
]);
var options = {
width: 700,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};

The code you posted in your question works fine with a few simple changes:
In this script tag:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
Change 'packages':['bar'] to 'packages':['corechart']
And in this line:
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
Change google.charts.Bar to google.visualization.ColumnChart
And change this options code:
var options = {
width: 700,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
To this instead:
var options = {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
legend: {
position: 'none'
},
hAxis: {
title: 'Companies'
},
vAxis: {
title: 'Acres'
}
};
JS Fiddle
Note that the regular Google charts do not support subtitles, so that is why I left the subtitle out in the options code I posted above.
Google material charts do support subtitles, but they apply colors to each series of data in your chart, not to each value within a series. Here's the complete code to use the material chart:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres1", "Acres2", "Acres3", "Acres4"],
["Conoco", 8.94, 10.21, 5.67, 14.53],
["Tesla", 10.49, 16.32, 20.15, 13.49],
["Texaco", 19.30, 17.10, 15.23, 25.37],
["Yahoo.com", 21.45, 22.32, 18.19, 27.43]
]);
var options = {
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
legend: {
position: 'none'
},
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
series: {
0: { axis: 'Acres' },
1: { axis: 'Acres' },
2: { axis: 'Acres' },
3: { axis: 'Acres' }
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
chart.draw(data, options);
};
</script>
JS Fiddle
I have not found a way to change the color shown on the material chart for each value within a series. So, it looks like you have to make a choice between omitting the subtitle and having the chart colors the way you want, or including the subtitle by using the material chart but having the color for each value within a series be the same.

This how u change the color of graph
var options = {
colors: ['#2980b9']
};
add this color option in ur options variable
in your case
var options = {
width: 700,
colors: ['#2980b9'],
.....
.....
if you have two bars in ur chart den do like this colors: ['#0d6957','#1fb89a']

Google pie chart single value

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/