can't get data from mysql in highchart

Question

I am creating funnel chart which get data from mysql table using jquery.it works on other all chart of highcharts but In funnel chart it fails. here is my code

index.php

<script type="text/javascript" src="high-js/funnel-chart.js"></script>    
<div id="topcustomer" style="height: 500px;"></div>

funnel-chart.js

$(function () {

    var curcust = new Highcharts.Chart({
        chart: {
            renderTo:'topcustomer',
            type: 'funnel',
            marginRight: 100
        },
        title: {
            text: 'Top 5 Customer',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.0f})',
                    color: 'black',
                    softConnector: true
                },
                neckWidth: '30%',
                neckHeight: '25%'

                //-- Other available options
                // height: pixels or percent
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Current Month'
        }]
    });

    jQuery.get('data.php', null, function(tsv) {
            var lines = [];
            traffic = [];
            try {
                // split the data return into lines and parse them
                tsv = tsv.split(/\n/g);
                jQuery.each(tsv, function(i , line) {
                    line = line.split(/\t/);
                    cust = line[0] ;
                    traffic.push([
                        cust,
                        line[1]
                    ]);
                });
            } catch (e) {  }
            curcust.series[0].data = traffic;
            chart = new Highcharts.Chart(curcust);
        });
});

data.php

$result = mysql_query("SELECT customer, SUM(amount) AS amo FROM `yearly_sales` GROUP BY customer LIMIT 5");
while($row = mysql_fetch_array($result)) {
      echo $row['customer'] . "\t" . $row['amo']. "\n";
}

It doesn't show any error and chart is not generated. is there any error in my code ? please help me out this problem Thanx

adamS · Accepted Answer · 2013-12-20 12:02:37Z

1

edit - the php should be something like

$data = array();
while($row = mysql_fetch_array($result)) {
      $data[] =  array( $row['customer'], $row['amo'] );
}
echo json_encode($data);

this is still a little messy but you could try instantiating the chart after you have the data.

$(function () {

    jQuery.get('data.php', null, function(tsv) {
        var lines = [];
        traffic = [];
        try {
            // split the data return into lines and parse them
            tsv = tsv.split(/\n/g);
            jQuery.each(tsv, function(i , line) {
                line = line.split(/\t/);
                cust = line[0] ;
                traffic.push([
                    cust,
                    line[1]
                ]);
            });
        } catch (e) {  }

        $('#topcustomer').highcharts({
            chart: {
                type: 'funnel',
                marginRight: 100
            },
            title: {
                text: 'Top 5 Customer',
                x: -50
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b> ({point.y:,.0f})',
                        color: 'black',
                        softConnector: true
                    },
                    neckWidth: '30%',
                    neckHeight: '25%'

                    //-- Other available options
                    // height: pixels or percent
                    // width: pixels or percent
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Current Month',
                data: traffic
            }]
        });
    });
});

edited Dec 20, 2013 at 12:02

answered Dec 20, 2013 at 11:29

adamS

6009 silver badges15 bronze badges

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

11 Comments

adamS Over a year ago

what is the result of your query. run data.php and post the result.

Gopal Joshi Over a year ago

Its results like Company1 31150.00 Company2 8480.00 Company3 3603370.50 Company4 (POWER PROD.DIV) 2241750.55 Company5 25657162.13

adamS Over a year ago

looks like the data isn't formatted correctly. are you printing it in JSON format?

adamS Over a year ago

jQuery will try to guess what format the data is when returned in a call to $.get(). json is probably the easiest to format to work with in javascript. your php would be something like echo json_encode($resultArrayOfMySQLQuery);

Gopal Joshi Over a year ago

i have removed last element but problem can't solved..help me to out

|

Collectives™ on Stack Overflow

can't get data from mysql in highchart

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related