I have a set of
var data = new google.visualization.arrayToDataTable([
['Month', 'Rate', 'Interest', 'Principle', 'Balance','New Balance'],
['Jan', 321, 600, 816, 319, 890],
['Feb', 163, 231, 539, 594, 678],
]);
I want to Stack and Group the above data 2 at a time (Rate,Interest), (Principle, Balance) and last one New Balance as a separate Bar. How can this be achieved in Google charts.
I am new to this whole thing..any help appreciated here is some on info to get grouping data into 2 bars how can this be improved to fit my requirement.
How to make a grouped bar stack with Google charts?
using the option isStacked, if set to true, stacks the elements for all series at each domain value.
this means the values for all columns for each row will be displayed in one stack
as such, to create separate stacks, the data will need to be separated into rows
something like the following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month\nCategory', 'Bottom', 'Top'],
['Rate / Interest', 321, 600],
['Principle / Balance\nJan', 816, 319],
['New Balance', 890, null],
['Rate / Interest', 163, 231],
['Principle / Balance\nFeb', 539, 594],
['nNew Balance', 678, null],
]);
var options = {
height: 400,
isStacked: true,
legend: 'none',
width: 800
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chartDiv);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'Asia', 'Europe'],
['2012', 900, 390],
['2013', 1000, 400],
['2014', 1170, 440],
['2015', 1250, 480],
['2016', 1530, 540]
]);
var options = {title: 'Population (in millions)', isStacked:true};
// Instantiate and draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}`enter code here`
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Related
I am creating a donut chart using Google Visualization. Its an Monthly Revenue Goal chart. e.g. let say goal is set 1000 and 800 is the revenue then 80% will be shown as completed and 20% as remaining.
What I want to do is that if revenue is 2000 then 200% should be shown. (Visually it can not be greater than 100 (whole donut) , I just want to see the 200%.
Is this possible?
we can use the formatted value to display anything we need.
first, we need to set the following config option, to display the value of the data table column.
pieSliceText: 'value'
then when loading the data table, we use object notation to provide the formatted value, where v: is the value, and f: is the formatted value.
{v: 2000, f: '2,000 - 200%'}
with the config option above, we can display anything...
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'amount'],
['goal', 1000],
['revenue', {v: 2000, f: '2,000 - 200%'}],
]);
var options = {
pieHole: 0.4,
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTE: but you may need to disable or provide a custom tooltip to match...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'amount', {role: 'tooltip', type: 'string'}],
['goal', 1000, '1,000'],
['revenue', {v: 2000, f: '2,000 - 200%'}, '2,000 - 200%'],
]);
var options = {
pieHole: 0.4,
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
]);
// Optional; add a title and set the width and height of the chart
var options = { 'title': 'the title', 'width': 550, 'height': 400 };
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
i am using bar chart, it only display default blue color.
i have used an array which removes the column which doesnot have data(like 0)
like sorting the data
i want to display individual color for each column
like red, green any different colors for each bar
i like to add annotations also
thanks in advance
the column headings and values posted in the above comments seem to work fine here...
the only changes made...
add type property to style and annotation roles.
added different colors for style role.
see following working snippet...
var a = [['Work', 8, "#E53935", 8], ['Eat', 2, "#1E88E5", 2], ['TV', 4, "#43A047", 4]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day', {role: 'style', type: 'string'}, {role: 'annotation', type: 'number'}],a[0],a[1],a[2]
]);
var options = {
title: 'the title',
width: 550,
height: 400,
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
I want to show data values on the line chart, i.e. which appear on mouse over, i need them all displayed by default. I tried the solution here Google Charts API: Always show the Data Point Values in Graph
data.addColumn({type: 'number', role: 'annotation'});
I added this to my code (I'm not sure where to put it exactly) but It didn't make any change.
Here is part of my code:
<!DOCTYPE html>
<html>
<head>
<title>Week/Orders</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Week','Orders'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Week"]."', ".$row["Orders"]."],";
}
?>
]);
var options = {
title: 'Week Vs Orders',
'width':1700,
'height':600,
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 900px; height: 400px"></div>
</body>
</html>
I have two values; Week and Orders. I need only the "Order" value displayed on the graph by default. How can I do this? Thanks.
you can use a DataView to add annotations to the chart
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['Week','Orders'],
['1', 5],
['2', 6],
['3', 4]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Week Vs Orders',
width: 1700,
height: 600,
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(view, options); // <-- use data view
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curvechart"></div>
I am trying to use Google gauge charts in my page. Now I want to add text in the chart for each section or colors. Can I do that inside the chart. I tried doing some html modification but with no help.
Trying from this link -https://developers.google.com/chart/interactive/docs/gallery/gauge
So for example, I would like to add text1 for white color and so on.
use the majorTicks config option to provide labels for the major ticks
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gauge(container);
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 600, height: 200,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
majorTicks: ['A', 'B', 'C', 'D', 'E'],
minorTicks: 3
};
chart.draw(data, options);
},
packages: ['gauge']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to create a basic Google Charts line chart to show percentages for 3 values over time. The chart is displaying but I'm struggling to get the vAxis to show 0 - 100%, the top value is just the highest value from my dataset (45%).
This is the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'date');
data.addColumn('number', 'tool1');
data.addColumn('number', 'tool2');
data.addColumn('number', 'tool3');
data.addRows([
[new Date(2000, 8, 5), 10, 20, 30],
[new Date(2001, 8, 5), 20, 30, 40],
[new Date(2002, 8, 5), 25, 35, 45],
]);
var options = {
chart: {
title: 'Tool rollout'
},
vAxis: {minValue: 0,
maxValue: 100,
format: "percent"
},
width: 900,
height: 500,
};
var chart = new google.charts.Line(document.getElementById('line'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="line"></div>
</body>
</html>
But this is how it's rendering:
The docs suggest that setting vAxis.maxValue "Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data." but I'm obviously missing something as this doesn't seem to get used.
You´re using material chart Google api, try using:
vAxis: {
format: "#.#%",
viewWindow: {
max:1.0,
min:0.2
}
}