Link to home
Start Free TrialLog in
Avatar of marcoullis
marcoullis

asked on

Google multiple charts not showing... only one shows up

I have two scripts to load the image charts (radar) but only one shows up.

Any advice?

-hellenica

 <table>
      <tr>
      <td width="300">
        
        
         <div id="chart1"></div>
         <div id="chart2"></div>

   <script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '-5,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: 'Congressional Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

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

    </script>         
    </td>
        
    <td width="300">
     
     
     <script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '-5,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

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

    </script>                 
            </td>
            </tr></table>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

use this for the second one :
  var queryString1 = '';
      var dataUrl1 = '';

      function onLoadCallback1() {
        if (dataUrl1.length > 0) {
          var query = new google.visualization.Query(dataUrl1);
          query.setQuery(queryString1);
          query.send(handleQueryResponse1);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw1(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '-5,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse1(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

      //google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback1);

Open in new window

Avatar of marcoullis
marcoullis

ASKER

tried your suggestion, but same result.

here is the code as it stands now...

<table>
      <tr>
      <td width="300">
        
        
         <div id="chart1"></div>
         <div id="chart2"></div>

   <script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '-5,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: 'Congressional Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

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

    </script>         
    </td>
        
    <td width="300">
     
     
     <script type="text/javascript">
      var queryString1 = '';
      var dataUrl1 = '';

      function onLoadCallback1() {
        if (dataUrl1.length > 0) {
          var query = new google.visualization.Query(dataUrl1);
          query.setQuery(queryString1);
          query.send(handleQueryResponse1);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw1(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '-5,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse1(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

      //google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback1);
    </script>                 
            </td>
            </tr></table>

Open in new window

please provide a link to see your page
Made another minor change with the <div> tags
but the result is the same...

basically its showing the data of the second with
the title of the first... very strange.

 <table>
      <tr>
      <td width="300">
        
        
         <div id="chart1"></div>
         

   <script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '0,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: 'Congressional Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

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

    </script>         
    </td>
        
    <td width="300">
     <div id="chart2"></div>
     
     <script type="text/javascript">
      var queryString1 = '';
      var dataUrl1 = '';

      function onLoadCallback1() {
        if (dataUrl1.length > 0) {
          var query = new google.visualization.Query(dataUrl1);
          query.setQuery(queryString1);
          query.send(handleQueryResponse1);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw1(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '0,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse1(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

      //google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback1);
    </script>                 
            </td>
            </tr>
            </table>

Open in new window

line 97 : draw1(dataTable);
line 121 : vis.draw1(dataTable, options);
line 129 : draw1(response.getDataTable());
Now it showing title and data from the first, but not the second chart at all.

 <table>
      <tr>
      <td width="300">
        
        
         <div id="chart1"></div>
         

   <script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_congress['issueGreece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_congress['issuePatriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_congress['issueViolations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_congress['issueFyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_congress['issueCaucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_congress['issueCyprus']; ?>);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart1'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '0,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: 'Congressional Scorecard'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

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

    </script>         
    </td>
        
    <td width="300">
     <div id="chart2"></div>
     
     <script type="text/javascript">
      var queryString1 = '';
      var dataUrl1 = '';

      function onLoadCallback1() {
        if (dataUrl1.length > 0) {
          var query = new google.visualization.Query(dataUrl1);
          query.setQuery(queryString1);
          query.send(handleQueryResponse1);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.setValue(0, 0, <?php echo $row_rs_statsState['cyprus']; ?>);
          dataTable.setValue(1, 0, <?php echo $row_rs_statsState['greece']; ?>);
          dataTable.setValue(2, 0, <?php echo $row_rs_statsState['patriarchate']; ?>);
          dataTable.setValue(3, 0, <?php echo $row_rs_statsState['violations']; ?>);
          dataTable.setValue(4, 0, <?php echo $row_rs_statsState['fyrom']; ?>);
          dataTable.setValue(5, 0, <?php echo $row_rs_statsState['caucus']; ?>);
          dataTable.setValue(6, 0, <?php echo $row_rs_statsState['cyprus']; ?>);

          draw1(dataTable);
        }
      }

      function draw1(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart2'));
        var options = {
          chxl: '0:|CYP|GRE|PAT|VIO|FYR|CAU',
          chxp: '0,1,2,3,4,5,6',
          chxr: '0,0,5',
          chxs: '0,676767,10.5,0,lt,676767',
          chxtc: '',
          chxt: 'x',
          chs: '250x250',
          cht: 'r',
          chco: 'FF0000',
          chds: '0,5',
          chd: 't:4,5,3,2,5,3,4',
          chdl: '',
          chls: '2,4,0',
          chma: '0,5|5',
          chm: 'B,FF000080,0,0,0',
          chtt: '<?php echo $row_rs_congress['STATE']; ?> Scorecard'
        };
        vis.draw1(dataTable, options);
      }

      function handleQueryResponse1(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw1(response.getDataTable());
      }

      //google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback1);
    </script>                 
            </td>
            </tr>
            </table>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
bingo!