Проблемы API Google Charts

Question

Я использую PHP для вызова API Yahoo Finance для различных финансовых маркеров. Я рисую их с помощью API диаграмм Google. У меня есть 4 диаграммы, которые всегда показывались до нескольких дней назад. Я не могу понять, что происходит. Он будет показывать только один график за раз. Все данные успешно загружаются для всех 4 графиков, но отображаются только один график. Любой совет будет принят во внимание!

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<br> 
<script type="text/javascript"> 
google.load('visualization', '1.1', {packages: ['line']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Stock Index(%)'); 


    data.addRows([ 
    <?=$stockIndex?> 
    ]); 

    var options = { 
    chart: { 
     title: 'Stock Index', 
    }, 
    width: 1100, 
    height: 900 
    }; 
    var chart = new google.charts.Line(document.getElementById('stocks')); 
    chart.draw(data, options); 
    } 
    </script> 



<script type="text/javascript"> 
google.load('visualization', '1.1', {packages: ['line']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Stock Index(%)'); 
    data.addColumn('number', '12-Day EMA'); 
    data.addColumn('number', '26-Day EMA'); 

    data.addRows([ 
    <?=$stockTwelveTwentySix?> 
    ]); 

    var options = { 
    chart: { 
     title: 'Stock Index w/12-day and 26-day EMA', 
    }, 
     width: 1100, 
    height: 900 
    }; 
    var chart = new google.charts.Line(document.getElementById('twelvetwentysixday')); 
    chart.draw(data, options); 
} 
</script> 

<script type="text/javascript"> 
google.load('visualization', '1.1', {packages: ['line']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Stock Index(%)'); 
    data.addColumn('number', '12-Day EMA');  

    data.addRows([ 
    <?=$stockTwelve?> 
    ]); 

    var options = { 
    chart: { 
     title: 'Stock Index w/12-day EMA', 
    }, 
    width: 1100, 
    height: 900 
    }; 
    var chart = new google.charts.Line(document.getElementById('twelvetwentyday')); 
    chart.draw(data, options); 
} 
</script> 

<script type="text/javascript"> 
google.load('visualization', '1.1', {packages: ['line']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Stock Index(%)'); 
    data.addColumn('number', 'Lower BB'); 
    data.addColumn('number', 'Upper BB');  

    data.addRows([ 
    <?= $bb ?> 
    ]); 

    var options = { 
    chart: { 
     title: 'Stock Index w/Bollinger Band Comparisons', 
    }, 
    width: 1100, 
    height: 900 
    }; 
    var chart = new google.charts.Line(document.getElementById('Bollinger')); 
    chart.draw(data, options); 
} 

</script> 


<div id="stocks"></div> 
<br> 
<div id="twelvetwentyday"></div> 
<br> 
<div id="twelvetwentysixday"></div> 
<br> 
<div id="Bollinger"></div> 

Answer 1

Решение легко U сделает только один обратный вызов. Нельзя писать функцию для каждой диаграммы. сделайте все в одной функции.

google.load('visualization', '1.1', {packages: ['line']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Stock Index(%)'); 
    data.addRows([ 
    <?=$stockIndex?> 
    ]); 

    var options = { 
    chart: { 
     title: 'Stock Index', 
    }, 
    width: 1100, 
    height: 900 
    }; 
    var chart = new google.charts.Line(document.getElementById('stocks')); 
    chart.draw(data, options); 


    var data2 = new google.visualization.DataTable(); 
    data2.addColumn('number', 'Day'); 
    data2.addColumn('number', 'Stock Index(%)'); 
    data2.addColumn('number', '12-Day EMA'); 
    data2.addColumn('number', '26-Day EMA'); 

    data2.addRows([ 
    <?=$stockTwelveTwentySix?> 
    ]); 

    var options2 = { 
    chart: { 
     title: 'Stock Index w/12-day and 26-day EMA', 
    }, 
     width: 1100, 
    height: 900 
    }; 

    var chart2 = new google.charts.Line(document.getElementById('twelvetwentysixday')); 
    chart2.draw(data2, options2); 



    var data3 = new google.visualization.DataTable(); 
    data3.addColumn('number', 'Day'); 
    data3.addColumn('number', 'Stock Index(%)'); 
    data3.addColumn('number', '12-Day EMA');  

    data3.addRows([ 
    <?=$stockTwelve?> 
    ]); 

    var options3 = { 
    chart: { 
     title: 'Stock Index w/12-day EMA', 
    }, 
    width: 1100, 
    height: 900 
    }; 
    var chart3 = new google.charts.Line(document.getElementById('twelvetwentyday')); 
    chart3.draw(data3, options3); 


    var data4 = new google.visualization.DataTable(); 
    data4.addColumn('number', 'Day'); 
    data4.addColumn('number', 'Stock Index(%)'); 
    data4.addColumn('number', 'Lower BB'); 
    data4.addColumn('number', 'Upper BB');  

    data4.addRows([ 
    <?= $bb ?> 
    ]); 

    var options4 = { 
    chart: { 
     title: 'Stock Index w/Bollinger Band Comparisons', 
    }, 
    width: 1100, 
    height: 900 
    }; 
    var chart4 = new google.charts.Line(document.getElementById('Bollinger')); 
    chart.draw(data4, options4); 
    } 

сделайте это somthing подобный это.