Google bubble charts: how to use explorer + animation - javascript

i'm trying to add an animation to my bubble chart, but if I add it the explorer function stops working.
javascript:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Score', 'Doc Count', 'Classification', 'Rules Matched'],
['foo', 0.29380098, 1, 1, 6],
['bar', 0.29226518, 1, 1, 6],
['poo', 0.24833801, 0, 0, 5]
]);
var options = {
hAxis: {title: 'Score'},
explorer: {
},
vAxis: {title: 'Document Count'},
bubble: {opacity: 0.5, textStyle: {color: 'transparent'}},
colors: ['green', 'red'],
colorAxis: {legend: {position: 'none'}},
fontSize: 12,
fontName: 'Source Sans Pro',
animation: {startup: true, duration: 2000}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubbles'));
chart.draw(data, options);
}
</script>
html:
<div id="bubbles" style="max-height: 450px; height: 450px; margin: auto;">
</div>
What am I doing wrong?
you can see the fiddle here: https://jsbin.com/tafiyafofu/edit?html,output

I'm not sure if are doing anything wrong, the documentation didn't mention that there is a conflict when you use both options.
But the exporer is marked as "experimental", so anything may happen.
Possible workaround: redraw the chart(without animation) when the animation has been finished:
var chart = new google.visualization.BubbleChart(document.getElementById('bubbles'));
google.visualization.events.addOneTimeListener(chart,'animationfinish',function(){
delete options.animation;
chart.draw(data, options);
});
chart.draw(data, options);

Related

Create 3 quarter donut chart using Google Chart library

I'm trying to make a donut chart like below using google chart library:
I found this article that makes half donut, but didn't find the code to create the one in my image.
Can anyone help?
Read here https://developers.google.com/chart/interactive/docs/gallery/piechart#removing-slices
It simply says donut charts are just pie charts with pieHole values between 0 and 1. To remove some slices, it says
To omit a slice, change the color to 'transparent':
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pac Man', 'Percentage'],
['', 75],
['', 25]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
pieHole: 0.4,
pieStartAngle: 0,
pieEndAngle: 180,
tooltip: { trigger: 'none' },
slices: {
0: { color: 'yellow' },
1: { color: 'transparent' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
Use pieSliceText and pieStartAngle with an empty data field;
google.charts.load('visualization', '1.1', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable([
['Skils', 'Skills level'],
['React', 6],
['HTML', 4],
['PHP', 2],
[null, 12]
]);
new google.visualization.PieChart(document.getElementById('chart_div')).
draw(data, {
title: "My Skills",
slices: {
3: {
color: 'transparent'
}
},
pieHole: 0.5,
width: 600,
height: 600,
pieSliceText: 'value',
pieStartAngle: 270,
});
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Donut Chart

I ran into the problem of implementing graphics via google chart, it is necessary to make a three sectional diagram, please tell me how to do it better.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['My all', 100],
['My alsl', 100],
['My alsl', 100],
]);
var options = {
pieHole: 0.85,
tooltip: { trigger: 'none' },
pieSliceText: 'none',
pieSliceTextStyle: {
color: 'transparent',
},
legend: 'none',
slices: {
0: { color: '#f9b231' },
1: { color: '#7e430f' },
2: { color: '#f8d597' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>

Google Charts - Can you align columns in a column chart to the center of the chart?

Is there a way using the column chart provided by the Google charts javascript api to center columns in the middle of the chart rather than having large amounts of space between each column? I can accomplish this by grouping the values together but I lose the label under the column.
Here's a pic of what I'm trying to accomplish:
Here's what I have so far:
google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawColColors)
function drawColColors() {
const data = google.visualization.arrayToDataTable([
['Number', 'Price'],
['1', 1900000],
['2', 1800000],
['3', 1500000]
])
const options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: { minValue: 0, format: '$###,###,###' },
enableInteractivity: false,
bar: { groupWidth: 45 },
legend: { position: 'none' }
}
const chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
}
Codesandbox: https://codepen.io/anon/pen/GworqG
bar.groupWidth is the only config option that will specifically address column alignment
(in this manner)
however, instead of a number...
bar: {groupWidth: 45},
you can also use a percentage.
This won't necessarily move the columns, but it will make them larger, bringing them closer together.
bar: {groupWidth: '90%'},
see following working snippet for an example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Number', 'Price'],
['1', 1900000],
['2', 1800000],
['3', 1500000]
])
var options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: {minValue: 0, format: '$###,###,###'},
enableInteractivity: false,
bar: {groupWidth: '90%'},
legend: { position: 'none' }
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
another option would be to use actual numbers (1), rather than strings ('1'), on the x-axis.
this enables additional config options you can use to push the columns closer to the center.
for instance, setting the viewWindow will allow you to add space between the visible columns and the edges.
hAxis: {
viewWindow: {
min: -2,
max: 6
}
}
by default, a continuous axis (numbers) will display grid lines,
whereas a discrete axis (strings) will not.
these can be removed, or hidden, with the following options.
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
see following working snippet for another example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Number', 'Price'],
[1, 1900000],
[2, 1800000],
[3, 1500000]
])
var options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: {minValue: 0, format: '$###,###,###'},
enableInteractivity: false,
legend: {position: 'none'},
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: {
min: -2,
max: 6
}
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Adding different colored bar in Column chart [duplicate]

How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help.
Below is the code snippet:
tdata.addRow([col1, arr[0].Manual])
tdata.addRow([col2, arr[0].Auto]);
tdata.addRow([col3, arr[0].Amount]);
options = {
fontSize: 12,
height: 430,
width: 380,
chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
backgroundColor: '#f5f5f5',
title: 'Project',
pieSliceText: 'value',
colors: ['red', 'green', 'blue'],
'is3D': true
};
var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
chart.draw(tdata, options);
return false;
the colors option applies colors to each series
so if you have 3 colors
you would need 3 y-axis columns
as follows...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['A', 100, 120, 130]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'green', 'blue']
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to color individual columns within a series,
use a 'style' column role
as follows...
note: using a 'style' column role will invalidate the legend
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y', {role: 'style', type: 'string'}],
['A', 100, 'red'],
['B', 120, 'green'],
['C', 130, 'blue']
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
This is answer according to google document, use color property instead of background color.
var options = { width: 400, height: 240, title: 'Toppings I Like On My Pizza', colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };
chart.draw(data, options);
you can find more here

Google Charts bar chart: How to manually change the colour of every bar? (single series)

I have written a simple bar chart with Google Charts, one series, it works fine, all bars are blue:
Now I would like to manually set the colour of the every single bar (actually a green-to-red transition proportional to the value, to make it easier to understand what is good/bad).
How can I do this?
I have tried setting colors in options as described here but for some reason it does not work in my code below.
chco seems to be what I need, but it is an URL parameter... how to elegantly integrate it in JavaScript code?
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Score'],
['NemakiWare', 288],
['Nuxeo', 240],
['FileNet', 220],
['SharePoint', 98]
]);
var options = {
colors: ['green','blue','pink','red'],
legend: 'none',
hAxis: {
textPosition: 'none',
minValue: 0,
gridlines: {
color: 'transparent'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
There are different ways to do this but you can use the style role.
Source:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Score', { role: 'style' }],
['NemakiWare', 288, 'green'],
['Nuxeo', 240, 'blue'],
['FileNet', 220, 'pink'],
['SharePoint', 98, 'red']
]);
var options = {
legend: 'none',
hAxis: {
textPosition: 'none',
minValue: 0,
gridlines: {
color: 'transparent'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.clearChart();
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Categories