The examples on this site are currently tested to work on Phalcon V3.4 and Phalcon Devtools V3.2 Some issues may arise when using later versions.

Please get in touch or post a comment below the post if you encounter a problem.

There are many many great javascript chart plugins which can be used to display data in a wide variety of chart formats. Canvasjs is very easy to use and deploy and can be integrated into your application.

The documentation for canvasjs here https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/ describes a simple vertical bar chart which can be rendered using approximately 30 lines of code. Looking at the example it can be noted that data to be displayed in the chart itself is JSON data of the following format.

[  { label: "apple",
         y: 10  },
   { label: "orange",
         y: 15  },
   { label: "banana",
         y: 25  },
   { label: "mango",
         y: 30  },
   { label: "grape",  
         y: 28  }]

This means that if we can produce data from our application which takes on this format we should be able to present it in chart form relatively easily. Note that the "y" data is numeric and therefore presented without quotes around it.

As with the fullCalendar example, a simple way to produce data in a specific JSON format is to create a mysql view which contains exactly those column headers.

For the purposes of the example we will create a chart which shows the total number of bookings created by each member of the tennis club. A script to create the tennis club database is available on the 3rd post of the getting started section of this website here. If you haven't already done so you should scaffold each of the three tables in the tennisClub database. (The script to create these is in the Scaffolding post of the getting started section)

Create a mysql view on the database called datapoints using the following mysql code:

create view datapoints as 
select concat(firstname, " ", surname) as label, count(booking.memberid) as y 
from member, booking
where member.id=booking.memberid
group by label

Now create a model class based on this view:

phalcon model datapoints --get-set

The following function can be included in /app/controllers/BookingController.php

public function jsonChartDataAction()
{
	$this->view->disable();
	$dataPoints = Datapoints::find();
	$this->response->resetHeaders();
	$this->response->setContentType('application/json', 'UTF-8');
	$this->response->setContent(json_encode($dataPoints,JSON_NUMERIC_CHECK));
	return $this->response->send();
}
Note the inclusion of JSON_NUMERIC_CHECK as an argument to json_encode. This ensures that the numeric data which will be used to draw the bars on the bar-chart will be produced without quotes around it. Now if you visit the URL corresponding to the jsonChartDataAction() function http://localhost/tennisClub/booking/jsonChartData you will see json data representing the total number of bookings for each member of the club

Now we need a controller function which will call the view which will display the chart. This can be empty. Add the following code to /app/controller/BookingController.php
public function bookingsChartAction()
{
	
}

In order to render the chart we need to first get the JSON. For this we use jquery $.getJSON. getJSON uses an asynchronous call to get the JSON data. This means that the code will continue to execute after it makes the request for the JSON data. To  manage this we pass a second argument to getJSON which is a function which will be called when the JSON data has been obtained. If you don't do it this way your code will continue to execute and jquery will attempt to draw the graph before the  JSON data is returned. The function called on completion of $.getJSON will pass the data it retrieves as an argument to the function. In this case we have called it data. To see all this working create a view file in /app/views/booking called bookingsChart.phtml which will be called by the bookingsChartAction() function. Include the following code.

<?php echo $this->getContent() ?>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
$.getJSON('<?php echo $this->url->getBaseUri() . 'booking/jsonChartData'?>', function( data ) {
		var chart = new CanvasJS.Chart("chartContainer", {
		data: [              
		    {
			type: "column",
			dataPoints: data,
		    }
		]
	});
	chart.render();
});

</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

Now when you visit http://localhost/tennisClub/booking/bookingsChart you will see something like this