Google chart wizard

For start, I would like to say that I didn’t use JS yet, and that’s why I am asking for your help. I made a bar chart using Google chart wizard, and it works perfectly, but I want it to show dynamic info from the database. I started to change JS and put variables into it, but the chart wont work then. I don’t know what is the problem. I stopped at the point when it stopped working, so it isn’t finished yet. Here are the two versions of the script
Raw:



<script language=“javascript” src=“http://www.google.com/jsapi”></script>

<div id=“chart”></div>

<script type=“text/javascript”>
var queryString = ‘’;
var dataUrl = ‘’;

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

      dataTable.addColumn('number');
      dataTable.setValue(0, 0, 10);
      dataTable.setValue(1, 0, 20);
      dataTable.setValue(2, 0, 30);
      dataTable.setValue(3, 0, 40);
      dataTable.setValue(4, 0, 50);
      dataTable.setValue(5, 0, 60);
      dataTable.setValue(6, 0, 70);
      dataTable.setValue(7, 0, 80);
      dataTable.setValue(8, 0, 90);
      dataTable.setValue(9, 0, 100);
      dataTable.setValue(10, 0, 11);
      dataTable.setValue(11, 0, 12);
      dataTable.setValue(12, 0, 13);
      dataTable.setValue(13, 0, 14);
      dataTable.setValue(14, 0, 15);
      dataTable.setValue(15, 0, 16);

      draw(dataTable);
    }
  }

  function draw(dataTable) {
    var vis = new google.visualization.ImageChart(document.getElementById('chart'));
    var options = {
      chf: 'bg,s,F3F1F1|c,s,D4D6D6',
      chxl: '1:|a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p',
      chxp: '1,0.5,1.5,2.5,3.5,4.5,5.5,6.5,7.5,8.5,9.5,10.5,11.5,12.5,13.5,14.5,15.5',
      chxr: '1,0,16',
      chxs: '0,F6A505,11.5,0,l,F6A505|1,676767,10.5,0,l,676767',
      chxtc: '',
      chxt: 'y,x',
      chbh: 'a,6',
      chs: '580x480',
      cht: 'bvg',
      chco: 'F6A505',
      chd: 't:10,20,30,40,50,60,70,80,90,100,11,12,13,14,15,16',
      chdl: '',
      chdlp: 't',
      chg: '-1,10,3,6',
      chtt: 'Punkty',
      chts: 'F6A505,19.5'
    };
    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);

&lt;/script&gt;

changed:



function rows(){

      $k =0;
      while($k &lt; $numrows) {                    
      echo 'dataTable.setValue('.$k.', 0, 10);&lt;br /&gt;';
      $k++;
      }
      for($k;$k&lt;16;$k++) {
      echo 'dataTable.setValue('.$k.', 0, 10);&lt;br /&gt;';
      }
}

$rowss = rows();
?>

<center>

<script language=“javascript” src=“http://www.google.com/jsapi”></script>

<div id=“chart”></div>

<script type=“text/javascript”>
var queryString = ‘’;
var dataUrl = ‘’;

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

      dataTable.addColumn('number');

<?
echo $rowss;
?>

      draw(dataTable);
    }
  }

  function draw(dataTable) {
    var vis = new google.visualization.ImageChart(document.getElementById('chart'));
    var options = {
      chf: 'bg,s,F3F1F1|c,s,D4D6D6',
      chxl: '1:|a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p',
      chxp: '1,0.5,1.5,2.5,3.5,4.5,5.5,6.5,7.5,8.5,9.5,10.5,11.5,12.5,13.5,14.5,15.5',
      chxr: '1,0,16',
      chxs: '0,F6A505,11.5,0,l,F6A505|1,676767,10.5,0,l,676767',
      chxtc: '',
      chxt: 'y,x',
      chbh: 'a,6',
      chs: '580x480',
      cht: 'bvg',
      chco: 'F6A505',
      chd: 't:10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10',
      chdl: '',
      chdlp: 't',
      chg: '-1,10,3,6',
      chtt: 'Punkty',
      chts: 'F6A505,19.5'
    };
    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);

&lt;/script&gt;

</center>


the function rows echoes:


dataTable.setValue(0, 0, 10);
dataTable.setValue(1, 0, 10);
dataTable.setValue(2, 0, 10);
dataTable.setValue(3, 0, 10);
dataTable.setValue(4, 0, 10);
dataTable.setValue(5, 0, 10);
dataTable.setValue(6, 0, 10);
dataTable.setValue(7, 0, 10);
dataTable.setValue(8, 0, 10);
dataTable.setValue(9, 0, 10);
dataTable.setValue(10, 0, 10);
dataTable.setValue(11, 0, 10);
dataTable.setValue(12, 0, 10);
dataTable.setValue(13, 0, 10);
dataTable.setValue(14, 0, 10);
dataTable.setValue(15, 0, 10);

$rowss = rows();

This does not store anything in $rowss as the function rows() does not return any value, it simply outputs text to the webpage. Your JavaScript declaring the row values is getting printed above the <center> tag and not within the rest of the script at all.

Change your function so that it returns a string rather than echos output, or call it at the point you want its output to appear.

but how to loop a return? I have read that return breaks the loop. Can you show me how to do it, please? Because I tried to loop it, but I have no idea how to :slight_smile:

You put the string you’re building into a variable and only return once you’ve finished building the string.

You also want to NOT output “<br />” in each iteration of the loop. Raw HTML does not belong in the middle of JavaScript code.

function rows($numrows = 0) {

    $js = "";
    $limit = max($numrows, 16);

    for ($i = 0; $i < $limit; $i++) {
        $js .= "dataTable.setValue($i, 0, 10);\
";
    }

    return $js;

}

//example invocation
$rows = rows(5);

Man, you are genius! I will not use google chart wizard as it is bugged and doesn’t show exact values, but I have learned something new, and for me, a newbie, it is important :smiley: Thank you for help!