Displaying chart |
Not able to display the chart in view. Below is model view controller. thanks in advance for any help.
Controller: <?php defined('BASEPATH') OR exit('No direct script access allowed'); class showchart extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('data'); $this->load->helper('url_helper'); } public function index() { $this->load->view('chart'); } public function data() { $data = $this->data->get_data(); $category = array(); $category['name'] = 'Ext'; $series1 = array(); $series1['name'] = 'Incoming'; $series2 = array(); $series2['name'] = 'Outgoing'; foreach ($data as $row) { $category['data'][] = $row->ext; $series1['data'][] = $row->incoming; $series2['data'][] = $row->outgoing; $result = array(); array_push($result,$category); array_push($result,$series1); array_push($result,$series2); $ctg=$category['data']; $this->get_data['call_data'] = json_encode($ctg, JSON_NUMERIC_CHECK); print json_encode($result, JSON_NUMERIC_CHECK); } $this->load->view('chart'); } } ?> Model: <!--?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');</p--> <?php class Data extends CI_Model { function __construct() { // Call the Model constructor parent::__construct(); } function get_data() { $this->db->select('ext,incoming,outgoing'); $this->db->from('call_data'); $query = $this->db->get(); return $query->result(); } } ?> View: <!DOCTYPE html> <html> <head> <title>Highchart</title> </div> <script src="http://localhost/dashboard/assets/js/jquery-3.1.1.min"></script> <script src="http://localhost/dashboard/assets/js/highcharts.js"></script> <script src="http://localhost/dashboard/assets/js/exporting.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'bar', marginRight: 130, marginBottom: 25 }, title: { text: 'Project Requests', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { categories: [] }, yAxis: { title: { text: 'Requests' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] } var jqxhr = $.getJSON('http://localhost/dashboard/index.php/showchart/data',function(csv) { console.log( "success" ); options.xAxis.categories = json[0]['data']; options.series[0] = json[1]['result'] options.series[1] = json[2]['result']; }); var chart = new Highcharts.Chart(options); }); </script> </head> <body> This <div class="row"> <div id="container" style="width: auto; height: 400px; margin: 0 auto"> </div> </div> </body> </html>
Hi
I assumed that your data model returns correct json then the way I look at this portion Code: var jqxhr = $.getJSON('http://localhost/dashboard/index.php/showchart/data',function(csv) { Try to add this line below console.log('success'), i.e console.log(JSON.stringify(csv)); then this shows what return back as csv. This should help you to further check data and correctly serialize them out. Also it seems like you just equate your option to 'json' out of nowhere, i.e Code: ... Regards |
Welcome Guest, Not a member yet? Register Sign In |