Use php "loop if" in js script - google chart

Question

I have a php website and I need add a google chart - so it is my first step with js. I have the below problem:

I need to change the original function drawVisualization() for php code.

I created $cosafter with the same input (php),
Made var coss with php echo (js)
Put the new coss id into function (js)

Could you plese check and advise where I made a mistake?

Original code:

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['data', 'zysk/strata', 'Average'],
          ['2019-09-05',9.32,9.32],
          ['2019-09-06',10.88,10.1],
          ['2019-11-29',-7.86,4.1133333333333],
          ['2019-11-29',-43.61,-7.8175],
          ['2019-11-29',44,2.546],
          ['2019-11-29',4.71,2.9066666666667],
        ]);

        var options = {
          title : 'Trend ostatnich 10 transakcji',
          vAxis: {title: 'Zysk/Strata'},
          hAxis: {title: 'Data'},
          seriesType: 'bars',
          series: {1: {type: 'line', color: 'black'}}        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

My code after changes:

    <?php
    require("zamkniete.php");

    $cos='';

    if ($lp22 >= 10){$ost10=$lp22-9;}else{$ost10=0;}   //show only last 10 prices

    for ($x=$ost10; $x <= $lp22; $x++){
    if($x==0){$to=$zyskpop[$x];}else{$to=($zyskpop[$x]/($x+1));}
    $cosbefore.= "['".$datatab[$x]."',".$zysktab[$x].",".$to."],</br>";
    };

    $cosafter = "[['data', 'zysk/strata', 'Average'],</br>".$cosbefore."]";

//echo $cosafter;
/*
    FYI how $cosafter looks like:
     [['data', 'zysk/strata', 'Average'],
     ['2019-09-05',9.32,9.32],
     ['2019-09-06',10.88,10.1],
     ['2019-11-29',-7.86,4.1133333333333],
     ['2019-11-29',-43.61,-7.8175],
     ['2019-11-29',44,2.546],
     ['2019-11-29',4.71,2.9066666666667],
     ]
*/


    ?>
    <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">

          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawVisualization);

          var coss = "<?php echo $cosafter; ?>";

          function drawVisualization() {
            // Some raw data (not necessarily accurate)

            var data = google.visualization.arrayToDataTable(coss);

            var options = {
              title : 'Trend ostatnich 10 transakcji',
              vAxis: {title: 'Zysk/Strata'},
              hAxis: {title: 'Data'},
              seriesType: 'bars',
              series: {1: {type: 'line', color: 'black'}}        };

            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            chart.draw(data, options);
          }
        </script>
      </head>
      <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </body>
    </html>

Answer 1

main code:

<?php

require("zamkniete.php");

$cos='';
$data=array();

//if ($lp22 >= 10){$ost10=$lp22-9;}else{$ost10=0;}
//for ($x=$ost10; $x <= $lp22; $x++){
for ($x=0; $x <= $lp22; $x++){
if($x==0){$to=$zyskpop[$x];}else{$to=($zyskpop[$x]/($x+1));}

$dataa=date("d-m", strtotime("$datatab[$x]"));
$data[] =
    array(
        'data' => $dataa,
        'zysk/strata' => $zysktab[$x],
        'średnia' => $to,
    );

};


//var_dump($data);

# our converstion function given above.
function convertDataToChartForm($data)
{
    $newData = array();
    $firstLine = true;

    foreach ($data as $dataRow)
    {
        if ($firstLine)
        {
            $newData[] = array_keys($dataRow);
            $firstLine = false;
        }

        $newData[] = array_values($dataRow);
    }

    return $newData;
}
// <div id="chart_div2" style="width: 900px; height: 500px;"></div>
?>


<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable((<?= json_encode(convertDataToChartForm($data)); ?>));

        var options = {
          title : 'zysk per transakcja',
          vAxis: {title: 'zysk/strata [PLN]'},
          hAxis: {title: 'data transakcji'},
          seriesType: 'bars',
          series: {
0: {color: '#F1E0B0'},
1: {type: 'line', color: '#ECBE7A'}}        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
        chart.draw(data, options);
      }
    </script>
  </head>
 
</html>

how to show chart

<div class="rwd-table">
<center><?php require("wykrestrend_dziala.php"); ?>  <div id="chart_div2" style="width: 900px; height: 500px;"></div></center>
</div>

Use php "loop if" in js script - google chart

Question

1 answers

solution1
0 ACCPTED 2020-10-04 16:12:13

Use php "loop if" in js script - google chart

Question

1 answers

solution1 0 ACCPTED 2020-10-04 16:12:13

solution1
0 ACCPTED 2020-10-04 16:12:13