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.
Related
'XXX' below shows where I would like custom tooltip to be used - it should actually display a name from a row of data - 'XXX' is used to make the problem stand out here. This works fine on standard scatterplot but not on combo chart. Combo version displays default tooltip.
What am I missing?
Charts currently look like this...image link
`
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'others_average');
data.addColumn('number', '');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
<?php
$wa_startindex = 0;
$i=0;
while(!$chart->atEnd()) {
$wa_startindex = $chart->Index;
?>
[<?php echo($chart->getColumnVal("others_average")); ?>, <?php echo($chart->getColumnVal("band")); ?>, 'XXX']
<?php if($i<($chart->TotalRows)) echo ',';?>
<?php
$i++;
$chart->moveNext();
}
$chart->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
label: 'y1=x',
type: 'number',
calc: function (dt, row) {
return dt.getValue(row, 0)
}
}]);
var options = {
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
},
hAxis: {title: 'Average Band (other courses)', direction:-1, viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
vAxis: {title: '<?php echo($chart->getColumnVal("course_title")); ?> Band', direction:-1, viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
legend: 'none'
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
`
I don't find the google charts hard to modify for use with PHP/MySQL data - problem just seems to be with the combo chart implmentation..
You should also include the tooltip column (column #2) in the DataView: view.setColumns([0, 1, 2, {....
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'others_average');
data.addColumn('number', '');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
[1, 2, 'xxx1'],
[2, 5, 'xxx2'],
[3, 1, 'xxx3'],
[4, 3, 'xxx4'],
[5, 2, 'xxx5']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {
label: 'y1=x',
type: 'number',
calc: function (dt, row) {
return dt.getValue(row, 0)
}
}]);
var options = {
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
},
hAxis: {title: 'Average Band (other courses)', direction:-1, viewWindow: { min: 1, max: 5 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
vAxis: {title: '... Band', direction:-1, viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
legend: 'none'
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">
</div>
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 use google-chartAPI bar style but when I click on a bar, white rectangle is added into bar as you can see on picture.
I couldn't find the option in API Documents to not to add.
I have found a solution in css way thanks to Dr. Molle but it would be better to know to stop it in options.
rect[fill-opacity]{ stroke-width:0 !important; }
Googlechart bar
the white rectangle is to show visually that the bar is selected
the only option that will prevent this is --> enableInteractivity: false
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', label: 'Year'});
dataTable.addColumn({type: 'number', label: 'Category A'});
dataTable.addColumn({type: 'number', label: 'Category B'});
dataTable.addRows([
['2014', 1000, 2000],
['2015', 2000, 4000],
['2016', 3000, 6000],
]);
chart.draw(dataTable, {
enableInteractivity: false,
height: 600,
legend: {
position: 'bottom'
},
pointSize: 4,
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
if you would like to keep some interactivity and only lose the selection,
you can cancel the selection by using the 'select' event listener
when 'select' fires, pass an empty array ([]) to the chart's setSelection method
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', label: 'Year'});
dataTable.addColumn({type: 'number', label: 'Category A'});
dataTable.addColumn({type: 'number', label: 'Category B'});
dataTable.addRows([
['2014', 1000, 2000],
['2015', 2000, 4000],
['2016', 3000, 6000],
]);
// use 'select' listener to disable selection
google.visualization.events.addListener(chart, 'select', function () {
chart.setSelection([]);
});
chart.draw(dataTable, {
height: 600,
legend: {
position: 'bottom'
},
pointSize: 4,
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
<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/
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}
}...
}