I have a Google Diff Bar chart. I am trying to change the color of the exterior bar. By default it is a faded color. I am able to change the inner bar color with color parameter under options. Can someone guide me out please? Here is my code below.
<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 oldData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 250],
['Rachel', 4200],
['Patrick', 2900],
['Eric', 8200]
]);
var newData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 370],
['Rachel', 600],
['Patrick', 700],
['Eric', 3500]
]);
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = {
diff: { newData: { widthFactor: 0.6 } },
legend: { position: 'top' } ,
colors: ['#f38eff', '#C0C0C0'],
backgroundColor: '#fffff5',
hAxis: {title: 'People'},
vAxis: {title: 'Numbers'}};
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
}
</script>
You can set that in the diff object, e.g.,
var options = { ...
diff: {
oldData: { opacity: 1, color: '#e6693e' },
newData: { opacity: 1}
}...
}
Related
I have used google charts for a web app. I want to remove its white background. I tried changing the background color to transparent, but it isn't working.
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["LIC", 8.94, "#BCFFFF"],
["STAR", 10.49, "#FFC9C9"],
["UNIVERSAL", 19.30, "#F9FFD3"],
["APPOLLO", 21.45, "#C2FFBD"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 0,
type: "string",
role: "annotation" },
2]);
var options = {
title: "CUSTOMERS",
bar: {groupWidth: "70%"},
legend: { position: "none" },
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
var options = {
title: "CUSTOMERS",
bar: {groupWidth: "70%"},
backgroundColor: 'transparent',
legend: { position: "none" },
It works now, don't know why it didn't work before.
How can i hide the vertical bar that separates the values on the left and the bars on the right?
for bar charts, set hAxis.baselineColor to 'transparent', to hide the vertical bar
set hAxis.gridlines.count to zero, so the baseline isn't replaced with a gridline
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addRows([
['UK', 8.94],
['AF', 10.49],
['UN', 20.2],
['SK', 21.45],
]);
var options = {
legend: {
position: 'none'
},
hAxis: {
baselineColor: 'transparent',
gridlines: {
count: 0
}
},
vAxis: {
baselineColor: 'magenta'
},
width: 200
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to use Google charts to display the results of a survey. All seems fine, apart from the title of the vAxis is being cut off slightly and I can't work out how to move it closer to the axis.
This is the code:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have a fiddle here:
https://jsfiddle.net/SBComms/pa4yLcb3/
With a Core Chart, you can adjust the size of the chartArea to allow room for the title.
However, this doesn't appear to work for a Material Chart.
Also, I would recommend loading with loader.js vs. the older library jsapi.
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
chartArea: {
backgroundColor: 'cyan',
height: 400,
left: 60,
top: 20,
width: 500
},
legend: {
position: "none"
},
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical',
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var chart2 = new google.visualization.ColumnChart(document.getElementById('barchart_core'));
chart2.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>========MATERIAL========</div>
<div id="barchart_material"></div>
<div>==========CORE==========</div>
<div id="barchart_core"></div>
I managed to find a real fiddle to the problem. I have updated the chart script so that the vAxis fontSize is 18:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Percentage'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Company Performance'
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
titleTextStyle: {
fontSize: '18',
},
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 400,
height: 400
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have then added a CSS setting to force the font size back to normal:
#barchart_material g text {
font-size: 12px !important;
}
I have updated the fiddle here: https://jsfiddle.net/SBComms/pa4yLcb3/1/
Hej guys , I tried 2 or 3 different functions but i can´t get any of them to work. I want that the label´s from the 3 different stats are colored in for example white. A picture is below.
var options = {'title':'Lead statistik von<?php echo $_SESSION['user_name'];?>',
'width':400,
'height':300,
backgroundColor:'#0a0a0a',
fontSize:'14',
titleTextStyle: {color:'#FFFFFF'},
slices:
{
0: { color: 'red' },
1: { color: 'purple'},
2: { color: 'blue'}
},
pieSliceTextSlice:{color:'#FFFFFF'}
};
someone got a hint which funtion to use?
Picture :
In order to specify legend text color use legend.textStyle.color property, for example:
var options = {
legend: {
textStyle: { color: 'white' }
}
};
According to Configuration Options:
legend.textStyle
An object that specifies the legend text style. The object has this
format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Example
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
width: 400,
height: 300,
backgroundColor: '#0a0a0a',
fontSize: '14',
legend: {
textStyle: { color: 'white' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
Is it possible to show each legend in different color in google pie chart? I have 3 legends in my pie chart and i want to show each one of them in different color.
Yes, from google instructions:
use the legend.textStyle option and assign it like so
Object {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
An object that specifies the legend text style. The object has this format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
so for each pi chart in the drawchart
function drawChart() {//chart 1
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 1',
pieSliceText: 'label',
legend.textStyle: { color: 'blue', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
function drawChart() {//chart 2
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 2',
pieSliceText: 'label',
legend.textStyle: { color: 'red', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
} function drawChart() {//chart 3
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 3',
pieSliceText: 'label',
legend.textStyle: { color: 'green', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart3'));
chart.draw(data, options);
}