Highchart graph retrieve data from json url

Question

I try to create a high chart graph from a url("http://avare.pe.hu/veri2.json") containing json data. But althrough the datas are retrieved (I tested it as writing it to console) The graph is not displayed. May you please help me? My datas are
[{"names":["ADANA","ADIYAMAN","AFYONKARAHİSAR","ANKARA","BALIKESİR","BİLECİK","BURSA","ÇANAKKALE","EDİRNE","İSTANBUL","KIRKLARELİ","KOCAELİ","SAKARYA","TEKİRDAĞ","YALOVA"],"count":[3,1,1,4,162,5,532,79,33,714,50,435,66,81,2]}] ..................

The web page
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pasta HighChart Grafiği</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {       

            var jsonurl = "http://avare.pe.hu/veri2.json";    
            var chart;

            $.getJSON(jsonurl, function (json) {    

                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'pie',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false    
                    },

                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories:[],
                        //type: 'category',
                        labels: {
                            rotation: -45,
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer', size: 160,
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true,


                            dataLabels: {
                                enabled: true, connectorWidth: 2, connectorPadding: 1,
                                format: '<span style="font-size:14px; font-weight:bold">{point.percentage:.1f} %</span>',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: 'Miktar, <b>{point.y:.1f} kton</b>'
                    },    

                    series: [{
                        type:'pie',
                        data: []
                    }]
                }    

              //  options.series[0] = {};
               // options.series[0].name = json[0]['names'];
                // options.series[0].data = json[0]['count'];
                var names = json[0]['names'];
                var count = json[0]['count'];
        var arr=new Array(names.length);
                console.log(names[0]);
               for (i = 0 ; i < name.length; i++) {
                   arr[i] = [names[i],count[i]];
               }
                options.series.data = arr;
                chart = new Highcharts.Chart(options);
            });              
            });   

    </script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Grzegorz Blachliński · Accepted Answer · 2016-08-26 10:52:19Z

1

I have made an example with fixed data, and found one mistake in your code. You wanted to add data to your series, but you forgot that your series object is an array, so you should add it with this code:

  options.series[0].data = arr;

Here you can find an example how your chart will work with this correction: http://jsfiddle.net/worg6jLz/30/

answered Aug 26, 2016 at 10:52

Grzegorz Blachliński

5,24213 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Highchart graph retrieve data from json url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related