JavaScript - Insert PHP multidimensional array into Javascript class in Google Charts

Question

I'm using this Google Charts tutorial on how to convert an array into a graph.

The data in the tutorial is already in the function. Now I want to insert my own data into the function from a PHP array. I managed to convert my PHP array into a JavaScript array. Below is my code:

$jsArray = array();
foreach($movingAverages as $movingAverage) {
   $jsArray[] = array((int) $movingAverage['unix'], (int) $movingAverage['closing-prices']); 
}

Below is my sample code:

Array
(
    [0] => Array
        (
            [0] => 1505040240
            [1] => 3452
        )

    [1] => Array
        (
            [0] => 1505040300
            [1] => 3451
        )

    [2] => Array
        (
            [0] => 1505040360
            [1] => 3446
        )

    [3] => Array
        (
            [0] => 1505040420
            [1] => 3449
        )

This is my current Javascript Code:

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

    var js_array = <?php echo json_encode($jsArray);?>;
    alert(js_array);


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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Time', 'Closing Prices'],
        [js_array]


        ]);

        var options = {
          title: 'BTC-EUR',
          curveType: 'function',
          legend: { position: 'top' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 100%; height: 500px"></div>
  </body>
</html>

When I call alert(js_array); The array is called.

I don't know why the chart is not being displayed. I'm not sure how to insert the js_array into my function drawChart(). This is the first time I'm using JavaScript. So thank you for your help.

what do you get when you console.log(js_array) ?

Ali
– Ali

2017-09-10 12:29:07 +00:00
Commented Sep 10, 2017 at 12:29 — Ali
– Ali, Commented Sep 10, 2017 at 12:29
@Ali I get nothing.

user6043723
– user6043723

2017-09-10 12:35:50 +00:00
Commented Sep 10, 2017 at 12:35 — user6043723
– user6043723, Commented Sep 10, 2017 at 12:35

score 2 · Accepted Answer · 2017-09-10 13:04:21Z

2

You're likely adding one more dimension to the array.

var data = google.visualization.arrayToDataTable([
    ['Time', 'Closing Prices'],
    js_array
]);

UPDATE:

js_array.unshift(['Time', 'Closing Prices']);
var data = google.visualization.arrayToDataTable(js_array);

edited Sep 10, 2017 at 13:04

answered Sep 10, 2017 at 12:31

user2652134

Sign up to request clarification or add additional context in comments.

4 Comments

user6043723 Over a year ago

Do I need to modify google.charts.setOnLoadCallback(drawChart); to insert the data into the function similar to PHP?

user2652134 Over a year ago

@user6043723 Can I see your code running somewhere ?

user6043723 Over a year ago

Hi. Please see my code http://liveweave.com/qSWDtk

user2652134 Over a year ago

@user6043723 Updated the answer

Collectives™ on Stack Overflow

JavaScript - Insert PHP multidimensional array into Javascript class in Google Charts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related