Google Chart Visualisation Bar Drawing Not Shown

Google Chart Visualisation Bar Drawing Not Shown - javascript

I am working with Google Chart Visualisation and I'm using a Combo Chart with some data I am using. I've noticed that for certain values, the bar is not shown.
I'm using an example found at this page using JSFiddle to better explain the problem: https://developers.google.com/chart/interactive/docs/gallery/combochart
HTML code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JavaScript code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 881, 938 ],
['2004/06', 880, 938 ]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
This is what the output is for this model:
But if I change the first row from ['2004/05', 881, 938] to ['2004/05', 880, 938 ] so that the Bolivia values are the same, 880, the output is the following:
and the bars are not shown anymore, because the graph begins at 880 and not 870 as in the first example.
This also reproduces for close values, e.g.
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 92, 95 ],
['2004/06', 92, 95 ]
My question is: Is it possible to force the graph to always start e.g. from 870 so that the bar is always drawn?

you can use option viewWindow on the vAxis.
viewWindow has properties for min & max.
viewWindow: {
min: 870
}
see following working snippet..
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 880, 938 ],
['2004/06', 880, 938 ]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups',
viewWindow: {
min: 870
}
},
height: 500,
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
another option is ticks.
you can provide the value for each label to be displayed.
ticks: [870, 880, 890, 900, 910, 920, 930, 940]
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 880, 938 ],
['2004/06', 880, 938 ]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups',
ticks: [870, 880, 890, 900, 910, 920, 930, 940]
},
height: 500,
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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>

Using wkhtmltopdf to output Google Charts to PDF

We have a Silverstripe project that uses the silverstripe-wkhtmltopdf module to output HTML/CSS/Javascript as PDF.
Simple Javascript like document.write works but I want to output Google Charts using their visualisation API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar']});
</script>
The PDF wasn't showing any of the visualisation output so I used QTBrowser to debug the Javascript - as suggested here: Debugging javascript in wkhtmltopdf
The error I'm getting in QTBrowser is: Error: one or more fonts could not be loaded. from https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d05f5fbf/webfontloader,dygraph,format+en,default+en,ui+en,bar+en,corechart+en.I.js:737
The HTML looks correct at my end but I don't know the compatibility of QTBrowser, or how it relates to wkhtmltopdf.
Has anyone had any experience/ success with using wkhtmltopdf to output Google Charts?

Here's a good post which explains this topic and shows you how to achieve it
http://codingexplained.com/coding/php/using-google-visualization-with-wkhtmltopdf
<script type="text/javascript">
function init() {
google.load("visualization", "1.1", { packages:["corechart"], callback: 'drawCharts' });
}
function drawCharts() {
drawAccountImpressions('chart-account-impressions');
}
function drawAccountImpressions(containerId) {
var data = google.visualization.arrayToDataTable([
['Day', 'This month', 'Last month'],
['01', 1000, 400],
['05', 800, 700],
['09', 1000, 700],
['13', 1000, 400],
['17', 660, 550],
['21', 660, 500],
['23', 750, 700],
['27', 800, 900]
]);
var options = {
width: 700,
height: 400,
hAxis: { title: 'Day', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
curveType: 'function',
chartArea: {
top: 30,
left: 50,
height: '70%',
width: '100%'
},
legend: 'bottom'
};
var chart = new google.visualization.LineChart(document.getElementById(containerId));
chart.draw(data, options);
}
</script>
</head>
<body onload="init()">
<div id="chart-account-impressions"></div>
</body>

How to resize charts to fit the parent container with Google API

So I created a combo chart using the visualization API from Google, but im having problems resizing said chart to fit its parent container
That's how it looks on the website, The parent container's width is the one hovered. And i want the chart to fill the entire parent's width.
I have a panel system, in which each tab will have a different chart. the first one works like a charm, I dont have a problem with that one it fills the parent's container width correctly, but the second one is the one im having problems with.
Here's the HTML
<div class="tab-pane fade in active" id="anuales">
<div id ="anual-bar-chart" height ="500px" ></div>
</div>
<div class="tab-pane fade in" id="semestre-1">
<div id ="semester-1-chart" height="500px"></div>
</div>
And here's the js file to draw the charts
google.load("visualization", "1", {packages:["corechart", 'bar']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
The one that's named char2 at the bottom is the chart that im having problems with. I put the other one for u to see that I'm using the same configuration, but somehow it's displaying the charts different.
Can someone tell me what can I do, cause I've been looking around and there's nothing. I tried resizing the "chartArea" configuration that the api mentioned, but that only takes out the labels, but doesn't fit the parents container.

Google Charts don't resize automatically. They have to be redrawn when things resize (and showing/hiding is a resize).
I believe the code below, which I ripped off this question should solve your problem (you will need jquery too):
//create trigger to resizeEnd event
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//redraw graph when window resize is completed
$(window).on('resizeEnd', function() {
drawChart(data);
});

I wonder if my suggestion will solve your problem... Shouldn't you make two separate calls to draw the graphics? Perhaps your first bar chart is influencing your second because you have them bundled into one function call. For one of my projects I needed to deliver a piechart and a geochart and so I created a separate function to call them individually.
Please try this:
function drawCharts(){
anualBarChart();
semester1Chart();
}
function anualBarChart(){
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
}
function semester1Chart(){
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
google.load("visualization", "1", {packages:["corechart","bar"]});
google.setOnLoadCallback(drawCharts);
The more I think about it, this shouldn't make a difference. Let me know if it is a bust and I'll remove it rather than copping down votes.

Google Chart -- add "recession bars"

I have a Google Chart that works great. To add context to this chart, I need to add a series in the background that distinguishes weekends visually. The desired effect shown as applied to recession periods rather than weekends is at the bottom. Is it possible to create this effect using Google Visualization?
Here is the chart:
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<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([
... DATA ...
]);
var formatter = new google.visualization.NumberFormat(
{prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column
formatter.format(data, 2); // Apply formatter to second column
formatter.format(data, 3); // Apply formatter to second column
var options = {isStacked: true, vAxis: {format: '$#,###'}, title:"MTS Revenue" };
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

Yes, you can accomplish this effect with a ComboChart.
The general concept is to make your stacked bar chart, and then add a series that shows the max value of your chart as a separate column on weekends, and plot that series as a steppedArea chart. This will make it look like a background for certain series.
Here is an example (copy paste in to Google Playground):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 0],
['2005/06', 135, 1120, 599, 1268, 288, 4000],
['2006/07', 157, 1167, 587, 807, 397, 0],
['2007/08', 139, 1110, 615, 968, 215, 4000],
['2008/09', 136, 691, 629, 1026, 366, 0]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups", minValue: 0, maxValue: 4000},
hAxis: {title: "Month"},
seriesType: "bars",
isStacked: true,
series: {5: {type: "steppedArea", lineWidth: 0, showInLegend: false}}
});
}

We Keep Coding

JavaScript is the programming language of the Web.

Google Chart Visualisation Bar Drawing Not Shown - javascript

Related

How to modify bar width of google chart column?

Create 3 quarter donut chart using Google Chart library

Using wkhtmltopdf to output Google Charts to PDF

How to resize charts to fit the parent container with Google API

Google Chart -- add "recession bars"

Categories

Resources