highcharts上的数据位置

Question

I'm using codeigniter with highcharts, but when I fetch the data from database, it only appears like this:

What do you think is the problem?

controller

public function tabular()
    {
        $data['pizzas'] = $this->user_model->tabular();
        //var_dump($this->user_model->tabular());

        $this->load->view('template/header');
        $this->load->view('template/menubar');
        $this->load->view('template/highcharts',$data);
        $this->load->view('template/footer');

    }

model

public function tabular() {
        $this->db->select('products.name AS name, SUM(order_details.price) AS total');
        $this->db->from('order_details');
        $this->db->join('products', 'products.prod_id = order_details.prod_id', 'LEFT');
        $this->db->group_by("products.prod_id");
        $query = $this->db->get();
        foreach ($query->result() as $row){
            $results[] = array(
                'name' => $row->name,
                'total' => (float) $row->total
            );

        }
        return $results;
    }

view

Highcharts.chart('chart-C', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Browser market shares. January, 2015 to May, 2015'
        },
        subtitle: {
            text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }

        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: 'P{point.total:.2f}'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>P{point.total:.2f}</b> of total<br/>'
        },

        series: [{
            name: 'Sales',
            colorByPoint: true,
            data: <?php echo json_encode($pizzas); ?>
        }],
    });

json_encode var_dump

string '[{"name":"pizza burger","total":870},{"name":"buffalo chicken","total":1085},{"name":"bacon mushroom","total":165},{"name":"sausage mania","total":450},{"name":"beef shawarma","total":1575},{"name":"yummy hotdog","total":230},{"name":"oreo pina","total":240},{"name":"tuna garlic","total":130},{"name":"all hungarian","total":135},{"name":"beef pepperoni","total":135},{"name":"hawaiian","total":480}]' (length=401)

Answer 1

You can process your php data <?php echo json_encode($pizzas); ?> in js as

var chartData=<?php echo json_encode($pizzas); ?>
var category = [];
var data = [];
for (var i = 0; i < chartData.length; i++) {
  category.push(chartData[i].name);
  data.push(chartData[i].total);
}

Now category is array containing categories for xAxis of highcharts and data is array containing data for series

these can be used in highcharts as

xAxis: { categories: category, },

and

series: [{ name: "Order", data: data }],

See the working code below

var chartData = [{
  "name": "pizza burger",
  "total": 870
}, {
  "name": "buffalo chicken",
  "total": 1085
}, {
  "name": "bacon mushroom",
  "total": 165
}, {
  "name": "sausage mania",
  "total": 450
}, {
  "name": "beef shawarma",
  "total": 1575
}, {
  "name": "yummy hotdog",
  "total": 230
}, {
  "name": "oreo pina",
  "total": 240
}, {
  "name": "tuna garlic",
  "total": 130
}, {
  "name": "all hungarian",
  "total": 135
}, {
  "name": "beef pepperoni",
  "total": 135
}, {
  "name": "hawaiian",
  "total": 480
}]
var category = [];
var data = [];
for (var i = 0; i < chartData.length; i++) {
  category.push(chartData[i].name);
  data.push(chartData[i].total);
}
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'column chart'
  },
  xAxis: {
    categories: category,
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}'
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  legend: false,
  series: [{
    name: "Quantity",
    data: data
  }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</div>