duanla1996
duanla1996
2016-03-17 08:05

如何从mysql数据库中设置具有X和Y值的高图表系列

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dtip91401 dtip91401 5年前

    A very broad question. If I'm not wrong you are trying to plot a line chart with x-axis as age (umur) from 1 to 60 against y-axis as the average weight (berat) of an age. I can see you are encountering a few problems here.

    1. Identify a type of Chart that suits your requirement. I would suggest to create a Line chart. Take a look at this link and get yourself familiar with Highcharts API.

    2. You need to find yourself a way to query the average weight of age between 1 to 60 from your database. Community here has no clue about your data structure. Refer to the link in step1, click on VIEW OPTIONS button and focus on xAxis and series field. You need to construct two JSONs as following.

    For your case, JSON format of xAxis would be something this which lists the age from 1 to 60.

    xAxis: {
    categories: ['1', '2', '3', '4', '5', ...., '59', '60']
}

    Whereas series is as below which lists out the weights

    series: [{
    name: 'Weight',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, ..., 50.2, 55.3]
}]

    So in the end each array of xAxis and series.data has total of 60 elements and their values are corresponding to each other.

    1. Refer to the link in step1 and create the Line chart accordingly in your View.
    点赞 评论 复制链接分享
提交

为你推荐