CODEWITHSUNDEEP
phpjsonchart.js
user7748962
user7748962

Reputation:

php to json to chart.js

I have been working this script trying to pass PHP loop to JSON ( I Think I have this figured out. then using the JSON result to generate a line chart using chart.js.

JSON script that I am trying to pass to chart. 

 <?php
	
	echo $_SESSION['amort_JSON'];

    ?>

Result from echo above:

[{"periodic_pmt":"2","principle_balance":416997.37661705,"principle_paid":0,"ttl_principle_paid":1002.6233829502,"interest_paid":0,"ttl_interest_paid":866.83015878773},{"periodic_pmt":3,"principle_balance":416600.29804453,"principle_paid":538.02630958206,"ttl_principle_paid":1540.6496925323,"interest_paid":396.7004612869,"ttl_interest_paid":1263.5306200746},{"periodic_pmt":4,"principle_balance":416203.59758324,"principle_paid":538.40406076641,"ttl_principle_paid":2079.0537532987,"interest_paid":396.32271010256,"ttl_interest_paid":1659.8533301772},{"periodic_pmt":5,"principle_balance":415807.27487314,"principle_paid":538.78145224369,"ttl_principle_paid":2617.8352055424,"interest_paid":395.94531862527,"ttl_interest_paid":2055.7986488025},{"periodic_pmt":6,"principle_balance":415411.32955451,"principle_paid":539.15848435644,"ttl_principle_paid":3156.9936898988,"interest_paid":395.56828651252,"ttl_interest_paid":2451.366935315}]

Chart Script (Not working): chart shows but is blank. 

  <body>
    <canvas id="myChart" width="100" height="100"></canvas>
<script>
	
var amort_array = <?php echo json_encode($_SESSION['amort_JSON']);?>;

var data = JSON.parse(amort_array);

var periodic_pmt = data.periodic_pmt;

var principle_balance = data.principle_balance;
	

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['periodic_pmt'],
        datasets: [
         
            {
                type: 'line',
                label: 'Line Component',
                data: ['principle_balance'],
            }
        ]
    },
	
	options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
            }]
        },
		elements: {
        line: {
                fill: false
        }
}
    }
});
</script>
    </body>

Upvotes: 0

Views: 1150

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

Here's how you could generate a line chart using the JSON result in ChartJS

// JSON result
let result = [{ "periodic_pmt": "2", "principle_balance": 416997.37661705, "principle_paid": 0, "ttl_principle_paid": 1002.6233829502, "interest_paid": 0, "ttl_interest_paid": 866.83015878773 }, { "periodic_pmt": 3, "principle_balance": 416600.29804453, "principle_paid": 538.02630958206, "ttl_principle_paid": 1540.6496925323, "interest_paid": 396.7004612869, "ttl_interest_paid": 1263.5306200746 }, { "periodic_pmt": 4, "principle_balance": 416203.59758324, "principle_paid": 538.40406076641, "ttl_principle_paid": 2079.0537532987, "interest_paid": 396.32271010256, "ttl_interest_paid": 1659.8533301772 }, { "periodic_pmt": 5, "principle_balance": 415807.27487314, "principle_paid": 538.78145224369, "ttl_principle_paid": 2617.8352055424, "interest_paid": 395.94531862527, "ttl_interest_paid": 2055.7986488025 }, { "periodic_pmt": 6, "principle_balance": 415411.32955451, "principle_paid": 539.15848435644, "ttl_principle_paid": 3156.9936898988, "interest_paid": 395.56828651252, "ttl_interest_paid": 2451.366935315 }];

let labels = result.map(e => e.periodic_pmt);
let data = result.map(e => e.principle_balance);

let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Line Component',
            data: data
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        elements: {
            line: {
                fill: false
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Upvotes: 1

Related Questions