Gauge chart doesn't showm up with other charts.

59 views
Skip to first unread message

Szymon Chomej

unread,
Feb 27, 2017, 4:32:07 AM2/27/17
to Google Visualization API
Gauge chart doesn't show up with other charts on the same page.
It only works alone.

This is my code:

<?php
if ($_POST['wczytaj']) {

  echo '
    <!--Div that will hold the line chart-->
    <div id="chart_div" style="width:100%;height: 350px;"></div>
    <br / >
    <br / >
    <!--Div that will hold the pie chart-->
    <div id="chart_div2" style="width:100%;height: 350px;"></div>
    <br / >
    <br / >
    <!--Div that will hold the gauge chart-->
    <div id="chart_div3" style="width:400px;height: 200px;"></div>
    <br / >
    <br / >
    ';

}
?>

  <script type="text/javascript">

    // Load the Visualization API and the package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.
setOnLoadCallback(drawLineChart);
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawPieChart);



    function drawLineChart() {

      var jsonData = $.ajax({
          url: "dane.json",
         dataType: "json",
         async: false
         }).responseText;

          var options = {
        'title':'Wilgotność Początkowa VS Wilgotność Końcowa',

             hAxis: {
          title: 'Data - Godzina',
          textStyle: {
            color: '#1a237e',
            fontSize: 12,
            bold: true
          },
          titleTextStyle: {
            color: '#1a237e',
            fontSize: 14,
            bold: true
          }
        },
        vAxis: {
          title: 'Wilgotność %',
          textStyle: {
            color: '#1a237e',
            fontSize: 12,
            bold: true
          },
          titleTextStyle: {
            color: '#1a237e',
            fontSize: 14,
            bold: true
          }
        }

          };


      // Create our data table out of JSON data loaded from server.
     var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data,  options);
}

    function drawPieChart() {

      var jsonData = $.ajax({
          url: "dane2.json",
         dataType: "json",
         async: false
         }).responseText;

         var options = {
        title:'Straty Towaru w %',
        pieHole: 0.4,
            slices: {
            0: { color: 'red' },
            1: { color: 'blue' },
            2: { color: 'orange' }
          }

          };



      // Create our data table out of JSON data loaded from server.
     var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
      chart.draw(data,  options);

    }

    // Load the Visualization API and the package.
    google.charts.load('current',  {'packages':['gauge']});
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawGaugeChart);

function drawGaugeChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div3'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);

      }



    </script>

Does anyone know wher is the problem?
Reply all
Reply to author
Forward
0 new messages