Wrapping text of x-Axis Labels for Google Visualization Charts - javascript

I cannot seem to wrap my label for my column chart. I tried fiddling around with the options but it doesn't make any difference.
This is my current chart view, as you can see the label for column 2 has completely disappeared as the column 1 label has overlapped:
this is my Column Chart View:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
#Html.Raw(rows)]);
var options = {
title: '',
'width': 800,
'height': 500
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
</script>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>

You can reduce the font size down to 11 to get the label to show...
var options = {
'title': '',
'width': 800,
'height': 500,
'hAxis': {'textStyle': {'fontSize': 11}}
};
To do so, you will need to convert your options...
chart.draw(data1, google.charts.Bar.convertOptions(options));

you may draw a classical ColumnChart (when it is an option):
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
['Commerce, Law and Managment', 4, 9, 9, 1],
['foobar',2,2,2,3],
['Health Sciences', 0,2,3,1],
['Humanities', 0, 1, 1, 0],
['Science', 0, 0, 0, 1]
]);
var options = {
title: '',
'width': 800,
'height': 500,
vAxis: {
gridlines: {
count: 10
}
}
};
var chart = new google.visualization
.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Related

How to modify bar width of google chart column?

How I can modify the size of bar width of google chart column? I tried to add 'bar: { groupWidth: "20%" }' but it does nothing to the chart.
I really wanted it to make it thinner.
Here is the code that I want to use from google chart:
<html>
<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'],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>
</html>
According to the documentation,
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
One of these options is the bar.groupWidth, which seems to not have support yet.
In this case, since you are working with a group of bars and there's only one array of information in data:
['2017', 1030, 540, 350]
then that option doesn't seem to work. However, if there were two or more groups, it seemed to render but in a limited way. This said, I was able to find some workarounds, each one with its own positive aspects and drawbacks.
Change from Material Charts to Classical Charts
Here you have to reconstruct the chart's code following the Classical one
Pros: options fully supported
Cons: you will change from Material Charts to Classical Charts
google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Financial status',{ role: "style" }],
["Sales", 1030, "#4285f4"],
["Expenses", 540, "#db4437"],
["Profit", 350, "f4b400"],
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Company Performance",
subtitle: "Sales, Expenses, and Profit: 2017",
width: 600, // chart width
bar: { groupWidth: "45%" }, // width of bars here
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Separate that only group of bars into single bars
Put that only group bar in different arrays and adapt your labels
Pros: the width will indeed change from 0 to 100% in groupWidth
Cons: looses colored bars
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Financial status'],
["Sales", 1030],
["Expenses", 540],
["Profit", 350],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017',
},
bar: { groupWidth: '50%' }, // change width here
width: 600, // width of the chart
height: 400 // height of the chart
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">
Use meaningless arrays
Put the array of information in the middle of two other meaningless arrays so
that you center your main data and gives the impression
Pros: still uses the Material Chart design
Cons: stretches the bars, doesn't provide space between bars
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
[' ', 0, 0, 0], // meaningless
['2017', 1030, 540, 350],
[' ', 0, 0, 0] // meaningless
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017',
},
bar: { groupWidth: '90%' }, // change width of bar here,
width: 600, // width of the chart
height: 400, // height of the chart
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">

Create 3 quarter donut chart using Google Chart library

I'm trying to make a donut chart like below using google chart library:
I found this article that makes half donut, but didn't find the code to create the one in my image.
Can anyone help?
Read here https://developers.google.com/chart/interactive/docs/gallery/piechart#removing-slices
It simply says donut charts are just pie charts with pieHole values between 0 and 1. To remove some slices, it says
To omit a slice, change the color to 'transparent':
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pac Man', 'Percentage'],
['', 75],
['', 25]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
pieHole: 0.4,
pieStartAngle: 0,
pieEndAngle: 180,
tooltip: { trigger: 'none' },
slices: {
0: { color: 'yellow' },
1: { color: 'transparent' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
Use pieSliceText and pieStartAngle with an empty data field;
google.charts.load('visualization', '1.1', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable([
['Skils', 'Skills level'],
['React', 6],
['HTML', 4],
['PHP', 2],
[null, 12]
]);
new google.visualization.PieChart(document.getElementById('chart_div')).
draw(data, {
title: "My Skills",
slices: {
3: {
color: 'transparent'
}
},
pieHole: 0.5,
width: 600,
height: 600,
pieSliceText: 'value',
pieStartAngle: 270,
});
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Donut Chart

I ran into the problem of implementing graphics via google chart, it is necessary to make a three sectional diagram, please tell me how to do it better.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['My all', 100],
['My alsl', 100],
['My alsl', 100],
]);
var options = {
pieHole: 0.85,
tooltip: { trigger: 'none' },
pieSliceText: 'none',
pieSliceTextStyle: {
color: 'transparent',
},
legend: 'none',
slices: {
0: { color: '#f9b231' },
1: { color: '#7e430f' },
2: { color: '#f8d597' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>

Remove horizontal white line between Google stacked column charts

How do I remove the horizontal white lines between these stacked columns?
Here is my code:
<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([
['Genre', 'One', 'Two'],
['2010', 10, 24],
['2020', 16, 22]
]);
var options = {
width: 300,
height: 200,
legend: 'none',
bar: { groupWidth: '100%' },
isStacked: true,
series: {
0: { color: '#40a1ec' },
1: { color: '#ff8888'}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I know how to remove the vertical white space between bars (using groupWidth), but I can't find a way to remove the horizontal white lines.
Thanks!
I think the only way is to add CSS style to columns so that stroke is not null:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'One', { role: 'style' }, 'Two', { role: 'style' } ],
['2010', 10, 'stroke-width: 1;stroke-color: blue;', 24,'stroke-width: 1;stroke-color: red;'],
['2020', 16, 'stroke-width: 1;stroke-color: blue;', 22, 'stroke-width: 1;stroke-color: red;']
]);
var options = {
width: 400,
height: 400,
legend: 'none',
bar: {
groupWidth: '100%'
},
isStacked: true,
series: {
0: {color: '#40a1ec'},
1: {color: '#ff8888'}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">
</div>

google visualization barchart formatting vertical axis (vAxis) not working

I tried to format vertical axis of bar chart by adding '$' symbol to the vaxis text , but it is not working.
However formating to horizontal axis is working fine !!!!!
try the code below you can see that vertical axis values are suffixed by dollar ($) symbol
here is the code that i am using to draw an area chart
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
vAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is not working
tooltip: {trigger: 'none'},
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="barchart_values" ></div>
</body>
</html>
Try below code,
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
vAxis: {gridlines:{color: 'transparent'}, textPosition: 'out'},
tooltip: {trigger: 'none'}
};
var formatter = new google.visualization.NumberFormat({ pattern: '$#' });
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
No, That was not working However i found the solution.
Here is my solution, here i am drawing a star icon instead of '$' symbol
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
draw_stars();
}
function draw_stars()
{
var iteration = 0;
var val1,val2;
$('#barchart_values').each(function(index){
$("text").each(function(index){
//alert($(this).value);
if($(this).is("[text-anchor]") && $(this).is("[y]") && $(this).is("[x]") && $(this).attr("text-anchor") == 'end')
{
if(iteration == 0)
{
val1 = $(this).attr('x');
//alert($(this).text());
$(this).text("\u2605 " + $(this).text());
}
else
{
val2 = $(this).attr('x');
}
if(val1 == val2)
{
//alert($(this).text());
$(this).text("\u2605 " + $(this).text());
}
iteration = iteration + 1;
}
});
});
}
</script>
</head>
<body>
<div id="barchart_values" ></div>
</body>
</html>

Categories