I have data in the format of:
+----------+----------+----------+----------+
| Date | Name | Sent | Received |
+----------+----------+----------+----------+
| 1-1-2020 | A | 5 | 6 |
| 2-1-2020 | A | 2 | 3 |
| 3-1-2020 | A | 7 | 3 |
| 4-1-2020 | A | 7 | 3 |
| 5-1-2020 | A | 7 | 3 |
+----------+----------+----------+----------+
+----------+----------+----------+----------+
| Date | Name | Sent | Received |
+----------+----------+----------+----------+
| 1-1-2020 | B | 6 | 3 |
| 2-1-2020 | B | 2 | 3 |
| 3-1-2020 | B | 1 | 2 |
| 4-1-2020 | B | 3 | 6 |
| 5-1-2020 | B | 5 | 3 |
+----------+----------+----------+----------+
+----------+----------+----------+----------+
| Date | Name | Sent | Received |
+----------+----------+----------+----------+
| 1-1-2020 | C | 6 | 3 |
| 2-1-2020 | C | 2 | 3 |
| 3-1-2020 | C | 1 | 2 |
| 4-1-2020 | C | 3 | 6 |
| 5-1-2020 | C | 5 | 3 |
+----------+----------+----------+----------+
I want to plot the day-wise total for Sent and Received using google charts.
I should be able to put Name as a filter to include single/multiple data sources.
I tried using state change handler on Category Filter, but after changing the data source, the new dashboard still displays the old data.
Any leads would be appreciated.
Here is the code I tried.
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em; height: 500px">
<p style="padding-left: 1em"><strong>Donuts eaten per person</strong></p>
<div style="padding-left: 1em" id="categoryPicker_div"></div>
<div id="chart_div" style="padding-top: 15px; padding-bottom: 15px; height: 400px"></div>
<div id="time_div"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart', 'line', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Workgroup Selection:',
'allowTyping': true,
'allowMultiple': true
}
}
});
var line = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
'legend': {'position': 'top'},
'curveType': 'linear',
'animation': {
'startup': false,
'duration': 0,
'easing': 'out'
},
'chartArea': {'height': '80%','width': '85%'},
'lineWidth': 3,
'hAxis': {'title': 'Date'},
'vAxis': {
'viewWindow': {'min': 0 },
'viewWindowMode':'pretty'
},
'crosshair':{
'trigger': 'both'
}
},
'view': {'columns': [0, 2, 3]}
});
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'time_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '85%', 'height':'20%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {'columns': [0, 2, 3]},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
}
//'state': {'range': {'start': new Date(2016, 9, 1),'end': new Date(2016, 10, 1)}}
});
var Data_ = google.visualization.arrayToDataTable([
['Date', 'Workgroup', 'Sent', 'Received'],
[new Date(2016, 9, 15), 'A', 25, 3],
[new Date(2016, 9, 20), 'B', 31, 2],
[new Date(2016, 9, 21), 'C', 15, 5],
[new Date(2016, 9, 22), 'D', 7, 0],
[new Date(2016, 9, 23), 'E', 13, 1],
[new Date(2016, 9, 24), 'F', 8, 4],
[new Date(2016, 9, 25), 'G', 8, 3],
[new Date(2016, 9, 26), 'H', 13, 1],
[new Date(2016, 9, 29), 'I', 22, 4]
]);
var Data_A = google.visualization.arrayToDataTable([
['Date', 'Workgroup', 'Sent', 'Received'],
[new Date(2016, 9, 19), 'A', 5, 0],
[new Date(2016, 9, 20), 'B', 3, 2],
[new Date(2016, 9, 21), 'C', 0, 1],
[new Date(2016, 9, 22), 'D', 2, 0],
[new Date(2016, 9, 24), 'F', 4, 2],
[new Date(2016, 9, 25), 'G', 3, 1],
[new Date(2016, 9, 26), 'H', 4, 1],
[new Date(2016, 9, 27), 'I', 3, 2]
]);
// var chart = new google.charts.Line(document.getElementById('chart_div'));
//dashboard.bind([control, categoryPicker], line);
//dashboard.draw(Data_);
function drawDash(Data){
console.log("inside drawDash");
Data = eval(Data);
console.log(Data);
dashboard.bind([categoryPicker, control],line)
dashboard.draw(Data);
};
google.visualization.events.addListener(categoryPicker, 'statechange', function (){
console.log("State Changed");
console.log(categoryPicker.getState().selectedValues[0]);
if (categoryPicker.getState().selectedValues[0] === undefined){
console.log("Default Value Selected");
drawDash(Data_);
}
else{
drawDash("Data_"+categoryPicker.getState().selectedValues[0]);
}
});
drawDash(Data_);
}
</script>
</body>
</html>
It looks like the listener is redrawing the whole dashboard (and maybe resetting the filters). Instead, you could try redrawing only the chart by calling line.draw()
Additionally, instead of creating 2 separate DataTables, I'd create only one and filter a view according to the selected value. For example:
view.setRows(Data_.getFilteredRows([{
column: 1,
value: categoryPicker.getState().selectedValues[0]
},
This suggestion is detailed on this question: I need to filter elements in google.visualization.datatable used in Google Charts
Related
I have developed a feature which allows the user to hide/show columns. One thing that Google Charts does is list all rows in the list even if the visible row has null values. Is there a way to automatically hide rows that don't have any data in them? I have attached a screenshot to demonstrate rows with null values.
you can use data table method --> getFilteredRows()
the method returns an array of row indexes that match the criteria,
the following will return the row where the second column is not null...
var nonBlankRows = data.getFilteredRows([{
column: 1,
test: function(value, row, column, table) {
return (value !== null);
}
}]);
you can then use the returned array in a data view or chart wrapper,
see following working snippet, which uses both...
google.charts.load('current', {
packages: ['controls', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('string', 'Data');
data.addRows([
[new Date(2017, 11, 20), 'TEST 0'],
[new Date(2017, 11, 21), null],
[new Date(2017, 11, 22), null],
[new Date(2017, 11, 23), null],
[new Date(2017, 11, 24), null],
[new Date(2017, 11, 25), null],
[new Date(2017, 11, 26), 'TEST 1'],
[new Date(2017, 11, 27), null],
[new Date(2017, 11, 28), null],
[new Date(2017, 11, 29), 'TEST 2']
]);
var nonBlankRows = data.getFilteredRows([{
column: 1,
test: function(value, row, column, table) {
return (value !== null);
}
}]);
var options = {
showRowNumber: true,
allowHtml: true
};
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'wrapper-table',
dataTable: data,
options: options,
view: {
rows: nonBlankRows
}
});
chartWrapper.draw();
var view = new google.visualization.DataView(data);
view.setRows(nonBlankRows);
var chart = new google.visualization.Table(document.getElementById('chart-table'));
chart.draw(view, options);
});
.table {
display: inline-block;
margin: 6px;
padding: 6px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="table">
<div id="wrapper-table"></div>
</div>
<div class="table">
<div id="chart-table"></div>
</div>
I'm working on google line chart and I want to double label on x axis(date wise processes ), I'm able to draw chart without dates with below code but not able to populate dates,
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id="container"
style="width: 1610px; height: 400px; margin-left:-120px;"></div>
<script language="JavaScript">
\
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Suceess');
data.addColumn('number', 'Error');
data.addColumn('number', 'Warning');
data.addRows([
['RE-LINK|', 266, 2136, 472],
['UPDATE-IB', 0, 1722, 2728],
['UPDATE-SA', 0, 43580, 87713],
['CREATE-IB/SA', 0, 18920, 103690],
['TERMINATE-IB', 0, 2, 0],
['TERMINATE-COVERAGE', 3682, 5917, 0],
['ADD-COVERAGE AND CHANGE-SITE', 1101, 2433, 7887],
['day1--CREATE-IB', 36647, 0,1064]
]);
data.addRows([
['RE-LINK', 11649, 221, 1127],
['UPDATE-IB', 0, 4844, 79886],
['UPDATE-SA', 0, 2961, 7377],
['CREATE-IB/SA', 0, 3993, 13268],
['TERMINATE-IB', 4105, 0, 0],
['TERMINATE-COVERAGE', 1844, 10834, 0],
['day2--ADD-COVERAGE AND CHANGE-SITE', 218, 717, 10498]
]);
data.addRows([
['RE-LINK', 3484, 3, 28],
['UPDATE-IB', 0, 139207, 238037],
['UPDATE-SA', 0, 3, 3],
['CREATE-IB/SA', 0, 4598, 12680],
['TERMINATE-COVERAGE', 480, 1210, 90],
['day3--ADD-COVERAGE AND CHANGE-SITE', 1, 72, 2372]
]);
data.addRows([
['RE-LINK', 7142, 465, 1427],
['UPDATE-IB', 0, 105719, 216275],
['UPDATE-SA', 0, 14761, 31698],
['CREATE-IB/SA', 0, 5071, 14184],
['TERMINATE-IB', 18, 10, 0],
['TERMINATE-COVERAGE', 5265, 1280, 98],
['day4--ADD-COVERAGE AND CHANGE-SITE', 1173, 12474, 15545]
]);
// Set chart options
var options = {'title' : 'Applications status biz process wise(4 Days)',
hAxis: {
title: '',
textStyle: {
color: '#01579b',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 12,
fontName: 'Arial',
bold: false,
italic: true
},
slantedTextAngle:90
},
vAxis: {
title: '',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
}
},
'width':1600,
'height':400,
colors: ['#00ff00', '#ff0000','#ffe102'],
legend: { position: 'top' },
};
// Instantiate and draw the chart.
var chart = new google.visualization.LineChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
I want to draw this chart
please help on this....
although the requested layout is not available via standard configuration options,
it is possible to achieve, if you're ok with modifying the svg manually
when the chart's 'ready' event fires, add the category labels and group lines
see following working snippet, which is just an example to show the possibility
several assumptions are made based on the size and placement of the chart...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', '');
data.addColumn('string', '');
data.addColumn('number', 'Success');
data.addColumn('number', 'Error');
data.addColumn('number', 'Warning');
data.addRows([
[new Date('12/01/2016'), 'RE-LINK|', 266, 2136, 472],
[new Date('12/01/2016'), 'UPDATE-IB', 0, 1722, 2728],
[new Date('12/01/2016'), 'UPDATE-SA', 0, 43580, 87713],
[new Date('12/01/2016'), 'CREATE-IB/SA', 0, 18920, 103690],
[new Date('12/01/2016'), 'TERMINATE-IB', 0, 2, 0],
[new Date('12/01/2016'), 'TERMINATE-COVERAGE', 3682, 5917, 0],
[new Date('12/01/2016'), 'ADD-CVG / CHG-SITE', 1101, 2433, 7887],
[new Date('12/01/2016'), 'day1--CREATE-IB', 36647, 0,1064]
]);
data.addRows([
[new Date('12/02/2016'), 'RE-LINK', 11649, 221, 1127],
[new Date('12/02/2016'), 'UPDATE-IB', 0, 4844, 79886],
[new Date('12/02/2016'), 'UPDATE-SA', 0, 2961, 7377],
[new Date('12/02/2016'), 'CREATE-IB/SA', 0, 3993, 13268],
[new Date('12/02/2016'), 'TERMINATE-IB', 4105, 0, 0],
[new Date('12/02/2016'), 'TERMINATE-COVERAGE', 1844, 10834, 0],
[new Date('12/02/2016'), 'ADD-CVG / CHG-SITE', 218, 717, 10498]
]);
data.addRows([
[new Date('12/03/2016'), 'RE-LINK', 3484, 3, 28],
[new Date('12/03/2016'), 'UPDATE-IB', 0, 139207, 238037],
[new Date('12/03/2016'), 'UPDATE-SA', 0, 3, 3],
[new Date('12/03/2016'), 'CREATE-IB/SA', 0, 4598, 12680],
[new Date('12/03/2016'), 'TERMINATE-COVERAGE', 480, 1210, 90],
[new Date('12/03/2016'), 'ADD-CVG / CHG-SITE', 1, 72, 2372]
]);
data.addRows([
[new Date('12/04/2016'), 'RE-LINK', 7142, 465, 1427],
[new Date('12/04/2016'), 'UPDATE-IB', 0, 105719, 216275],
[new Date('12/04/2016'), 'UPDATE-SA', 0, 14761, 31698],
[new Date('12/04/2016'), 'CREATE-IB/SA', 0, 5071, 14184],
[new Date('12/04/2016'), 'TERMINATE-IB', 18, 10, 0],
[new Date('12/04/2016'), 'TERMINATE-COVERAGE', 5265, 1280, 98],
[new Date('12/04/2016'), 'ADD-CVG / CHG-SITE', 1173, 12474, 15545]
]);
var view = new google.visualization.DataView(data);
view.hideColumns([0]);
var options = {
chartArea: {
height: 300,
left: 60,
top: 60
},
colors: ['#00ff00', '#ff0000','#ffe102'],
hAxis: {
title: '',
textStyle: {
color: '#01579b',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 12,
fontName: 'Arial',
bold: false,
italic: true
},
slantedTextAngle: 90
},
height: 600,
legend: {
position: 'top'
},
title: 'Applications status biz process wise(4 Days)',
vAxis: {
title: '',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
}
},
width: 1600
};
var formatDate = new google.visualization.DateFormat({
pattern: 'dd-MMM-yy'
});
var container = document.getElementById('container');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = -1;
var dateValue = null;
var svgParent = container.getElementsByTagName('svg')[0];
var labels = [];
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
var groupLabel;
// find hAxis labels
if (text.hasAttribute('transform')) {
rowIndex++;
if (dateValue !== formatDate.formatValue(data.getValue(rowIndex, 0))) {
dateValue = formatDate.formatValue(data.getValue(rowIndex, 0));
groupLabel = text.cloneNode(true);
groupLabel.removeAttribute('transform');
groupLabel.removeAttribute('font-style');
groupLabel.setAttribute('fill', '#333333');
groupLabel.setAttribute('y', parseFloat(text.getAttribute('y')) + 132);
groupLabel.textContent = dateValue;
text.parentNode.appendChild(groupLabel);
if (labels.length > 0) {
setLabelX(labels[labels.length - 1], text, 0);
}
labels.push(groupLabel);
addGroupLine(groupLabel, -24, -144);
}
if (rowIndex === (data.getNumberOfRows() - 1)) {
if (labels.length > 0) {
setLabelX(labels[labels.length - 1], text, 16);
}
addGroupLine(text, 18, -12);
}
}
});
// center group label
function setLabelX(prevLabel, curLabel, xOffset) {
prevLabel.setAttribute('x',
parseFloat(prevLabel.getAttribute('x')) + xOffset +
((parseFloat(curLabel.getAttribute('x')) - parseFloat(prevLabel.getAttribute('x'))) / 2)
);
}
// add group line
function addGroupLine(text, xOffset, yOffset) {
var parent = container.getElementsByTagName('g')[0];
var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
groupLine.setAttribute('x', parseFloat(text.getAttribute('x')) + xOffset);
groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
groupLine.setAttribute('width', '0.8');
groupLine.setAttribute('height', '188');
groupLine.setAttribute('stroke', '#333333');
groupLine.setAttribute('stroke-width', '1');
groupLine.setAttribute('fill', '#333333');
groupLine.setAttribute('fill-opacity', '1');
parent.appendChild(groupLine);
}
});
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></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