PHP - Line Chart of a Combined Array

Question

I have an array;

$arrgraph={"800":800,"1650":850,"2450":800,"3200":750,"4300":1100,"5250":950,"6200":950,"7150":950,"8000":850}

I found this array with array_combine from those 2 arrays:

$arr=array(800,850,800,750,950,1100,950,950,850);
$x=array(800,1650,2450,3200,4300,5250,6200,7150,8000);

I want to show this array on a line graph. But I can not do.

I tried this but nothing appeared on localhost page.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var data = <?php echo json_encode($arrgraph, JSON_NUMERIC_CHECK); ?>;

data = data.map(function (row, index) {
    return {
        x: index,
        y: row
    };
});

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Analysis"
    },
    axisY: {
        title: "Variables"
    },
    axisX: {
        title: "Sample"

    },
    data: [{
        type: "line",

        dataPoints: data
    }]
});
chart.render();

}

</script>
</head>
<body>

<div id="chartContainer" style="height: 250px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Someone told me that I can use this code and make data points using 'foreach' but I couldn't do it either because I'm a little bit rookie on php.

<!DOCTYPE HTML>
<html>
<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Multi-Series Line Chart"  
      },
      data: [
      {        
        type: "line", //you can echo php array here as dataPoints variable
        dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25},
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: 24 },
        { x: 90, y: 26}

        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

Is there any way that I can make this chart ? What are my mistakes and what can I do ? Thanks.

Unrelated to your problem but does "800":800 mean it's a json string and the key is 800 and the value is 800? That sounds like a bad practice. An array in PHP can only have one key named 800, so if your line goes back down to 800, then your data is incorrect/manipulated. — Andreas
– Andreas, Commented Mar 31, 2019 at 15:45
I'm sorry but I couldn't understand what is the problem. I found that data by combining two arrays. I edit my question and showed those two arrays, you can check there — Tanay Acan
– Tanay Acan, Commented Mar 31, 2019 at 17:56
I took the three first items from your arrays and see the result: 3v4l.org/DZtCf only two items left. Array_combine requires unique keys. See how it removed one of your data points. — Andreas
– Andreas, Commented Mar 31, 2019 at 18:59

Andreas · Accepted Answer · 2019-03-31 19:09:32Z

1

You can loop one array and use the key to get the item from the other array.

I create a new array with all the data points in a string format that you need as output but I leave out the trailing comma.
When the loop is done I implode the output array with comma and new line.

<!DOCTYPE HTML>
<html>
<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Multi-Series Line Chart"  
      },
      data: [
      {        
        type: "line", //you can echo php array here as dataPoints variable
        dataPoints: [

<?PHP
    foreach($arr as $key => $v){
        $output[] = "{ x: " . $x[$key] . ", y: " . $v . " }";
    }
    echo implode(",\n", $output);
?>


        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

answered Mar 31, 2019 at 19:09

Andreas

24k7 gold badges34 silver badges75 bronze badges

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

2 Comments

Tanay Acan Over a year ago

Thank you so much Andreas ! That's what I need.

Sarvesh Tiwari Over a year ago

it's printed blank.

Collectives™ on Stack Overflow

PHP - Line Chart of a Combined Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related