[TUTORIAL] CHARTS ! pie, lines, doughnuts +

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

[TUTORIAL] CHARTS ! pie, lines, doughnuts +

Post by D Oliveira » 2020-05-11 19:08

Image


reference link (all you need): https://www.chartjs.org/docs/latest/charts/bar.html

Sexy right? :lol:

not much of a tutorial but... my code:

home.php (you need the html and .css code for that also to work, follow the link instructions, bellow is the combo ajax call + chart)

Code: Select all

			

			var today = new Date();
			var dd = String(today.getDate()).padStart(2, '0');
			var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
			var yyyy = today.getFullYear();

			today = yyyy + '-' + mm + '-' + dd;

			console.log(today);



	$j.ajax({
	url: 'cs_get.php',
	data: { entidad_id: today },
	success: function(data){
		if (data) {


		var tbl = jQuery.parseJSON(data);

						
  
 	var ctx = document.getElementById('myChart').getContext('2d');
	var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',

    // The data for our dataset
    data: {
        labels: ['CONSUMIDO', 'POSSO COMER','OBJETIVO'],
        datasets: [{
            label: 'VISÃO DO DIA',
            backgroundColor: ['rgb(217, 83, 79)', 'rgb(240, 173, 78)', 'rgb(92, 184, 82)'],
            borderColor: 'rgba(255, 255, 255, 0.4)',
            data: [tbl.data_1, tbl.data_2, tbl.data_3]
        }]
    },

    // Configuration options go here
    options: {
    	rotation : Math.PI,
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'white',
                fontFamily: "Gothamf",
            }
        }
    }
});

rpierce
Veteran Member
Posts: 255
Joined: 2018-11-26 13:55
Location: Washington State

Re: [TUTORIAL] CHARTS ! pie, lines, doughnuts +

Post by rpierce » 2020-05-26 21:38

I would like to use some of these charts. Can you give a more detailed explanation on how to make them work?

Thank you

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: [TUTORIAL] CHARTS ! pie, lines, doughnuts +

Post by D Oliveira » 2020-05-26 22:33

rpierce wrote:
2020-05-26 21:38
I would like to use some of these charts. Can you give a more detailed explanation on how to make them work?

Thank you
sure, for the chart above use this reference link:

https://www.chartjs.org/docs/latest/cha ... ghnut.html

1st step:

Code: Select all

<canvas id="myChart"></canvas>
2nd step:

Code: Select all

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
3rd step:

Code: Select all

var ctx = document.getElementById('myChart').getContext('2d');

var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

See options in the reference link, my code from the original post shares how to retrieve values from the db on an ajax call and populate the dataset for the chart, hope it helps

Cheers!

Post Reply