Google gauge chart does not show up with another charts on te same page

63 Views Asked by At

Google gauge chart does't show up with another charts on the same page.

I have tried put code which is responsible for gauge chart in first line but it wont help.

It only works when is alone.

This is my code:

<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);

      }

Does somebody know where is the problem?

0

There are 0 best solutions below