I have 3 tables that I want to draw in one chart , how could I do this? I tried Join method but it only works with two tables? I was thinking to use group by its not working for some reason , please see the code below
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'Percentage');
data1.addColumn('number', 'Jan');
data1.addRows([
[1, 0.48],
[2, 0.66],
[5, 0.55],
[6, 0.28],
[8, 0.332],
[9, 0.625],
[10, 0.5],
[12, 0.34],
[13, 0.668]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Percentage');
data2.addColumn('number', 'Feb');
data2.addRows([
[1, 0.77],
[2, 0.88],
[5, 0.55],
[6, 0.36],
[8, 0.798],
[9, 0.625],
[10, 0.885],
[12, 0.34],
[13, 0.48]
]);
var data3 = new google.visualization.DataTable();
data3.addColumn('number', 'Percentage');
data3.addColumn('number', 'Mar');
data3.addRows([
[1, 0.43],
[2, 0.76],
[5, 0.98],
[6, 0.32],
[8, 0.123],
[9, 0.455],
[10, 0.78],
[12, 0.90],
[13, 0.48]
]);
Please help, thanks
you don't need to join, just more columns...
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'Percentage');
data1.addColumn('number', 'Jan');
data1.addColumn('number', 'Feb');
data1.addColumn('number', 'Mar');
data1.addRows([
[1, 0.48, 0.77, 0.43],
[2, 0.66, 0.88, 0.76],
[5, 0.55, 0.55, 0.98],
[6, 0.28, 0.36, 0.32],
[8, 0.332, 0.798, 0.123],
[9, 0.625, 0.625, 0.455],
[10, 0.5, 0.885, 0.78],
[12, 0.34, 0.34, 0.90],
[13, 0.668, 0.48, 0.48]
]);
Related
I'd like to create column chart with X axis numeric values 1, 2, 3, 4 ... N and Y value of course different on every column.
I can't find out how to change labels on X line under bars, to string. For example - 1 could be marked as Elephant, 2 as Horse etc.
I could use string as X values, but then there is no way to get zoom working. At least, I didn't find any way to get it working.
simple example with strings, I'd like to achieve same appearance as this one, but with numeric values on X axis.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'animal');
data.addColumn('number', 'count');
data.addRows([
['Elephant', 5],
['Horse', 2],
['Dog', 7],
['Cat', 4],
]);
var options = {
explorer: {
axis: 'horizontal',
keepInBounds: true,
},
title: 'Testing',
hAxis: {
title: 'Animal',
},
vAxis: {
title: 'number'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
Chart should look like this, but with working zoom:
Chart example
to use string labels on a continuous axis,
you will need to provide your own ticks
using object notation, provide the value (v:) and formatted value (f:)
{v: 1, f: 'Elephant'}
see following working snippet...
google.charts.load('current', {
callback: drawBasic,
packages: ['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'animal');
data.addColumn('number', 'count');
data.addRows([
[1, 5],
[2, 2],
[3, 7],
[4, 4]
]);
var options = {
explorer: {
axis: 'horizontal'
},
title: 'Testing',
hAxis: {
ticks: [
{v: 1, f: 'Elephant'},
{v: 2, f: 'Horse'},
{v: 3, f: 'Dog'},
{v: 4, f: 'Cat'}
],
title: 'Animal',
},
vAxis: {
title: 'number'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I attach a select event to charts -- a column chart and a pie chart
When I turn on animation, I get two select events for a single column select action from the column chart (but just one, correctly, from the pie chart, which doesn't animate).
For the column chart, the first event returns the correct selection data [{column:1, row:1}], but the second event returns an empty array.
With animation turned off (commented out) I get the correct response, namely only one event when a user selects a column.
Has anyone seen this? What do I do? I haven't found any value that lets me even differentiate whether the event is occurring in the presence of animation, or any other logical way to at least filter out the rogue second event. Obviously I would like to suppress the incorrect second event when animation is turned on.
Here's the animation spec:
let options = {
animation:{
startup: true,
duration: 500,
easing: 'out',
},
the 'select' event on a ColumnChart seems to be working fine with animation here,
see following working snippet...
is there more you can share?
are you creating the charts directly or using the ChartWrapper class?
which packages are you using, 'corechart'?
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var view = new google.visualization.DataView(data);
view.setColumns([{sourceColumn:0, type: 'string', calc: 'stringify'}, 1]);
var options = {
animation:{
startup: true,
duration: 500,
easing: 'out',
},
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
isStacked: true,
title: 'Motivation and Energy Level Throughout the Day',
vAxis: {
title: 'Rating (scale of 1-10)'
}
};
var chartCol = new google.visualization.ColumnChart(document.getElementById('column_div'));
var chartPie = new google.visualization.PieChart(document.getElementById('pie_div'));
google.visualization.events.addListener(chartCol, 'select', function () {
showSelection(chartCol);
});
google.visualization.events.addListener(chartPie, 'select', function () {
showSelection(chartPie);
});
function showSelection(sender) {
document.getElementById('msg_div').innerHTML += (new Date()).getTime() + ' -- ' + JSON.stringify(sender.getSelection()) + '<br/>';
}
chartCol.draw(data, options);
chartPie.draw(view, {
legend: 'none',
theme: 'maximized'
});
},
packages: ['corechart']
});
div {
padding: 6px 6px 6px 6px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="column_div"></div>
<div id="pie_div"></div>
<div id="msg_div"></div>
i have to create a GeoChart of US region. currently the color assign to each countries depends on colorAxis.color in a gradient . is there any way to specify color to each country based on given range of values. For example:
value between 0-20 to have Red color
value between 21-40 to have yellow color
and son on? any help in this issue is appreciated. thank you.
it seems the gradient could be overridden if a color name is supplied for every value, using...
colorAxis: {
colors: colorNames, // array of color names -- one for each value
values: colorValues // array of values extracted from the data and sorted ascending
},
here, I adjust the range to match up with the data from a GeoChart example...
red <= -10 > yellow <= 10 > green
google.charts.load('44', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var dataRows = [
['Country', 'Latitude'],
['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
['Canary Islands', 28], ['Cape Verde', 15],
['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
['Comoros', -12], ['Cote d\'Ivoire', 6],
['Democratic Republic of the Congo', -3], ['Djibouti', 12],
['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', 13],
['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
['São Tomé and Principe', 0], ['Senegal', 15],
['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
['Zimbabwe', -18]
];
// extract column index 1 for color values
var colorValues = dataRows.map(function(val){
return val.slice(-1);
});
// remove column label
colorValues.splice(0, 1);
// sort ascending
colorValues.sort(function(a, b){return a-b});
// build color names red <= -10 > yellow <= 10 > green
var colorNames = [];
colorValues.forEach(function(value) {
if (value <= -10) {
colorNames.push('red');
} else if ((value > -10) && (value <= 10)) {
colorNames.push('yellow');
} else {
colorNames.push('green');
}
});
var data = google.visualization.arrayToDataTable(dataRows);
var options = {
region: '002',
colorAxis: {
colors: colorNames,
values: colorValues
},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="geochart-colors" style="width: 700px; height: 433px;"></div>
I am using Google Charts. I want to change border color & width of selected column. By default stroke color is white and width is 1. I want to change border color to black and width to 2.
Code :
var data = google.visualization.arrayToDataTable(mydata);
var options = {
width: 600,
height: 400,
legend: {position: 'top', maxLines: 4},
bar: {groupWidth: '50%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
There is no build-in option to set this style, but you may ovveride these settings for stroke-color/width via CSS:
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
legend: {position: 'top', maxLines: 4},
isStacked: true};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
}
#mydiv svg>g>g>g>g>rect[stroke="#ffffff"][stroke-width="1"] {
stroke: black !important;
stroke-width: 2px !important;
}
<div id="mydiv"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
You could set column style (border color & width) by applying Column styles on the selected column using select event as demonstrated below:
google.load("visualization", '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature'],
['2010', 10, 24, 20, 32, 18, 5],
['2020', 16, 22, 23, 30, 16, 9],
['2030', 28, 19, 29, 30, 12, 13]
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_stacked'));
google.visualization.events.addListener(chart, 'select', function () {
highlightBar(chart,options,view);
});
chart.draw(data, options);
}
function highlightBar(chart,options,view) {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
var column = selection[0].column;
//1.insert style role column to highlight selected column
var styleRole = {
type: 'string',
role: 'style',
calc: function(dt, i) {
return (i == row) ? 'stroke-color: #000000; stroke-width: 2' : null;
}
};
var indexes = [0, 1, 2, 3, 4, 5, 6];
var styleColumn = findStyleRoleColumn(view)
if (styleColumn != -1 && column > styleColumn)
indexes.splice(column, 0, styleRole);
else
indexes.splice(column+1, 0, styleRole);
view.setColumns(indexes);
//2.redraw the chart
chart.draw(view, options);
}
}
function findStyleRoleColumn(view) {
for (var i = 0; i < view.getNumberOfColumns() ; i++) {
if (view.getColumnRole(i) == "style") {
return i;
}
}
return -1;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="columnchart_stacked" style="width: 600px; height: 420px;"></div>
JSFiddle
I want to draw chart that can set x between two y for example I want to draw a chart with x=100 and y1=200 , y2=500 just vertical line with good detail which chart can do that for me something like this image
Which chart I should use I think it should be line chart but how?
You can use a LineChart to do that. Create a DataTable with columns for x and y values, then enter your points one row at a time, with linked points adjacent to each other, and empty rows in between (which causes the line to break, so you don't connect to the next vertical pair). Here's an example:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 100], // keep linked points adjacent
[1, 200],
[null, null], // insert blank row in between
[2, 150],
[2, 275],
[null, null],
[3, 75],
[3, 200],
[null, null],
[4, 100],
[4, 300]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pointSize: 5
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
http://jsfiddle.net/asgallant/mMy27/