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>
Related
I am changing labels, to protect data by replacing it with dummy data with same length.
enter image description here
Code Link: https://jsfiddle.net/p_raveen/L84wnc6d/
I am ready to make size of pie chart smaller, but legends should be clearly visible.
ChartArea property not working
<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([
['Type', 'Value'],
['Manual Success:362', 362],
['Manual Ongoing:2', 2],
['Manual Failed:980', 980],
['Bulk Success:0', 0],
['Bulk Ongoing:0', 0],
['Bulk Failed:0', 0],
['Api Success:0', 0],
['Api Ongoing:0', 0],
['Api Failed:0', 0],
]);
var options = {
title: 'ABC Abcd Abcdef(1234)',
titleTextStyle: {
color: '#475F7B',
fontSize: '16',
bold: true
},
sliceVisibilityThreshold: 0,
slices: {
0: {
color: 'rgb(16, 148, 25)'
},
1: {
color: 'rgb(51,102,204)'
},
2: {
color: 'rgb(255, 0, 0)'
},
3: {
color: 'rgb(53,94,59)'
},
4: {
color: 'rgb(0,0,128)'
},
5: {
color: 'rgb(114,47,55)'
},
6: {
color: 'rgb(127,255,0)'
},
7: {
color: 'rgb(137,207,240)'
},
8: {
color: 'rgb(248,131,121)'
}
},
legend: {
position : 'top',
maxlines: 15,
textStyle: {
fontSize: 10,
bold: true
}
},
chartArea:{
left : '20%',
top : '20%',
width : '60%',
height : '60%',
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_1'));
chart.draw(data, options);
}
</script>
<div id="pie_chart_1" style="height: 400px;"></div>
I have try using chartArea Property, but It is not working
the L in maxLines should be capitalized
see following working snippet...
<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([
['Type', 'Value'],
['Manual Success:362', 362],
['Manual Ongoing:2', 2],
['Manual Failed:980', 980],
['Bulk Success:0', 0],
['Bulk Ongoing:0', 0],
['Bulk Failed:0', 0],
['Api Success:0', 0],
['Api Ongoing:0', 0],
['Api Failed:0', 0],
]);
var options = {
title: 'ABC Abcd Abcdef(1234)',
titleTextStyle: {
color: '#475F7B',
fontSize: '16',
bold: true
},
sliceVisibilityThreshold: 0,
slices: {
0: {
color: 'rgb(16, 148, 25)'
},
1: {
color: 'rgb(51,102,204)'
},
2: {
color: 'rgb(255, 0, 0)'
},
3: {
color: 'rgb(53,94,59)'
},
4: {
color: 'rgb(0,0,128)'
},
5: {
color: 'rgb(114,47,55)'
},
6: {
color: 'rgb(127,255,0)'
},
7: {
color: 'rgb(137,207,240)'
},
8: {
color: 'rgb(248,131,121)'
}
},
legend: {
position : 'top',
maxLines: 15,
textStyle: {
fontSize: 10,
bold: true
}
},
chartArea:{
left : '20%',
top : '20%',
width : '60%',
height : '60%',
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_1'));
chart.draw(data, options);
}
</script>
<div id="pie_chart_1" style="height: 400px;"></div>
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/
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></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