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'],
};
Related
I'm including multiple plots with Google Charts. I'd like to display one chart at a time but allow the user to switch between multiple csv input files. A change in input data would also require a change in chart and axis titles. I'm new to Javascript and I'm not sure how best to do this.
Here's how I'm currently plotting one csv. Any tips on how to toggle the change in input file would be appreciated. I'm currently using the jquery-csv module to read in my csv file into an array.
Script created in header.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Reading in a locally stored CSV file to an array of numbers
$.get("2017T.csv", function(csvString) {
var dataarray = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// Turning array into format usable by Google Charts
var data = google.visualization.arrayToDataTable(dataarray);
// Formatting Google Charts
var options = {
title: 'Raspberry PI Temperature plot - Yearly',
titleTextStyle: {
fontSize: '18',
},
vAxis: {
title: 'Temperature (\u00B0 C)' ,
titleTextStyle: {
italic: 'FALSE',
fontSize: '14',
},
baseline: '0',
baselineColor: 'black',
gridlines: { color: 'transparent'},
},
hAxis: {
title: 'Date',
titleTextStyle: {
italic: 'FALSE',
fontSize: '14',
},
baseline: '0',
baselineColor: 'black',
gridlines: { color: 'transparent'},
},
curveType: 'function',
backgroundColor: {
stroke: 'black',
strokeWidth: '5',
},
haxis: {
title: 'Hello',
},
legend: {position: 'none'},
};
//Creating Charts
var chart = new google.visualization.LineChart(document.getElementById('temp_year'));
chart.draw(data, options);
});
}
Chart called in body.
<div id="temp_year" style="width: 800px; height: 400px"></div>
You can accomplish this by making your drawChart function generic and then passing in the chart specific data each time you draw. This allows you redraw with new data and even makes it so it'll handle dynamic data too.
For example, based on your code you might do something like:
var chartData = {};
var dataarray;
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(function () {
drawChart(chartData);
});
// Reading in a locally stored CSV file to an array of numbers
$.get("2017T.csv", function (csvString) {
dataarray = $.csv.toArrays(csvString, { onParseValue: $.csv.hooks.castToScalar });
});
// Turning array into format usable by Google Charts
var data = google.visualization.arrayToDataTable(dataarray);
chartData = {
title: 'Raspberry PI Temperature plot - Yearly',
data: data
}
function drawChart(chartData) {
// Formatting Google Charts
var options = {
title: chartData.title,
titleTextStyle: {
fontSize: '18',
},
vAxis: {
title: 'Temperature (\u00B0 C)',
titleTextStyle: {
italic: 'FALSE',
fontSize: '14',
},
baseline: '0',
baselineColor: 'black',
gridlines: { color: 'transparent' },
},
hAxis: {
title: 'Date',
titleTextStyle: {
italic: 'FALSE',
fontSize: '14',
},
baseline: '0',
baselineColor: 'black',
gridlines: { color: 'transparent' },
},
curveType: 'function',
backgroundColor: {
stroke: 'black',
strokeWidth: '5',
},
haxis: {
title: 'Hello',
},
legend: { position: 'none' },
};
//Creating Charts
var chart = new google.visualization.LineChart(document.getElementById('temp_year'));
chart.draw(chartData.data, options);
}
So what I've done is created a chartData object that you can define any chart specific variables in. I've only done the title and data, but obviously you can do as many of the chart options as you want. Then, when you want to redraw the chart, you overwrite the chartData object with the new chart's data and call drawChart again with the new data.
I have done a small graph with Google charts combochart combining
a stacked bar chart with a line chart.
The tooltips appear on all stacks and points of the line chart triggered by
mouse actions: 'focus' (mouse on the target), 'selection' (on click) and 'both' both click and focus.
I wanted to have all tooltips from line chart appeared after a click, trigger: set to 'selection' and all tooltips from stacked bar chart after a focus on the zone, trigger: set to 'focus'. Is this possible with Google Charts to set different tooltip behaviour in the same chart? How do I develop this?
Play my example here:
https://jsfiddle.net/machesne/xf1kccdq/
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var tooltipdata = [["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "]]
var valuedata = [[50, 10, 15, 15, 90, 90],[50, 12, 15, 15, 92, 92],[60, 10, 15, 15, 100, 100]];
var data = google.visualization.arrayToDataTable([
['Date', 'Apples', { role: 'tooltip' }, 'Tomatoes', { role: 'tooltip' }, 'Orange', { role: 'tooltip' }, 'Strawberries', { role: 'tooltip' }, { role: 'annotation' }, 'Sum' , { role: 'tooltip' }],
['', valuedata[0][0], tooltipdata[0][0], valuedata[0][1], tooltipdata[0][1], valuedata[0][2], tooltipdata[0][2], valuedata[0][3], tooltipdata[0][3], valuedata[0][4],valuedata[0][5], tooltipdata[0][4]],
['', valuedata[1][0], tooltipdata[1][0], valuedata[1][1], tooltipdata[1][1], valuedata[1][2], tooltipdata[1][2], valuedata[1][3], tooltipdata[1][3], valuedata[1][4],valuedata[1][5], tooltipdata[1][4]],
['', valuedata[2][0], tooltipdata[2][0], valuedata[2][1], tooltipdata[2][1], valuedata[2][2], tooltipdata[2][2], valuedata[2][3], tooltipdata[2][3], valuedata[2][4],valuedata[2][5], tooltipdata[2][4]], ]);
var options = {
width: 1200,
height: 1000,
legend: { position: 'bottom', maxLines: 2 },
seriesType: 'bars',
bar: { groupWidth: '90%' },
isStacked: true,
tooltip: { isHtml: true, trigger: 'both' }, // CSS styling affects only HTML tooltips.
series: {4: {type: 'line', pointSize: 15 } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Thanks a lot for your answers!
I have the following code which generates a column chart.
<script type="text/javascript">
//google.charts.load('current', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBar);
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Number of Visits', 'Average Check Size',{ role: 'style' }],
['8+', 26.22, '#083874'],
['4-7', 30.34,'#94CAFC'],
['2-3', 24.09,'#EBBA25'],
['1', 27.95,'#F59E47']
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 1,
prefix: '$'
});
formatter.format(data, 1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
//chartArea: {width: '50%'},
hAxis: {
title: 'Average Check Size',
titleTextStyle: {italic: false},
minValue: 0,gridlines: { color: 'transparent'}
},
vAxis: {
minValue: 0,
title: 'Number of Visits',
titleTextStyle: {italic: false},
gridlines: { color: 'transparent'}},
//colors: ['red','green','blue','yellow'],
legend: {position: 'none'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_bar'));
chart.draw(view, options);
}
The output is a column chart with annotations on each of the bars. I want to have a similar kind of output but all four bars must have different colors. How do I do that? Please suggest
You can use the style role. There are examples on google charts page. And here is a jsfiddle.
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
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']
i tried to create a bar chart using google chart api. in which i want to remove the x-axis title
<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 data = google.visualization.arrayToDataTable([
['Year', 'first six', 'second six'],
['2010', 3750, 3800],
['2011', 3900, 3850],
['2012', 3850, 3900],
['2013', 4280, 4160],
['2014', 4350, 0000]
]);
var options = {
width: 400,
height: 320,
bar: {groupWidth: "90%"},
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material_price'));
chart.draw(data, options);
}
this is the code for bar chart
i tried
var options = {
hAxis: {title: ' ', titleTextStyle: {color: 'white'}},
}
but this does nothing . how can i remove x-axis title it is by default "year"?
Following code will help you.It works for me.
var options = {
width: 400,
height: 320,
bar: {groupWidth: "90%"},
legend: { position: "none" },
hAxis: { textPosition: 'none' },
};
Try set axes.x.label to "".
I hope help.
var options = {
axes: {
x: {
0: { side: 'bottom', label: ""}
}
}
};
chart.draw(data, options);
Use the option
hAxis: {textPosition: 'none'}
https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options
The syntax you're using to declare chart object doesn't seem right, change the line to the one below:
var chart = new google.visualization.BarChart(document.getElementById('columnchart_material_price'));
There are no predefined titles for the axis. But if you see the title 'Year' somehow, that's propably because of the data table's first column header. You can simply remove that:
var data = google.visualization.arrayToDataTable([
['', 'first six', 'second six'],
['2010', 3750, 3800],
['2011', 3900, 3850],
['2012', 3850, 3900],
['2013', 4280, 4160],
['2014', 4350, 0000]
]);