Jump to content

[Help/Request] Using Chart.js to replace default charts.


TechAttax
 Share

Recommended Posts

I've never done it using Charts.js, but I've used Morris Charts before.

- You could probably tweak it for charts.js

What I did was put the following in

core/modules/Pilots/Pilots.php

public function morrisstatsbymonthdata()
 {

		 $data = PIREPData::getIntervalDataByMonth(array('p.pilotid'=>Auth::$userinfo->pilotid), 3);
		 header("Content-type: application/json");
		 echo json_encode($data);

 }

public function morrisstatsaircraftdata($pilotid)
 {

		 $data = StatsData::PilotAircraftFlownCountsMorris($pilotid);
		 header("Content-type: application/json");
		 echo json_encode($data);

 }

core/common/StatsData.class.php

public static function PilotAircraftFlownCountsMorris($pilotid)
{
$key = 'ac_flown_counts_1_'.$pilotid;

$counts = CodonCache::delete($key);

if($counts === true)
{
//Select aircraft types
$sql = 'SELECT a.name AS label, COUNT(p.aircraft) AS value, SUM(p.flighttime) AS hours
 FROM '.TABLE_PREFIX.'pireps p, '.TABLE_PREFIX.'aircraft a
 WHERE p.aircraft = a.id AND p.pilotid='.intval($pilotid).'
 GROUP BY a.name';

$counts = DB::get_results($sql);
CodonCache::write($key, $counts, 'medium');
}

return $counts;
}

If your using phpvms 5.5.x

core/common/StatsData.class.php

public static function PilotAircraftFlownCountsMorris($pilotid)
{
$key = 'ac_flown_counts_1_'.$pilotid;

$counts = CodonCache::delete($key);

if($counts === false)
{
//Select aircraft types
$sql = 'SELECT a.name AS label, COUNT(p.aircraft) AS value, SUM(p.flighttime) AS hours
   FROM '.TABLE_PREFIX.'pireps p, '.TABLE_PREFIX.'aircraft a
   WHERE p.aircraft = a.id AND p.pilotid='.intval($pilotid).'
   GROUP BY a.name';

$counts = DB::get_results($sql);
CodonCache::write($key, $counts, 'medium');
}

return $counts;
}

And here's my core/templates/profile_stats.tpl/php (should really be in lib/skins/XXX/profile_stats.tpl/php)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<h3>Your Stats</h3>
<?php
/*
Added in 2.0!
*/
$chart_width = '800';
$chart_height = '250';
/* Don Not need to change anything below this here */
?>
<div align="center" style="width: 100%;">
<div id="monthdata" style="height: 250px;"></div>
</div>
<br />
<div align="center" style="width: 100%;">
<div id="aircraftdata" style="height: 250px;"></div>
</div>
<script type="text/javascript">
var json = (function () {
		 var json = null;
		 $.ajax({
				 'async': false,
				 'global': false,
				 'url': "<?php echo actionurl('/pilots/morrisstatsbymonthdata');?>",
				 'dataType': "json",
				 'success': function (data) {
						 json = data;
				 }
		 });
		 return json;
 })
 ();

new Morris.Line({
// ID of the element in which to draw the chart.
element: 'monthdata',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: json,
// The name of the data record attribute that contains x-values.
xkey: 'ym',
// A list of names of data record attributes that contain y-values.
ykeys: ['total'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Flights']
});
</script>
<script type="text/javascript">
var json = (function () {
		 var json = null;
		 $.ajax({
				 'async': false,
				 'global': false,
				 'url': "<?php echo actionurl('/pilots/morrisstatsaircraftdata/'.Auth::$userinfo->pilotid.'');?>",
				 'dataType': "json",
				 'success': function (data) {
						 json = data;
				 }
		 });
		 return json;
 })
 ();

Morris.Donut({
element: 'aircraftdata',
data: json
});
</script>

The end result http://imgur.com/wyb2lUz

Thanks to Vangelis for providing most of the base code.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
  • Moderators

Hey all,

For some reason, I couldn't get the PIREP chart to show.  The aircraft one works perfectly, but not the PIREP line graph. Going to /action.php/pilots/morrisstatsbymonthdata does not show populated JSON data either.

I am on phpvms 5.5.2 on php5.6

Edit: Ignore.  It was because I was running it on a local copy of my site and the database is older than a month, hence no data for the last month! Duh...

Link to comment
Share on other sites

  • 1 year later...
8 hours ago, ncd200 said:

Sorry to open an old topic, but is it also possible to show this on the public profile?

It is showing but on all the pilots the same numbers

Which graph are you looking to get? For the donut, you would have to change this

'url': "<?php echo actionurl('/pilots/morrisstatsaircraftdata/'.Auth::$userinfo->pilotid.'');?>",

to this

'url': "<?php echo actionurl('/pilots/morrisstatsaircraftdata/'.$pilot->pilotid.'');?>",

 

And similarly, for the monthly chart, you would have to replace this

public function morrisstatsbymonthdata()
 {
		 $data = PIREPData::getIntervalDataByMonth(array('p.pilotid'=>Auth::$userinfo->pilotid), 3);
		 header("Content-type: application/json");
		 echo json_encode($data);
 }

with this

public function morrisstatsbymonthdata($pilotid)
 {
		 $data = PIREPData::getIntervalDataByMonth(array('p.pilotid'=> DB::escape($pilotid)), 3);
		 header("Content-type: application/json");
		 echo json_encode($data);
 }

And this

$.ajax({
    'async': false,
    'global': false,
    'url': "<?php echo actionurl('/pilots/morrisstatsbymonthdata');?>",
    'dataType': "json",
    'success': function(data) {
        json = data;
    }
});
return json;

Replace with this

$.ajax({
    'async': false,
    'global': false,
    'url': "<?php echo actionurl('/pilots/morrisstatsbymonthdata/'.$pilot->pilotid.'');?>",
    'dataType': "json",
    'success': function(data) {
        json = data;
    }
});
return json;

and I would think that would work.

Link to comment
Share on other sites

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.

Loading...
 Share

×
×
  • Create New...