Javascript variable with Comma separated values not working in HighChart

Question

I have been using highchart for graphical display of my records. HighChart works fine with my php variable with comma separated values in it. However, I couldn't get this done using javascript variable with comma separated values. Please help me with this. Your help is much appreciated. Thanks. My codes are shown below.

Javascript

 <script type="text/javascript">

    var res = [];
    var data_graph = [];

        function show_graphics(){

            $.post("<?php echo base_url(); ?>main_controller/show_monthly_analytics_ajax", '', function(data){

                  if( data.notify == "Success" ){

                    Object.keys(data.upload_data).forEach(function(key) {
                        res.push(data.upload_data[key]);
                    });

                    data_graph = res.join(",");
                    console.log(data_graph );

                  } else{

                    console.log(data.notify);

                  }                  

            },'json');


            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: 75,
                    options3d: {
                        enabled: true,
                        alpha: 10,
                        beta: 25,
                        depth: 70
                    }
                },
                title: {
                    text: '3D chart with null values'
                },
                subtitle: {
                    text: 'Notice the difference between a 0 value and a null point'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    categories: Highcharts.getOptions().lang.shortMonths
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                series: [{
                    name: 'Sales',
                    data: [data_graph]
                }]
            });

        }

</script>

When I look at the console, the values being showed of the variable array data_graph seems right but the chart never showed a graph. What is the problem with this?

Modification

<script type="text/javascript">

    var res = [];


        function show_graphics(){

            $.post("<?php echo base_url(); ?>main_controller/show_monthly_analytics_ajax", '', function(data){

                  if( data.notify == "Success" ){

                    Object.keys(data.upload_data).forEach(function(key) {
                        res.push(data.upload_data[key]);
                    });

                    //aa = res.join(",");
                    console.log(res);

                  } else{

                    console.log(data.notify);

                  }                  

            },'json');


            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: 75,
                    options3d: {
                        enabled: true,
                        alpha: 10,
                        beta: 25,
                        depth: 70
                    }
                },
                title: {
                    text: '3D chart with null values'
                },
                subtitle: {
                    text: 'Notice the difference between a 0 value and a null point'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    categories: Highcharts.getOptions().lang.shortMonths
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                series: [{
                    name: 'Sales',
                    data: [res]
                }]
            });

        }

</script>

Response

leo.fcx · Accepted Answer · 2015-08-26 03:25:34Z

1

The data part/section for series property should be an array of numbers.

According to your explanation, your implementation is as if you would have the following:

series: [{
    name: 'Sales',
    data: ['1, 2, 1, 0'] // this is an array with one string element, which is wrong
}]

But, it should be:

series: [{
    name: 'Sales',
    data: [1, 2, 1, 0]
}]

See JSfiddle demo here

EDIT

Besides the change that I suggested above, consider that the $.post call is an async execution. Then, you should only draw the chart when data is 'ready' by moving $('#container').highcharts(...) block inside the success callback as follows:

if( data.notify == "Success" ){

    Object.keys(data.upload_data).forEach(function(key) {
        res.push(data.upload_data[key]);
    });

    $('#container').highcharts({
        ...
        ...
        series: [{
            name: 'Sales',
            data: res
        }]
    });

} else { 
    console.log(data.notify);
}

edited Aug 26, 2015 at 3:25

answered Aug 26, 2015 at 2:00

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eli Over a year ago

I tried to put directly res variable in data section, data[res] but still not working. The res variable value looks like this, [0,0,0,0,5,3,0,0].

leo.fcx Over a year ago

Is your web service available so I can take a look? Or probably you could post the response to see how it looks like

Collectives™ on Stack Overflow

Javascript variable with Comma separated values not working in HighChart

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related