Google chart is not taking full width while in bootstrap accordion
2,005 views
Skip to first unread message
Hartmut Gunther
Apr 19, 2017, 7:30:22 AM4/19/17
to Google Visualization API
Enter code here...Google chart is not taking full width while in bootstrap accordion
I know that @asgallant has answered a version of this previously. However I can not adapt that answer to work here.
I need help with
1/ Get the second accordion to display the full width of the chart - have not found working solution
and
2/ How to colour bar with different colour based on value. I know this has been posted before but not using a google sheet as the data source.
thanks in advance
Hartmut
Web page is here
Code here
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapse</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in ">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br> <br>
<!--START CHART -->
<!--First Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--Only load the above ONCE per page-->
<script type="text/javascript">
// Load the Visualization API and the corechart package.
//include extra packages that or not included in the corechart package
// corechart package includes (bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter)
google.charts.load('current', {packages: ['corechart', 'annotationchart', 'table']});
// Set a callback to run when the Google Visualization API is loaded
google.charts.setOnLoadCallback(drawChart);
/*
The syntax of the query language is composed of the following clauses.
The order of the clauses must be as follows:
select Selects which columns to return, and in what order. If omitted, all of the table's columns are returned, in their default order.
where Returns only rows that match a condition. If omitted, all rows are returned.
group by Aggregates values across rows.
pivot Transforms distinct values in columns into new columns.
order by Sorts rows by values in columns.
limit Limits the number of returned rows.
offset Skips a given number of first rows.
label Sets column labels.
format Formats the values in certain columns using given formatting patterns.
*/
/*send the query - using the "sheet" parametre not the GID parameter
The query supports the following optional parameters:
headers=N: Specifies how many rows are header rows, where N is an integer zero or greater.
These will be excluded from the data and assigned as column labels in the data table.
If you don't specify this parameter, the spreadsheet will guess how many rows are header rows.
Note that if all your columns are string data, the spreadsheet might have difficulty determining which rows are header rows without this parameter
gid=N: Specifies which sheet in a multi-sheet document to link to, if you are not linking to the first sheet. N is the sheet's ID number.
You can learn the ID number by navigating to the published version of that sheet and looking for the gid=N parameter in the URL.
You can also use the sheet parameter instead of this parameter. Gotcha: Google Spreadsheets might rearrange the gid parameter in the URL when viewed in a browser;
if copying from a browser, be sure that all parameters are before the URL's # mark. Example: gid=1545912003.
sheet=sheet_name: Specifies which sheet in a multi-sheet document you are linking to, if you are not linking to the first sheet.
sheet_name is the display name of the sheet. Example: sheet=Sheet5.
*/
//send the query - using the "sheet" parametre - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/13ZXjNfFOf0glEzEkAg5VWXNTP3oZPaDR9WKwa0kTrds/gviz/tq?sheet=Sheet2&headers=1&tq=SELECT A, B where B > 0 and B <= 5 ORDER BY B desc limit 1000 offset 0');
query.send(handleSampleDataQueryResponse);
}
//draw the chart - - using the "sheet" parametre - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
function handleSampleDataQueryResponse(response){
// ADD some error handling - START
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// ADD some error handling - END
//get data table
var data = response.getDataTable();
//adjust chart and bar height according to how many rows
var chartAreaHeight = data.getNumberOfRows() * 30;
var chartHeight = chartAreaHeight + 400;
// Set chart options - START
var options = {
//set transparency of the chart background, whether the chart is stacked and importantly,
//the physical height, in pixels of the chart.
backgroundColor: 'transparent',
isStacked: false,
height: chartHeight,
// control colours of lines NOTE this overides automatic colouring
colors: ['orange', 'magenta',"blue"],
//control opacity of bars
dataOpacity:.85,
chartArea: {
height: chartAreaHeight,
top: "100",
right: "100",
bottom: "100",
left: "100"
},
/*An object with members to configure the placement and size of the chart area (where the chart itself is drawn,
excluding axis and legends). Two formats are supported: a number, or a number followed by %.
A simple number is a value in pixels; a number followed by % is a percentage.*/
animation:{startup:'true',duration:'3000',easing:'inAndOut'},
//makes the chart transparent so the background color shows through
// chart title
title:'MSQ Results',
titleTextStyle: {color: 'white',fontSize:30,fontName: 'arial',bold: false,italic: false},
// control position of legend
legend: { position: 'top',textStyle: {color: 'orange', fontSize: 24}},
// horizontal axis title and formating
vAxis: {
textPosition:'in',
title: 'SYMPTOMS',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'black',fontSize: 13,fontName: 'Arial',bold: false,italic: false},
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
// horizontal axis title and formating
hAxis: {
baseline:0,
baselineColor:'white',
title: 'SCORE',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'white',fontSize: 18,fontName: 'Arial',bold: false,italic: false},
minValue:0, maxValue:4,
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
};
// Set chart options - END
//draw the chart
var chart = new google.visualization.BarChart(document.getElementById('mychart'));
chart.draw(data,options );
window.addEventListener('resize', function () {
chart.draw(data, options);
}, false);
}
</script>
<div style="font-family:opensans;border: 0 none; background-color:#009688;">
<!-- div to show the chart on the web page -->
<div id="mychart" ></div>
</div>
<!--END CHART -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br> <br> Chart 2
<!--START CHART -->
<!--First Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--Only load the above ONCE per page-->
<script type="text/javascript">
// Load the Visualization API and the corechart package.
//include extra packages that or not included in the corechart package
// corechart package includes (bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter)
google.charts.load('current', {packages: ['corechart', 'annotationchart', 'table']});
// Set a callback to run when the Google Visualization API is loaded
google.charts.setOnLoadCallback(drawChart);
/*
The syntax of the query language is composed of the following clauses.
The order of the clauses must be as follows:
select Selects which columns to return, and in what order. If omitted, all of the table's columns are returned, in their default order.
where Returns only rows that match a condition. If omitted, all rows are returned.
group by Aggregates values across rows.
pivot Transforms distinct values in columns into new columns.
order by Sorts rows by values in columns.
limit Limits the number of returned rows.
offset Skips a given number of first rows.
label Sets column labels.
format Formats the values in certain columns using given formatting patterns.
*/
/*send the query - using the "sheet" parametre not the GID parameter
The query supports the following optional parameters:
headers=N: Specifies how many rows are header rows, where N is an integer zero or greater.
These will be excluded from the data and assigned as column labels in the data table.
If you don't specify this parameter, the spreadsheet will guess how many rows are header rows.
Note that if all your columns are string data, the spreadsheet might have difficulty determining which rows are header rows without this parameter
gid=N: Specifies which sheet in a multi-sheet document to link to, if you are not linking to the first sheet. N is the sheet's ID number.
You can learn the ID number by navigating to the published version of that sheet and looking for the gid=N parameter in the URL.
You can also use the sheet parameter instead of this parameter. Gotcha: Google Spreadsheets might rearrange the gid parameter in the URL when viewed in a browser;
if copying from a browser, be sure that all parameters are before the URL's # mark. Example: gid=1545912003.
sheet=sheet_name: Specifies which sheet in a multi-sheet document you are linking to, if you are not linking to the first sheet.
sheet_name is the display name of the sheet. Example: sheet=Sheet5.
*/
//send the query - using the "sheet" parametre - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/13ZXjNfFOf0glEzEkAg5VWXNTP3oZPaDR9WKwa0kTrds/gviz/tq?sheet=Sheet2&headers=1&tq=SELECT A, B where B > 0 and B <= 5 ORDER BY B desc limit 1000 offset 0');
query.send(handleSampleDataQuery2Response); //have to change this to handleSampleDataQuery2Response when have more than one chart on the page
}
//draw the chart - - using the "sheet" parameter - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
//have to change this to handleSampleDataQuery2Response(response) when have more than one chart on the page
function handleSampleDataQuery2Response(response){
// ADD some error handling - START
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// ADD some error handling - END
//get data table
var data = response.getDataTable();
//adjust chart and bar height according to how many rows
var chartAreaHeight = data.getNumberOfRows() * 30;
var chartHeight = chartAreaHeight + 400;
// Set chart options - START
var options = {
//set transparency of the chart background, whether the chart is stacked and importantly,
//the physical height, in pixels of the chart.
backgroundColor: 'transparent',
isStacked: false,
height: chartHeight,
// control colours of lines NOTE this overides automatic colouring
colors: ['orange', 'magenta',"blue"],
//control opacity of bars
dataOpacity:.85,
chartArea: {
height: chartAreaHeight,
top: "100",
right: "100",
bottom: "100",
left: "100"
},
/*An object with members to configure the placement and size of the chart area (where the chart itself is drawn,
excluding axis and legends). Two formats are supported: a number, or a number followed by %.
A simple number is a value in pixels; a number followed by % is a percentage.*/
animation:{startup:'true',duration:'3000',easing:'inAndOut'},
//makes the chart transparent so the background color shows through
// chart title
title:'MSQ Results',
titleTextStyle: {color: 'white',fontSize:30,fontName: 'arial',bold: false,italic: false},
// control position of legend
legend: { position: 'top',textStyle: {color: 'orange', fontSize: 24}},
// horizontal axis title and formating
vAxis: {
textPosition:'in',
title: 'SYMPTOMS',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'black',fontSize: 13,fontName: 'Arial',bold: false,italic: false},
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
// horizontal axis title and formating
hAxis: {
baseline:0,
baselineColor:'white',
title: 'SCORE',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'white',fontSize: 18,fontName: 'Arial',bold: false,italic: false},
minValue:0, maxValue:4,
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
};
// Set chart options - END
//draw the chart
var chart = new google.visualization.BarChart(document.getElementById('mychart2')); //have to change this to mychart2 when have more than one chart on the page
chart.draw(data,options );
window.addEventListener('resize', function () {
chart.draw(data, options);
}, false);
}
</script>
<div style="font-family:opensans;border: 0 none; background-color:#009688;">
<!-- div to show the chart on the web page -->
<div id="mychart2" ></div> <!--have to change this to mychart2 when have more than one chart on the page-->
</div>
<!--END CHART -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
Daniel LaLiberte
Apr 19, 2017, 9:58:25 AM4/19/17
to Google Visualization API
I suspect the main problem you are experiencing is caused by drawing the chart at a time when the container element is not visible. If you do that, it may appear the container has no size, so the chart is drawn as small as possible. You can test this by swapping your first and second charts. The workaround is to arrange that you only draw the chart when the container is visible.
Regarding coloring each bar differently, see the "Bar styles" section in the documentation: https://developers.google.com/chart/interactive/docs/gallery/barchart#bar-styles
Also look into generating a DataView instead just the DataTable you are getting from the spreadsheet. https://developers.google.com/chart/interactive/docs/reference#dataview-class
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f3077ba5-f6a2-4f73-9948-aa14e5c16b55%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Hartmut Gunther
Apr 19, 2017, 6:20:21 PM4/19/17
to google-visua...@googlegroups.com
Thanks Daniel for the response.
re the first point - yes I also came to that conclusion, however I have not been able to find or implement a solution that works. In theory it sounds strait forward and even simple but my JS is limited to pull it off.
re the colouring each bar - all documentation I have found relate to static tables as apposed data for dynamic sources like spreadsheets. This is were I am having difficulty. As you say a solution may be found in the data view option but also I haven’t been able to crack that code either.
Hartmut
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/daabnwL4U1w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJNqh9jk0-2LY96EnT1TLLHAU0MnzCF3xu5LjBYaFam6nA%40mail.gmail.com.
Ibrahim Pala
Apr 10, 2018, 7:45:59 AM4/10/18
to Google Visualization API
Use This For Resolve Your Problem:
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;
height: 0;
overflow-y: hidden;
}
.tab-content > .active,
.pill-content > .active {
height: auto;
}
Reply all
Reply to author
Forward
0 new messages