I don't know how to set series in x, y value from mysql database in High Charts. I want if data from my database show (umur:10 and berat: 5) then the node at x= 10 and y= 5 but i want x axis is number from 0 until 60. Please solve the problem.
Grafik_model.php (Model)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class grafik_model extends CI_Model{
function __construct()
{
parent::__construct();
$this->load->database();
}
function tampil_grafik($id)
{
$q = $this->db->query("select a.*, b.* from balita a LEFT JOIN user b on a._id_user=b.u_id where b.u_id='".$id."' order by _umurbulan" );
return $q;}}
Grafik.php (Controller)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Grafik extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper(array('url'));
$this->load->library('Highcharts');
$this->load->model('grafik_model');
}
function index()
{
$id= $this->session->userdata('u_id');
$data=array();
foreach($this->grafik_model->tampil_grafik($id)->result_array() as $row)
// $data[] = (int) $row['_berat'];
$data[] = array($row['_umurbulan'], (int) $row['_berat']);
$this->load->view('grafik',array('data'=>$data));}}
Grafik.php (View)
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 1350px; height: 1000px; margin: 0 auto"> </div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'line'
};
var title = {
text: 'Grafik Pertumbuhan Balita'
};
var subtitle = {
text: 'Berdasarkan umur dan berat'
};
var xAxis = {
min: 0,
max: 60,
tickInterval: 1,
reversed: false,
title: {
enabled: true,
text: 'Umur (dalam bulan)'
},
labels: {
formatter: function () {
return this.value;
}
},
maxPadding: 0.5,
showLastLabel: true
};
var yAxis = {
min: 0,
max: 60,
tickInterval: 1,
title: {
text: 'Berat (kg)'
},
labels: {
formatter: function () {
return this.value ;
}
},
lineWidth: 2
};
var legend = {
enabled: false
};
var tooltip = {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.y}bulan:{point.x} kg: '
};
var plotOptions = {
line: {
marker: {
enable: false
}
}
};
var series= [{
name: 'Pertumbuhan Balita',
data: <?php echo json_encode($data); ?>
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.legend = legend;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>
