I' am using Google Chart. I was searching on Google and found some API options to set in to get the color of the bar from default blue to white. This is what I have added into the option parameters:
Someone said that this will only work if you want more then one color of bars
colors: '#FFF'
This is also what I tried. Saw this somewhere so thought to apply it.
color: '#FFF'
For some reason its not working as wanted. Here's my javascript code in placed.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Current Demand'],
<?php echo $data; ?>
]);
var options = {
width: 350,
height: 261,
isStacked: true,
legend: 'none',
backgroundColor: {
fill:'transparent'
},
hAxis: {
title: '',
titleTextStyle: {color: 'white'
},
colors: '#FFF'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Am I missing something?
Colors need to be put into a javascript array.
colors: ['#fff']
Related
I want to create a timeline chart by using Google Spreadsheet. I have written the datas in a spreadsheet although when i try to run it, doesnt work.
Here is my jsfiddle
I want my spreadsheet to be pulled as data, i have made a spreadsheet although from the google dev links i followed, mine doesnt work.
Also here is the code
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="chart_div" style="height: 400px; width: 800px;"></div>
<script type="text/javascript"> </script>
google.charts.load('current', {
packages: ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1RslSoJjk25ZbBwitHnY16VI39dWRK8OkkfnCv-ubUqY/edit?usp=sharing");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var container = document.getElementById('timechart');
var chart = new google.visualization.Timeline(container);
var options = {
//1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
//!!ONLY WHEN THERE ARE 5 BARS, OTHERWISE IT MIgHT CHANGE!!
colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
timeline: {
rowLabelStyle: {
fontName: 'Arial',
fontSize: 20,
color: '#0000'
},
barLabelStyle: {
fontName: 'Times New Roman',
fontSize: 22
}
},
'width': 2650,
'height': 900,
avoidOverlappingGridLines: false,
alternatingRowStyle: false,
backgroundColor: '#FFFFFF'
};
chart.draw(data, options);
}
I am using the Google Charts API to create a stepped area chart and I'd like to remove all horizontal lines in my chart. I've looked at all the documentation for the options, but I don't see any way to remove it. Is there some way to trick the API into removing them or am I stuck with them? The lines I am talking about is in the picture below, just to clear possible confusion.
Set vAxis.gridlines.color to transparent. You see more options in the Configuration Options section from the docs.
Use (using example from docs):
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {
title: 'Accumulated Rating',
gridlines: {
color: 'transparent'
}
},
isStacked: true
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 500px; height: 250px;"></div>
you can use the following option...
vAxis: {
gridlines: {
count: 0
}
}
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
isStacked: true,
vAxis: {
gridlines: {
count: 0
}
}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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]
]);
Hi I want to create bar chart like image which i have posted, I was trying to do this using google api and d3.js but unable to achieve. I need a light background for bar after bar end to a fix height for each bar.please tell me which API i should use.
I have used google api
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Ingredients', 'Quantity', { role: 'style' }, { role: 'annotation' }],
['28g', 28, 'red', 'Fat'],
['14g', 14,'red','Saturates'],
['9g', 9,'red','Sugar'],
['2.2g', 2.2,'red','Salt']
]);
var options = {
'legend': 'none',
'title': 'per Product',
'titleTextStyle': {color: '#FF0000'},
'hAxis': {title: 'in grams', titleTextStyle: {color: 'red'}},
tooltip: {trigger: 'none'},
enableInteractivity: 'False'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
using this I got below
to achieve that you can just plot another rectangle before the one you use to show the actual data, with the width as each bar and the height as the max value of the scale
In the API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Methods
You have many options on backgroundColor.
I am interested in using a google pie chart and need it to display all the tooltips constantly. At the moment they come up individually on hover, just wondered if it's possible to do that by altering the js slightly?
Google says that you can use tooltip.trigger with either 'focus' which displays with hover or 'none' obviously to display nothing, but theres no function for show all
Heres the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Toe', 38],
['Jam', 22],
['Earl', 2]
]);
var options = {
legend: 'none',
lable: 'none',
is3D: true,
pieSliceText: 'none',
slices: [{offset:0.1}, {offset:0.1}, {offset:0.1},],
chartArea: {left:70,top:50,width:140,height:140},
colors: ['#99C9FF','#B7B7B7', '#CCC'],
pieSliceBorderColor: '#999',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
You can keep the tooltips constantly if you use the follwing option:
tooltip: { trigger: 'selection' }
But then you need to click the slice to get it initially.