Welcome Guest, Not a member yet? Register   Sign In
Highchart and json with codeigniter
#1

Hi

I am using Highchart with Codeigniter. I am displaying project requests for different months.

The Graph is displaying fine but the x-axis values are showing numneric values (0,1,2...) instead of month names. Here is my controller code:

public function data()
{

$data = $this->project->get_data();

$ab = array();
$category['name'] = 'Category';

$series1 = array();
$series1['name'] = 'WordPress';

$series2 = array();
$series2['name'] = 'Code Igniter';

$series3 = array();
$series3['name'] = 'Highcharts';

foreach ($data as $row)
{
   $category['data'][] = $row->month;
$series1['data'][] = $row->wordpress;
$series2['data'][] = $row->codeigniter;
$series3['data'][] = $row->highcharts;
}

$result = array();
$result1 = array();
array_push($result1,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);

$this->view_data['ctg'] = json_encode($result1, JSON_NUMERIC_CHECK);
$this->view_data['series_data'] = json_encode($result, JSON_NUMERIC_CHECK);
$this->load->view('chart_high', $this->view_data);
}


Given below is the chart_high view:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Line Chart</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var test =
$(function () { 
                    $('#container').highcharts({
           chart: {
               renderTo: 'container',
               type: 'column',
               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;
               }
           },
          credits: { enabled: false },
           legend: {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'top',
               x: -10,
               y: 100,
               borderWidth: 0
           },
           
           series: <?php echo $series_data ?>
        });
                });

</script>
<script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>js/highcharts.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>js/exporting.js"></script>
  
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

If I hardcode the categories as ["January","February"], then the  x-axis values are showing as January, February etc like the way I want.

Please help me in this regard.

Thanks in advance,
Reply
#2

See the following discussion thread. Hopefully it helps.
http://stackoverflow.com/questions/29233...odeigniter
Patel Dhiren
Reply
#3

(06-21-2016, 10:59 AM)Dheeren Wrote: See the following discussion thread. Hopefully it helps.
http://stackoverflow.com/questions/29233...odeigniter

I have solved it using the code:

$ctg=$category['month'];

$this->view_data['month'] = json_encode($ctg, JSON_NUMERIC_CHECK);

Then in chart_high view, I used

xAxis: {
               categories: <?php echo $month ; ?>
           },

Now the months are displayed in x-axis as January, February, March..etc. I have searched in many forums including stackoverflow but didnt find any solution.
I am posting as it may help someone in future.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB