我想在每个按钮单击事件上加载多个图表。

Question

In my project I have 3 buttons and on each button click event I am calling different google chart function ......

My question is when I click on one button the chart is load but when I click second or any button the chart is not update I am passing data from json

 function daily() { google.charts.load('current', { packages: ['corechart', 'line'] }); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('date', 'X'); data.addColumn('number', 'Score'); for (var i = 0; i < dscr.length; i++) { //alert(dscr.length); //alert(dscr[i].Success); //alert(dscr[i].Date); var dt = mscr[i].Date; //var dt = dscr[i].Date; //var d = new Date(dt); //var n = d.getDate(); //alert(n); data.addRow([new Date(dscr[i].Date), dscr[i].Success]); } var options = { hAxis: { title: 'Day' }, vAxis: { title: 'Score' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } } function weekly() { google.charts.load('current', { packages: ['corechart', 'line'] }); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('date', 'X'); data.addColumn('number', 'Score'); for (var i = 0; i < wscr.length; i++) { data.addRow([new Date(wscr[i].Date), wscr[i].Success]); } var options = { hAxis: { title: 'Day' }, vAxis: { title: 'Score' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } } function monthly() { google.charts.load('current', { packages: ['corechart', 'line'] }); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('date', 'X'); data.addColumn('number', 'Score'); for (var i = 0; i < mscr.length; i++) { scr[i].Date), mscr[i].Success]); } var options = { hAxis: { title: 'Day', }, vAxis: { title: 'Score' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } } 

  <li role="presentation" class="active"> <a href="#Daily" aria-controls="home" class="btn btn-md WinnerButton" role="tab" onclick="daily()" data-toggle="tab" data-bind=" click: StatisticalDaily"> DAILY </a> </li> <li role="presentation"> <a href="#Weekly" aria-controls="profile" class="btn btn-md WinnerButton" role="tab" onclick="weekly()" data-toggle="tab" data-bind=" click: StatisticalWeekly"> WEEKLY </a> </li> <li role="presentation"> <a href="#Monthly" aria-controls="messages" class="btn btn-md WinnerButton" role="tab" data-toggle="tab" onclick="monthly()" data-bind="click: StatisticalMonthly"> MONTHLY </a> </li> <div id="chart_div"></div> 

Answer 1

Your issue is you are trying yo call google.charts.load() more than once which is not allowed. In addition, you should not define drawBasic() three times in daily() , weekly() , and monthly() .

Here is a working jsfiddle . It may be a good start to achieve what you need.