Jump to content

Help with chart

Daniii

By Daniii
in PHP Coding Help

 Share

Recommended Posts

Daniii Member

Daniii

Posted
Posted 
<?php
    $url = "myurl";
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_URL, $url);
	$getdata = curl_exec($curl); 
    $data = json_decode($getdata);
    $users = $data->result[0]->Users;
    $datapoints = array();
    
    foreach($users as $user):
      $dataPoints[] = array(
        'label' => $user->UserObject->UserName,
        'y' => $user->Amount);
    endforeach;
    echo "<pre>";
print_r($dataPoints);
echo "</pre>";
echo json_encode($dataPoints, JSON_FORCE_OBJECT);
?>

<!DOCTYPE HTML>
<div class="container">
  <h2>Chart.js — Pie Chart Demo</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: "{label}",
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
  }
});
</script>
<style>
.container {
  width: 80%;
  margin: 15px auto;
}
</style>

what is wrong? I can no longer see the chart.

Json 

{
  "result": [
    {
      "ID": 1,
      "Users": [
        {
          "UserObject": {
            "UserName": "User1",
            "-": {
              "ID": 1
            },
            "0": "0"
          },
          "User": "User1",
          "Amount": 57654456
        },
        {
          "UserObject": {
            "UserName": "User2",
            "-": {
              "ID": 1
            },
            "0": "0"
          },
          "User": "User2",
          "Amount": 57654456
        },
        {
          "UserObject": {
            "UserName": "User3",
            "-": {
              "ID": 1
            },
            "0": "0"
          },
          "User": "User3",
          "Amount": 57654456
        }
      ],
      "Reached": false,
      "IsActive": true
    }
  ],
  "error": false,
  "version": 1
}

 

Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

I tried Googling charts.js to have a look at their API documentation. What I found was nothing like the formats that you appear to be using.

I did manage to get a chart produced using google.visualization api (if that helps)

image.png.1a2e45256c80edb4a2b381e62a6fe62b.png

<?php
$getdata = '
{
  "result": [
    {
      "ID": 1,
      "Users": [
        {
          "UserObject": {
            "UserName": "User1",
            "-": {
              "ID": 1
            },
            "0": "0"
          },
          "User": "User1",
          "Amount": 10
        },
        {
          "UserObject": {
            "UserName": "User2",
            "-": {
              "ID": 1
            },
            "0": "0"
          },
          "User": "User2",
          "Amount": 20
        },
        {
          "UserObject": {
            "UserName": "User3",
            "-": {
              "ID": 1
            },
            "0": "0"
          },
          "User": "User3",
          "Amount": 15
        }
      ],
      "Reached": false,
      "IsActive": true
    }
  ],
  "error": false,
  "version": 1
}
';
    $data = json_decode($getdata);
    $users = $data->result[0]->Users;
    $dataPoints = array( ['User', 'Amount'] );
    
    foreach($users as $user):
      $dataPoints[] = array( $user->User, $user->Amount );
    endforeach;

    $jdata = json_encode($dataPoints);
?>

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type='text/javascript'>
$().ready(function() {
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    // Draw the chart and set the chart values
    function drawChart() {
      var dataArray = JSON.parse($("#chart-values").val())  
      var data = google.visualization.arrayToDataTable(dataArray);

      // Optional; add a title and set the width and height of the chart
      var options = {
            'title':'User Amounts', 
            'width':550, 
            'height':400, 
            'slices': { 
                        0: {'color':'#2ecc71' },
                        1: {'color':'#3498db' },
                        2: {'color':'#95a5a6' },
                        3: {'color':'#9b59b6' },
                        4: {'color':'#f1c40f' },
                        5: {'color':'#e74c3c' },
                        6: {'color':'#34495e' }
                      }
            };

      // Display the chart inside the <div> element with id="piechart"
      var chart = new google.visualization.PieChart(document.getElementById('myChart'));
      chart.draw(data, options);
    }
})
</script>
<style>
.container {
  width: 80%;
  margin: 15px auto;
}
</style>
</head>
<body>

<input type='hidden' id='chart-values' value='<?=$jdata?>'>

<div class="container">
  <h2>Pie Chart Demo</h2>
  <div id="myChart"></div>
</div>
</body>
</html>

 

  • Like 2
Link to comment
Share on other sites
Daniii Member

Daniii

Posted
  • Author
Posted

when i paste my url there i get 


Notice: Trying to get property 'result' of non-object in C:\xampp\htdocs\dashboard-master\chart2.php on line 5

Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\dashboard-master\chart2.php on line 5

Notice: Trying to get property 'Users' of non-object in C:\xampp\htdocs\dashboard-master\chart2.php on line 5

Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\dashboard-master\chart2.php on line 8
Array ( [0] => Array ( [0] => User [1] => Amount ) )

 

Link to comment
Share on other sites
Daniii Member

Daniii

Posted
  • Author
Posted
3 minutes ago, Barand said:

Please define the following terms

  • my url
  • there 
$getdata = "url";

Output: 

[
  {
    "id": 0,
    "moneyamount": 0,
    "donedate": "2020-12-20T18:29:04.509Z",
    "bonus": 0,
    "users": [
      {
        "userObject": {
          "userName": "string",
          "id": 0,
          "spedition": {
            "id": 0,
            "name": "string",
            "shortName": "string",
            "isRealEco": true
          },
          "inSped": true,
          "formatName": "string"
        },
        "user": "string",
        "amount": 0,
        "unit": "string",
        "value": "string",
        "max": 0
      }
    ],
    "ignoredUsers": [
      {
        "userName": "string",
        "id": 0,
        "spedition": {
          "id": 0,
          "name": "string",
          "shortName": "string",
          "isRealEco": true
        },
        "inSped": true,
        "formatName": "string"
      }
    ],
    "type": 0,
    "alrreached": 0,
    "reached": true,
    "isActive": true
  }
]
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.