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.
Related
I am trying to create an chart with google charts like:
stacked column chart with annotations in every value field.
Instead of the value it should show the name on every Value box in the stacked columns.
Name is always one row before the data in the google sheet - the data from google sheets can also be formated differently.
the posted code already does that, but only uses the same names for all rows instead of the custom names for every row/column.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1fUeGQpVGXpXmQ6QLLBgMf3VpaYuOnQIX24lBGgG7yoQ/gviz/tq?range=1:24");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
var options = {
width: 1920,
height: 1080,
legend: { position: 'none' },
column: { groupWidth: '95%' },
isStacked: true
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart" style="width: 100%; height: 100%;"></div>
</body>
</html>
(if the google sheet link won't work, here is the raw data)
Working code without google sheets (and minimal data, other label names):
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['API Category',
'Social', { role: 'annotation' },
'Music', { role: 'annotation' },
'File Sharing', { role: 'annotation' },
'Storage', { role: 'annotation' },
'Weather', { role: 'annotation' }
],
['2011', 98, 'Uschi', 53, 'Petra', 12, 'Max', 16, 'Mustermann', 6, 'Siegfried'],
['2012', 151, 'Susi', 34, 'Stackoverflow', 26, 'factor', 36, 'Ohnezahn', 49, 'Zahlos'],
['2013', 69, 'Rick', 27, 'Rolled', 22, 'Visual', 17, 'Studio', 15, 'Code'],
]);
var view = new google.visualization.DataView(data);
var options = {
width: 1920,
height: 1080,
legend: { position: 'none' },
column: { groupWidth: '95%' },
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
</body>
</html>
It s probably possible to accomplish that with Setcolumns() or setRows() but I just cannot wrap my head around it right now.
Maybe the question should be "Howto use ColumnDescription objects with data from external sources like google sheet"
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 am using the Google Charts API to draw several ComboCharts utilizing the arrayToDataTable routine. Everything loads fine but an error occurs (in IE8 only) if I try to redraw any of the charts.
I first noticed this when triggering a redraw of the charts using JQuery's $( window ).resize but the issue is present even if I just execute two back-to-back chart.draw functions.
Any ideas...
What is causing this error?
How can I fix it?
Script Error from IE8 (repeated multiple times):
format+en,default+en,ui+en,corechart+en.I.js
Here is sample code that will reproduce the error in IE8. Resize the window to trigger the error:
<html>
<head>
<title>Graph Test</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var opt = {
legend: { position: 'none' },
axisTitlesPosition: 'none',
enableInteractivity: 'false',
hAxis: {textPosition: 'none'},
vAxis: {textPosition: 'none', maxValue: 11, minValue: 6, gridlines: {color: 'transparent'}, baselineColor: 'transparent'},
lineWidth: 1,
bar: {groupWidth:'75%'},
seriesType: "bars",
series: {1: {type: "line"}},
chartArea: {'width': '90%', 'height': '90%'},
colors: ['#4D8C8C', '#a7a7a7'],
backgroundColor: '#d3eeee'
}
var myArray = [
['ID', 'Value', {role: 'style'}, 'Rec', {role: 'certainty'}],
[1, 8, '#FF0000', 10, false],
[2, 7, '#FF0000', 10, false],
[2, 10, '#FF0000', 10, false]
];
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){drawChart(myArray,opt)});
function drawChart(arr,opt) {
data = google.visualization.arrayToDataTable(arr);
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, opt);
}
$(document).ready(function() {
$( window ).resize(function() {
drawChart(myArray,opt);
});
});
</script>
</head>
<body>
<div id="chart_div" style="width: auto; height: 50px;"></div>
</body>
</html>
Instead of creating a new chart object each time, try redrawing the existing one:
function drawChart(arr,opt) {
data = google.visualization.arrayToDataTable(arr);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, opt);
$( window ).resize(function() {
chart.draw(data, opt);
});
}
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']
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.