I'm a newbie in javascript and am trying to use googlecharts.
Now I have a problem about source column.
Now I can hide some column I need but when I toggle between hide and show the sourcecolumn is not showing anymore.
<html> <head> <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([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var view = new google.visualization.DataView(data);
view.setColumns([ 0,
1,{ calc: "stringify",sourceColumn: 1,type: "string",role: "annotation" },
2,{ calc: "stringify",sourceColumn: 2,type: "string",role: "annotation" }]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "/" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
console.log(view);
var columns = []; var series = {}; for (var i = 0; i < data.getNumberOfColumns(); i++) { columns.push(i); if (i > 0) {
series[i - 1] = {}; } }
google.visualization.events.addListener(chart, 'select', function () { var sel = chart.getSelection(); // if selection length is 0, we deselected an element if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
},
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
console.log(view);
chart.draw(view, options);
} } });
} </script> </head> <body> <div id="columnchart_values" style="width: 900px; height: 500px;"></div> </body> </html>
This is my SouceCode
- https://jsfiddle.net/vpz2a4nc/
Please help me.
you're using data to build the columns,
but using view for the initial draw.
data does not include the annotation columns, only view.
so the column indexes do not align when one is hidden.
an easy fix is to convert the view to a data table,
and replace data before drawing the first time.
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}
]);
data = view.toDataTable();
see following working snippet...
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}
]);
data = view.toDataTable();
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "/" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(data, options);
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
},
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 500px;"></div>
Related
When using two google charts, one vertical axis disappears.
The vertical axis of the first google chart works fine.
But the vertical axis of the second google chart is not visible.
Obviously I made two charts copy & paste,
I have two divs, what's wrong?
//This is my code
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var year1 = /*[[ ${reallist3} ]]*/; //년별 매매
var year2 = /*[[ ${reallist4} ]]*/; //년별 전월세
/*]]>*/
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Element');
data1.addColumn('number', '가격');
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Element');
data2.addColumn('number', '가격');
for(var i = 0; i < year1.length; i++){
data1.addRow([year1[i].date + "(만원)", Number(year1[i].price)]);
}
for(var i = 0; i < year2.length; i++){
data2.addRow([year2[i].date + "(만원)", Number(year2[i].price)]);
}
var view1 = new google.visualization.DataView(data1);
view1.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options1 = {
width: 1100,
height: 500,
bar: {groupWidth: "50%"},
legend: { position: "none" },
vAxis: {minValue : 0},
colors: ["pink","#81BEF7"],
chartArea:{left:60,top:20,width:"80%",height:"85%"}
};
var chart1 = new google.visualization.ColumnChart(document.getElementById("chart_real1"));
chart1.draw(view1, options1);
var view2 = new google.visualization.DataView(data2);
view2.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options2 = {
width: 1100,
height: 500,
bar: {groupWidth: "50%"},
legend: { position: "none" },
vAxis: {minValue : 0},
colors: ["pink","#81BEF7"],
chartArea:{left:60,top:20,width:"80%",height:"85%"}
};
var chart2 = new google.visualization.ColumnChart(document.getElementById("chart_real2"));
chart2.draw(view2, options2);
}
</script>
I would like to ask if it is possible that the haxis value (The one with dates below) for Google Timeline change to string format?
For example, Oct. 30 will be changed to Week 1, Nov. 6 to Week 2, and so on.
Any help and suggestions are welcomed and appreciated.
Thanks in advance!
the timeline chart is very limited compared to the core charts
both in terms of options available and helper methods for finding chart coordinates, etc...
but like core charts, timelines produce svg, which can be modified using javascript
see following working snippet...
once the chart's 'ready' event fires, all of the haxis labels are removed
then custom labels are added back for the week numbers
before removing all the labels, one is cloned, in order to keep the same font, color, y-coordinate, etc...
then the timeline bars are used to find the x-coordinate and add the new label
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Category'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
dataTable.addRows([
['Category A', new Date(2016, 9, 30), new Date(2016, 10, 5)],
['Category B', new Date(2016, 10, 6), new Date(2016, 10, 12)],
['Category C', new Date(2016, 10, 13), new Date(2016, 10, 19)]
]);
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = 0; // data table row index
var weekLabel = null; // clone of text node - keep font settings, y-coord, etc...
// remove haxis labels
var labels = container.getElementsByTagName('text');
while (labels.length > dataTable.getNumberOfRows()) {
// ignore "category" labels
if (dataTable.getFilteredRows([{column: 0, value: labels[labels.length - 1].innerHTML}]).length === 0) {
if (weekLabel === null) {
weekLabel = labels[labels.length - 1].cloneNode(true);
}
labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
}
}
// use timeline bars to find x coordinate for week labels
rowIndex = 0;
var svgParent = container.getElementsByTagName('svg')[0];
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
var bounds; // bounding box of text element
// ignore rect if not a timeline bar
if (parseFloat(bar.getAttribute('x')) > 0) {
weekLabel = weekLabel.cloneNode(true);
weekLabel.innerHTML = 'Week ' + (rowIndex + 1);
svgParent.appendChild(weekLabel);
bounds = weekLabel.getBBox();
weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
rowIndex++;
}
});
});
chart.draw(dataTable);
},
packages:['timeline']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
google.charts.load("current", {packages:["timeline"], callback: drawChart});
function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
// hAxis put on top
google.visualization.events.addListener(chart, 'ready', afterDraw);
// Link in tooltip
google.visualization.events.addListener(chart, 'select', function(e) {
var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
if (chart.ttclone) {
chart.ttclone.parentNode.removeChild(chart.ttclone)
}
chart.ttclone = tooltip.cloneNode(true);
chart.ttclone.setAttribute('clone', true);
chart.ttclone.style.pointerEvents = 'auto';
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
// for colorMap
dataTable.addColumn({ type: 'string', id: 'Course' });
dataTable.addColumn({ type: 'string', id: 'Subject' });
dataTable.addColumn({ type: 'string', id: 'ToolTip', role: 'tooltip', p:{html:true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
// Timeline Start
['Student 1', 'ENGR', 'Trigonometry', 'Trigonometry', new Date(2016, 9, 30), new Date(2016, 10, 06)],
['Student 2', 'IT', 'DB Management', 'DB Management', new Date(2016, 9, 30), new Date(2016, 10, 13)],
['Student 3', 'CS', 'Introduction to Programming', 'Introduction to Programming', new Date(2016, 9, 30), new Date(2016, 10, 27)],
]);
var colors = [];
var colorMap = {
ENGR: '#2ECC71', // Green
IT: '#E67E22', // Brown
CS: '#9B59B6', // Violet
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontName: 'Century Gothic',
fontSize: 14,
color: '#333333',
bold: 'true',
},
barLabelStyle: {
fontName: 'Century Gothic',
fontSize: 11,
},
showRowLabels: true,
showBarLabels: true,
},
hAxis: {
minValue: new Date(2016, 9, 30),
maxValue: new Date(2017, 9, 28),
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: colors,
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);
// Change HAxis labels to Week
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = 0; // data table row index
var weekLabel = null; // clone of text node - keep font settings, y-coord, etc...
// remove haxis labels
var labels = container.getElementsByTagName('text');
while (labels.length > dataTable.getNumberOfRows()) {
// ignore "category" labels
if (dataTable.getFilteredRows([{column: 5, value: labels[labels.length - 1].innerHTML}]).length === 0) {
if (weekLabel === null) {
weekLabel = labels[labels.length - 1].cloneNode(true);
}
labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
}
}
// use timeline bars to find x coordinate for week labels
rowIndex = 0;
var svgParent = container.getElementsByTagName('svg')[0];
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
var bounds; // bounding box of text element
// ignore rect if not a timeline bar
if (parseFloat(bar.getAttribute('x')) > 0) {
weekLabel = weekLabel.cloneNode(true);
weekLabel.innerHTML = 'WW 70' + (rowIndex + 1);
svgParent.appendChild(weekLabel);
bounds = weekLabel.getBBox();
weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
rowIndex++;
}
});
});
chart.draw(
view,
options,
dataTable, {
tooltip: {
isHtml: true,
},
timeline: {
showBarLabels: false,
}
});
}
// hAxis put on top
function afterDraw() {
var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
document.getElementsByTagName("svg")[0].style.overflow = 'visible';
var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
g.setAttribute('transform','translate(0,-'+height+')');
g = null;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
https://developers.google.com/chart/interactive/docs/gallery/linechart
Hello, guys, I would like to know that is there a way to change the color of the line when it is moving down. I have googled but I was not able to find anything.
like e.g the line graph is moving upwards it's ok as soon as the graph line tilts downward than that downward should only be red. If after that it moves upward then the upward line should not be red.
Here is a screenshot of what I'm trying to obtain:
http://imgur.com/a/GuWDx
If anybody knows this please help me
Here is my code of what am I doing right now:
function draw_chart(chart_data, id, action)
{
var url = base_url + "controller/function/" + id ;
statData = getAjax(url, '', false, 'json');
minimum = '';
maximum = '';
upside = '';
if (statData.min) {
minimum = statData.min;
}
if (statData.max) {
maximum = statData.max;
}
if (statData.upside == '1') {
upside = -1;
}
value = $("#value_" + id).val();
var name = $('#name_' + id).val();
var names = [];
if (value == 2) {
var names = name.split('/');
} else {
names[0] = name;
}
title = $("#name_" + id).val();
google.load('visualization', '1.1', {packages: ['line', 'corechart']});
format = $("#format-select_" + id + " option:selected").val();
if (statData.row[0].type == 'currency') {
format = '$#';
}
var options = {
title: title,
width: 820,
height: 500,
titlePosition: 'none',
legend: 'none',
lineWidth: 3,
annotation: {
0: { style: "line"},
1: { style: "line"}
},
series: {0: { style: "area"} , 1: {type: "area"}},
animation: {duration: 1000, easing: 'in'},
strictFirstColumnType: true,
fontColor: "#333333",
fontSize: "12px",
colors: ["#5AA023", "#3F5F9F" , ""],
pointSize: 6,
fontSize: 11,
enableEvents: true,
forceIFrame: false,
tooltip: {showColorCode: false, },
vAxis: {
gridlines:{color: "#E6E6E6"},
textStyle:{color: "#666666"},
baselineColor: "#CACACA",
format: format,
viewWindow:{
min: minimum,
max: maximum
},
direction: upside,
},
hAxis: {gridlines:{color: "#E6E6E6" , count:chart_data.length},
baselineColor: "#CACACA",
textStyle:{color: "#666666"},
format: "MMM dd yyyy",
textPosition: "out",
slantedText: true,
},
chartArea: {height: 420, width: 750, top: 14, left: 45, right: 0}
};
if (action && action == "update") {
//alert(action);
}
else {
var chart_div = document.getElementById('chart'+id);
var chart_div1 = document.getElementById('chart1'+id);
var chart = new google.visualization.LineChart(chart_div);
google.visualization.events.addListener(chart, 'select', clickHandler);
data = new google.visualization.DataTable();
data.addColumn('string', 'Season Start Date');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', names[0].trim());
if (value == 2) {
data.addColumn('number', names[1].trim());
for (i = 0; i < chart_data.length; i++)
data.insertRows(0, [[new Date(chart_data[i].date), parseInt(chart_data[i].val), parseInt(chart_data[i].val1)]]);
}
else {
for (i = 0; i < chart_data.length; i++) {
if (!chart_data[i].quarter) {
date = chart_data[i].date.split('-');
month = getMonthName(date[1]);
day = date[2];
year = date[0];
data.insertRows(0, [[month+' '+day+' '+year , '.' , parseInt(chart_data[i].val) ]]);
} else {
data.insertRows(0, [[chart_data[i].quarter , '.' , parseInt(chart_data[i].val) ]]);
}
}
}
}
}
if (statData.row[0].type == 'currency') {
var formatter = new google.visualization.NumberFormat({prefix: '$'});
formatter.format(data, 1);
}
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference existing columns by index
0, 1,
// add function for line color
{
calc: function(data, row) {
console.log("ok world!");
var colorDown = '#0000FF';
var colorUp = 'green';
if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
return colorDown;
} else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
return colorDown;
}
return colorUp;
},
type: 'string',
role: 'style'
}
]);
chart.draw(dataView, options);
use a DataView and setColumns to provide a function that determines line direction
and returns the appropriate line color
see following working snippet...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 2000],
[3, 1700],
[6, 1400],
[9, 2500],
[12, 3000],
[15, 4700],
[18, 2200],
[21, 1500],
[24, 1200],
[27, 1800],
[30, 2600],
[33, 2800],
[36, 3000],
[39, 2300],
[42, 2000],
[45, 4000]
]);
var options = {
curveType: 'function',
height: 200,
legend: {
position: 'top'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference existing columns by index
0, 1,
// add function for line color
{
calc: function(data, row) {
var colorDown = '#0000FF';
var colorUp = '#FF0000';
if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
return colorDown;
} else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
return colorDown;
}
return colorUp;
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to change my Google Chart Tooltip, but it doesn't work. According to the Google, I should have to put:
data.addColumn({ type: 'string', role: 'tooltip' });
and
tooltip: { isHtml: true },
But doesn't work. I am just trying to put a phrase, instead, he puts a default value.
It is my code:
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Value');
**data.addColumn({ type: 'string', role: 'tooltip' });**
data.addColumn('number', 'Id');
for (i = 0; i < Object.keys(dataDB).length; i++) {
var year = dataDB[i].Year.toString();
var value = (dataDB[i].Value);
var message = "test";
var id = (dataDB[i].Id);
data.addRow([year, value, message, id]);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}]);
var options = {
width: 1000,
height: 400,
focusTarget: 'category',
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
chartArea: { left: 50, top: 30, width: "70%", height: "200%" },
bar: { groupWidth: "65%" },
tooltip: { isHtml: true },
};
var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ ' });
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById("divResult"));
chart.draw(view, options);
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
var _year = data.getValue(row, 0);
var _id = data.getValue(row, 3);
CallMensal(_id, _year);
}
});
}
also need to add column property
// col prop
data.addColumn({ type: 'string', role: 'tooltip', p: {html: true}});
EDIT
the column also needs to be included in the view which is used to draw the chart
include the column index when using view.setColumns
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
How can I build something like this (with subcategories on the one of the axis)
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 = google.visualization.arrayToDataTable([
['State', 'Store', 'Sales'],
['California', 'Donald\'s Market', 1560],
['California', 'Alexei\'s Specialties', 1090],
['California', '24-Seven', 345],
['Texas', 'Albert Market', 245],
['Texas', 'Jim\'s Market', 245],
['Texas', 'International Food Store', 82]
]);
var options = {
bars: 'horizontal',
chartArea: {
left: 204
},
height: 400,
vAxis: {
textStyle: {
fontSize: 10
}
}
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
var view = new google.visualization.DataView(data);
view.setColumns([1, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}]);
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = -1;
var stateValue = '';
var svgParent = chartDiv.getElementsByTagName('svg')[0];
Array.prototype.forEach.call(chartDiv.getElementsByTagName('text'), function(text) {
var groupLabel;
if ((text.getAttribute('text-anchor') === 'end') &&
(parseFloat(text.getAttribute('x')) < 200)) {
rowIndex++;
if (stateValue !== data.getValue(rowIndex, 0)) {
stateValue = data.getValue(rowIndex, 0);
groupLabel = text.cloneNode(true);
groupLabel.setAttribute('x', '60');
groupLabel.innerHTML = stateValue;
svgParent.appendChild(groupLabel);
addGroupLine(groupLabel, -24);
}
if (rowIndex === (data.getNumberOfRows() - 1)) {
addGroupLine(text, 16);
}
}
});
function addGroupLine(text, yOffset) {
var groupLine = chartDiv.getElementsByTagName('rect')[0].cloneNode(true);
groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
groupLine.setAttribute('x', '16');
groupLine.setAttribute('height', '0.8');
groupLine.setAttribute('width', '188');
groupLine.setAttribute('stroke', 'none');
groupLine.setAttribute('stroke-width', '0');
groupLine.setAttribute('fill', '#000000');
svgParent.appendChild(groupLine);
}
});
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>