Google图表在引导手风琴时未占全宽
我知道@asgallant已经回答过此版本。但是我不能在这里适应这个答案。
我需要帮助 1 /获得第二个手风琴以显示图表的整个宽度 - 尚未找到可行的解决方案 和 2 /如何根据值使用不同颜色的颜色条。我知道这已经发布过，但没有使用谷歌表作为数据源。
提前谢谢 哈特穆特网页在这里 https://www.hartgoods.com/main/my-symptom-tracker/barchart-accordian.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>
答案 0 :(得分：0)
尝试在手风琴标题上点击重绘：
$('.panel-heading').click(function(){
drawChart()
})
<强>更新：
我已经进行了一些重构来完成这项工作：
所以主要区别：
Init从这里开始
google.charts.setOnLoadCallback(init);
初始化功能
function init () {
$.each($('.panel-heading'), function(){
var chartItem = $(this).parents('.panel').find('.chart-item');
var chartId = chartItem.attr('id');
drawChart(chartId);
})
}
我们选择所有标签并调用每个drawChart函数，也可以更轻松地将 .chart-item 类添加到图表div
OnClick函数（几乎与Init函数做同样的事情）
$（＆＃39; .panel镦＆＃39）。单击（函数（）{
var chartItem = $(this).parents('.panel').find('.chart-item');
var chartId = chartItem.attr('id');
drawChart(chartId);
}）
最后一个解决方法：
function drawChart(chartId) {
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(function(response){
handleSampleDataQueryResponse(response, chartId);
});
}
我将它重构为
query.send(function(response){
handleSampleDataQueryResponse(response, chartId);
});
能够通过chartId
更新2
为了能够在标签面板中管理图表，您可以使用 drawChart 功能：
function drawChart(chartId) {
var query;
if(chartId == 'mychart') {
query = new google.visualization.Query(' // query for chart1 //');
}
if(chartId == 'mychart2') {
query = new google.visualization.Query(' // query for chart2 //');
}
query.send(function(response){
handleSampleDataQueryResponse(response, chartId);
});
}
<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>
<div style="font-family:opensans;border: 0 none; background-color:#009688;">
<!-- div to show the chart on the web page -->
<div class="chart-item" id="mychart"></div>
</div>
</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
<div style="font-family:opensans;border: 0 none; background-color:#009688;">
<!-- div to show the chart on the web page -->
<div class="chart-item" 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>
<!--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);
google.charts.setOnLoadCallback(init);
/*
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(chartId) {
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');
//mychart
//mychart2
query.send(function(response){
handleSampleDataQueryResponse(response, chartId);
}); //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 handleSampleDataQueryResponse(response, chartId) {
// 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
console.log('chartId111', chartId);
//draw the chart
var chart = new google.visualization.BarChart(document.getElementById(chartId)); //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);
}
function init () {
console.log('init');
$.each($('.panel-heading'), function(){
var chartItem = $(this).parents('.panel').find('.chart-item');
var chartId = chartItem.attr('id');
console.log('chartId', chartId);
drawChart(chartId);
})
}
$('.panel-heading').click(function(){
var chartItem = $(this).parents('.panel').find('.chart-item');
var chartId = chartItem.attr('id');
drawChart(chartId);
})
</script>
</body>
</html>