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>
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>
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.
when i create a chart (with google chart) with all the values setted to zero, the haxis is in the middle of the chart.
How can i stuck it at the bottom ?
here is the code :
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Average Revenue');
data.addRows([
['2004', 0],
['2005', 0],
['2006', 0],
['2007', 0]
]);
var options = {
title: 'Revenue by Year',
seriesType: "bars",
series: {1: {type: "line"}},
vAxis: {title: 'Year',
titleTextStyle:{color: 'red'}},
colors:['red','black']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
http://jsfiddle.net/boj6ztLo/
thanks
set following config option...
vAxis.viewWindow.min: 0
see following working snippet...
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Average Revenue');
data.addRows([
['2004', 0],
['2005', 0],
['2006', 0],
['2007', 0]
]);
var options = {
title: 'Revenue by Year',
seriesType: 'bars',
series: {
1: {
type: 'line'
}
},
vAxis: {
title: 'Year',
titleTextStyle: {
color: 'red'
},
viewWindow: {
min: 0
}
},
colors:['red','black']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note
recommend not using jsapi to load the library, according to release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will also change the load statement to...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
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/