Tüm google grafiklerini tek bir web sayfasından yükleyemiyorum.

Grafikler görüntülemek için google grafikler kullanıyorum ama son grafik sayfada yüklenmiyor, bir şey eksik miyim. pls bana en kısa zamanda çözüm sunar.Tüm google grafiklerini tek bir web sayfasından yükleyemiyorum.

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

    function drawcharts() { 

     var data1 = google.visualization.arrayToDataTable(
       [ 
        ['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'], 
        ['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00], 
        ['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43], 
        ['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71], 
        ['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86], 
        ['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] , 
        ['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] , 
        ['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] , 
        ['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] , 
        ['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0] 
       ]); 

     var options1 = { 
      title:'Total CPU Hours Per Year By Site', 
      hAxis:{title:'Year', titleTextStyle:{color:'black'}}, 
      vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}} 
     }; 

     var chartA = new google.visualization.AreaChart(document.getElementById('chart_div')); 
     chartA.draw(data1, options1); 

     } 

    google.setOnLoadCallback(drawcharts); 
    google.load("visualization", "1", {packages:["corechart"]}); 

</script>

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

    function drawcharts1() { 

     var data2 = google.visualization.arrayToDataTable(
       [ 
        ['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'], 
        ['2012', 275.82, 1.145, 0, 2.71, 18.44, 0], 
        ['2013', 398.29, 0.04, 0, 3.01, 29.38, 0], 
        ['2014', 509.84, 0.04, 0 , 3.29, 26.05, 0], 
        ['2015', 723.08, 0, 0, 3.54, 13.09, 0], 
        ['2016', 951.38, 0, 0, 3.90, 7.59, 0] , 
        ['2017', 609.01, 0, 0, 4.32, 3.92, 0] , 
        ['2018', 1002.65, 0 , 0, 4.69, 1.70, 0] , 
        ['2019', 1133.86, 0, 0, 4.93, 1.31, 0] , 
        ['2020', 2127, 770 , 770, 5.31, 0.79, 0] 
       ]); 

     var options2 = { 
      title:'Total CPU Hours Required For FE Code', 
      hAxis:{title:'Year', titleTextStyle:{color:'black'}}, 
      vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}} 
     }; 

     var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs')); 
     chartB.draw(data2, options2); 
    } 

    google.setOnLoadCallback(drawcharts1); 
    google.load("visualization", "1", {packages:["corechart"]}); 

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <!-- load Google AJAX API --> 
    <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([ 
     ['Day', 'Submitted', 'Published', 'Rejected','Created'], 
     ['29-MAR-16', 100, 410, 230,40], 
     ['30-MAR-16', 170, 346, 302,430], 
     ['31-MAR-16', 60, 100, 130,40], 
     ['1-APRIL-16', 302, 350, 520,40] 
    ]); 


    var options = { 
     chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
     }, 
     bars: 'horizontal', // Required for Material Bar Charts. 
     hAxis: {format: 'decimal'}, 
     height: 500, 
     colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b'] 
    }; 

    var chart = new google.charts.Bar(document.getElementById('chart_div1')); 

    chart.draw(data, google.charts.Bar.convertOptions(options)); 

    } 
    </script>

<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart3); 

    function drawChart3() { 
    var data3 = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options3 = { 
     title: 'Company Performance', 
     curveType: 'function', 
     legend: { position: 'bottom' } 
    }; 

    var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart3.draw(data3, options3); 
    } 
</script> 

</head> 
<body> 

<div id="chart_div1" style="width: 900px; height: 500px;"></div> 
    <p></p> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    <p></p> 

    <div id="chart_divs" style="width: 900px; height: 500px;"></div> 
    <p></p> 

    <div id="curve_chart" style="width: 900px; height: 500px"></div> 
    <p></p> 

    </body> 
    </html>

div id = "curve_chart" tarzı = "genişlik: 900px, kalınlık: 500 piksel" bu hat içinonun boş gösterme ama ben aynı senaryoyu ayrı kullanırsam, bana grafiğini gösterir. Nedeni nedir? Senin bütün "drawcharts"

google.setOnLoadCallback geçirilen bir geri arama gelen fonksiyonları çağırarak öneriyoruz

kaynak

2016-04-06 suraha

İşte bir çalışma jsfiddle bu. yardım etmek https://jsfiddle.net/oakley808/z5j9u2sw/

google.load("visualization", "1", { 
    packages: ["corechart", "bar"] 
}); 
google.setOnLoadCallback(function(){ 
    drawcharts() 
    drawcharts1() 
    drawChart() 
    drawChart3() 
}) 

function drawcharts() { 

    var data1 = google.visualization.arrayToDataTable(
    [ 
     ['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'], 
     ['2012', 143754.00, 7607.59, 958.51, 6029.12, 13605.12, 586.00], 
     ['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43], 
     ['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71], 
     ['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86], 
     ['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0], 
     ['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0], 
     ['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0], 
     ['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0], 
     ['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0] 
    ]); 

    var options1 = { 
    title: 'Total CPU Hours Per Year By Site', 
    hAxis: { 
     title: 'Year', 
     titleTextStyle: { 
     color: 'black' 
     } 
    }, 
    vAxis: { 
     title: '1000s CPU Hours', 
     titleTextStyle: { 
     color: 'black' 
     } 
    } 
    }; 

    var chartA = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chartA.draw(data1, options1); 

} 




function drawcharts1() { 

    var data2 = google.visualization.arrayToDataTable(
    [ 
     ['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'], 
     ['2012', 275.82, 1.145, 0, 2.71, 18.44, 0], 
     ['2013', 398.29, 0.04, 0, 3.01, 29.38, 0], 
     ['2014', 509.84, 0.04, 0, 3.29, 26.05, 0], 
     ['2015', 723.08, 0, 0, 3.54, 13.09, 0], 
     ['2016', 951.38, 0, 0, 3.90, 7.59, 0], 
     ['2017', 609.01, 0, 0, 4.32, 3.92, 0], 
     ['2018', 1002.65, 0, 0, 4.69, 1.70, 0], 
     ['2019', 1133.86, 0, 0, 4.93, 1.31, 0], 
     ['2020', 2127, 770, 770, 5.31, 0.79, 0] 
    ]); 

    var options2 = { 
    title: 'Total CPU Hours Required For FE Code', 
    hAxis: { 
     title: 'Year', 
     titleTextStyle: { 
     color: 'black' 
     } 
    }, 
    vAxis: { 
     title: '1000s CPU Hours', 
     titleTextStyle: { 
     color: 'black' 
     } 
    } 
    }; 

    var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs')); 
    chartB.draw(data2, options2); 
} 



function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Day', 'Submitted', 'Published', 'Rejected', 'Created'], 
    ['29-MAR-16', 100, 410, 230, 40], 
    ['30-MAR-16', 170, 346, 302, 430], 
    ['31-MAR-16', 60, 100, 130, 40], 
    ['1-APRIL-16', 302, 350, 520, 40] 
    ]); 


    var options = { 
    chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
    }, 
    bars: 'horizontal', // Required for Material Bar Charts. 
    hAxis: { 
     format: 'decimal' 
    }, 
    height: 500, 
    colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b'] 
    }; 

    var chart = new google.charts.Bar(document.getElementById('chart_div1')); 

    chart.draw(data, google.charts.Bar.convertOptions(options)); 

} 




function drawChart3() { 
    var data3 = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000, 400], 
    ['2005', 1170, 460], 
    ['2006', 660, 1120], 
    ['2007', 1030, 540] 
    ]); 

    var options3 = { 
    title: 'Company Performance', 
    curveType: 'function', 
    legend: { 
     position: 'bottom' 
    } 
    }; 

    var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart3.draw(data3, options3); 
}

kaynak

2016-04-06 16:16:30

onun working.Thanks adam :) – suraha

mutlu. Cevabımı kabul edermisin o zaman? –

@ Michael sure man np – suraha

Tüm google grafiklerini tek bir web sayfasından yükleyemiyorum.

cevap

İlgili konular