HighCharts issues in Dual axes, line and column ch

Question

I am trying to generate Dual axes, line and column charts of highcharts .I have tried stackoverflows sugesstions but i couldn't find proper solution.I have the data formatted properly but yet the chart is not generate shows blank.I want this type of [link] http://jsfiddle.net/sunman/dwyNz/8/ .In spline line I want to show 'bsp values' and in column I want to show facilities_total. So below i show my code for this graph.I also pointed my error in index.php.

Here is my Index.php

     $(function () {
       $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Project faclityv Rating'
        },
        subtitle: {
            text: 'testing'
        },
        xAxis: [{
            categories: []
        }],
        yAxis: [{ // Primary yAxis
            labels: {
              //  format: '{value} Rs.',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Bsp Cost',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'facility rating',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                //format: '{value} out of 100',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Facility Rating',
            type: 'column',
            yAxis: 1,
            data: [],
            tooltip: {
                valueSuffix: ' out of 100'
            }

        }, {
            name: 'Bsp Cost',
            type: 'spline',
            data: [],
            tooltip: {
                valueSuffix: 'Rs.'
            }
        }]
    });

     $.getJSON("combochart.php", function(json) {

          options.xAxis.categories = json[0]['data'];  /*error here: ReferenceError: options is not defined */
            options.series[0] = json[1];
            options.series[1] = json[2];

            chart = new Highcharts.Chart(options);

        });
    });

Here is my combochart.php

 $query1 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total 
 FROM projects_detail LEFT OUTER JOIN superfac_rating 
 ON projects_detail.project_id= superfac_rating.project_id ");

    $category = array();
    $category['name'] = 'Project';
    while($row1 = mysql_fetch_array($query1)) {
    $category['data'][] = $row1['Project_name'];
    $series1['data'][] = $row1['faci_total'];
   }

   $query2 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total 
   FROM projects_detail LEFT OUTER JOIN superfac_rating 
   ON projects_detail.project_id= superfac_rating.project_id
   LEFT OUTER JOIN cost ON gsuperfac_rating.project_id=cost.project_id  ");

   $series1 = array();
   $series1['name'] = 'Project Name';
   $series2 = array();
   $series2['name'] = 'BSP VALUES';

    while($row2 = mysql_fetch_array($query2)) {
   $series1['data'][] = $row2['faci_total'];
    $series2['data'][] = $row2['bsp'];
    }
     $result = array();
         array_push($result,$category);
         array_push($result,$series1);
         array_push($result,$series1);
          array_push($result,$series2);
       print json_encode($result, JSON_NUMERIC_CHECK);

I think i have problem in json code thats why i can't fetch data for graph.i checked in my console no errors.but i debug this code and json result shows me(json o/p writes in jsfiddle) but graph not appear in browser. i am explained in jsfiddle[link] jsfiddle.net/sunman/rDYvt/9 please check this. give me solution where i am wrong.So please help me and resolve my query.

Answer 1

In your function $.getJSON("combochart.php", function(json) you need to explicitly define what options you want. You are also not acutally setting any data. I am assuming that json[0]['data'] is a list of categories like ['Cat1', 'Cat2',...] and that json[1] and json[2] contain the data like [val1, val2, ...]. If so you need to do something like this:

 $.getJSON("combochart.php", function(json) {
      var theChart = $('#container').highcharts();
      theChart.xAxis[0].setCategories(json[0]['data']);  /*error here: ReferenceError: options is not defined */
        theChart.series[0].setData(json[1]);
        theChart.series[1].setData(json[2]);

        //chart = new Highcharts.Chart(options);

    });
});

Answer 2

Inside your $.getJSON("combochart.php", function(json) you need to setData like this

     theChart.xAxis[0].setCategories(json[0]['data']); 
     theChart.series[0].setData(json[1]['data'], false);
     theChart.series[1].setData(json[2]['data'], true); 

Answer 3

Ok, it's working now...

Paste this in a JSFiddle to see it working...

$(document).ready(function() {
        var json= '[{"name":"Project","data":["Green View","Grand","Arete","Canary Greens","Terra","Beethovens","Ninex City","South Park","Callidora","Lotus","Coban","NCR Green","Kocoon","Estella","NCR One"]},{"name":"Facilities Rating","data":[45,55,55,55,55,55,55,55,55,55,55,55,55,55,55]},{"name":"BSP VALUES","data":[97500,55745,16400,98700,38600,12090,94700,11400,12450,89500,86725,88335,54200,18200,30400]}]'

        var jsobj = JSON.parse(json)
        var firstSeriesData = [];
        var secondSeriesData = [];
        jsobj[1].data.forEach(function(seriesOneData){
            firstSeriesData.push(seriesOneData);  
        })

        jsobj[2].data.forEach(function(seriesTwoData){
            secondSeriesData.push(seriesTwoData);
        })

        $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            type: 'column',
            marginRight: 130,
            marginBottom: 50
        },
        title: {
            text: 'Top 12 Projects Facilities Rating and BSP Costs ',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: jsobj[0].data
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Facilities Rating'
            },
            plotLines: [{
                value: 0,
                width:1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y;
            }
        },
        plotOptions:{
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color:'white'
                }
            }
       },
       legend: {
           layout: 'vertical',
           align: 'right',
           verticalAlign: 'top',
           borderWidth: 0,
           x: -10,
           y:110
       },
       series: [ {
           name:'Facilities Rating',
           data:firstSeriesData, 
           id:'dataseries' 
       },{
           name:'BSP',
           type:'spline',
           data:secondSeriesData
        }]
    })
});

A couple comments.. your JSON had an unidentified character in it. This is what I got from pasting your JSON string.

Notice that red dot in the middle of the JSON.

Also, make sure you load highcharts modules in this order...

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

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

And lastly, you have two series in there, but one of them has values below 100 and the other one has values over 100k. So the first series is not gonna show as it almost 0 compared to the second. You'll have to do something about that.