I am using Google Charts to visualize some data. When drawing full width chart in bordered container I can see small gaps on the left and right side. Is it possible to remove it? The chart area width is set to 100%.
JS:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
hAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
legend: { position: 'none' },
chartArea: {
'width': '100%',
'height': '100%',
'backgroundColor': '#fff'
},
colors: ['#ddd'],
height: 50,
lineWidth: 0,
areaOpacity: 1,
annotations: {
stemColor : 'none'
},
tooltip : {
trigger: 'none'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(data, options);
}
HTML:
<div class="row">
<div class="col-md-3">
<div id="chart"></div>
</div>
</div>
FIDDLE: https://jsfiddle.net/5m6fLckw/5/
Related
I have prepared google 'bar' chart as below its working properly.how can i change direction of bar form vertical to horizontal ?
I tried to change direction of chart Using vAxis: {direction:-1} but not working.
I tried to get solution from google chart sites but i cant found any other solution for horizontal bar chart with Stacked & Group. Is there any other way to change direction of Google 'bar' Chart ?
<html>
<title>Web Page Design</title>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position:'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0:{
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color:'#2A6DDA'
},
1: {
targetAxisIndex: 1,
color:'#FF5733'
},
2: {
targetAxisIndex: 1,
color:'#FFC300'
},
3: {
targetAxisIndex: 1,
color:'#D3A4FA'
},
},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>
Here is how Google charts does it on their examples page
What you need is to use 'corecharts' instead of 'bars', then change the call to google.visualization.BarChart() and you'll get the horizontal bars.
<html>
<title>Web Page Design</title>
<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', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,
pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position: 'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0: {
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color: '#2A6DDA'
},
1: {
targetAxisIndex: 1,
color: '#FF5733'
},
2: {
targetAxisIndex: 1,
color: '#FFC300'
},
3: {
targetAxisIndex: 1,
color: '#D3A4FA'
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("columnchart_material"));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>
In a Google Pie chart, I want to change the colour of the indicator in the legend to go to the next results. This is now blue, and I can't seem to change that, although I can change the colour of the pie slices (done) or even of the text (not necessary). Here is a screenshot: Google pie chart.
Here is the code:
var options1 = {
legend: 'none',
pieSliceText: 'label',
width: '85%',
height: '85%',
chartArea: {'width': '80%', 'height': '80%'},
legend: {'position': 'bottom'},
backgroundColor: {fill:'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
you can use the following options...
text: legend.pagingTextStyle
arrows: legend.scrollArrows
e.g.
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['', 'Views'],
['dat', 40],
['nom', 10],
['gen', 10],
['hid1', 2],
['hid2', 3]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
width: 200,
height: 200,
chartArea: {'width': '80%', 'height': '80%'},
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
backgroundColor: {fill: 'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to access fill property of a series in a stacked area (Google charts). I want the bottom series of the stacked chart to become transparent as shown in the JSFiddle code.
Can one please assist in this please? Your help is very much appreciated.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<!-- Div that will hold the pie chart-->
<div id="chart_div"></div>
</div>
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', backgroundColor: { fill: 'black' } },
1: { type: 'area', backgroundColor: { fill: 'transparent' }}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
just replace...
backgroundColor: { fill: 'transparent' }
with...
color: 'transparent'
the series will be numbered, starting with zero on the bottom
see following working snippet...
note: if you want to make the area solid black, not just the border,
add this to your options...
areaOpacity: 1
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Line 1', 'Line 2'],
['2013', 1000, 400, 200, 400],
['2014', 1170, 460, 200, 400],
['2015', 660, 1120, 200, 400],
['2016', 1030, 540, 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using google api line chart with annotation. How can I change the font size and font format?
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addRows([['2010', '67', 67]]);
data.addRows([['2011', '69', 69]]);
data.addRows([['2012', '68', 68]]);
data.addRows([['2013', '67', 67]]);
var options = {
width: 350,
height: 250,
pointSize: 5,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 60,
width: 300,
height: 75},
vAxis: {
baselineColor: '#fff',
gridlines: {color: '#fff'},
minValue: 64,
maxValue: 71
},
tooltip: {trigger: 'none'},
enableInteractivity: false,
annotation: {
1: {
style: 'default'
}
},
series: {0: {color: '#4D7AD3'}, 1: {color: '#4D7AD3'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<h2>Line Charts</h2>
<div id="chart_div"></div>
</body>
Try this
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
}
};
https://developers.google.com/chart/interactive/docs/gallery/linechart
As you can see in the following image I have many pie charts in my webpage and they do not fill completely the container (generally only an half is filled or LESS):
Here some code:
var data1 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Recapitate', sent],
['Ritornate/Bloccate', errors]
]);
options1 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#06dd00','#e12a00'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart1 = new google.visualization.PieChart(document.getElementById('grafico-inviate'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart2 = new google.visualization.PieChart(document.getElementById('grafico-aperte'));
chart2.draw(data2, options2);
The problem arises independently from the OS/Web-Browser.
I do not know if this is a bug of the visualization API or am I missing something?
SOLVED!!:
Do not ask me why but if i put the data in the following way (using the javascript Number() function) it works:
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', Number(unique_opened)],
['Non aperte', Number(combined1)]
]);
I do not know if this is your case but you can produce such semicircle in the following way. Your code little changed (only second part):
var unique_opened = 5.555; // real value: 11.11;
var combined1 = 44.445; // real value: 88.89;
var noshow = 50;
....
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1],
['noshow', noshow]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932', '#ffffff'],
...
And you get:
Idea of Javier González