Pie chart creating from JSON Data in Javascript

Question

I am new in PHP and JavaScript, i need to create a pie chart using JSON data which will be get from the URL. The JSON data is :

[
  {"Domain":"Artificial Intelligence","Count":"46"}, 
  {"Domain":"Data Architecture","Count":"21"}, 
  {"Domain":"Data Science","Count":"50"}, 
]

The code :

<!DOCTYPE html>   
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"> 
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn- na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>

</head>
<body>
<?php
 # Reading JSN Data from URLS
 $jsn_data =    
 file_get_contents("http://localhost:9080/Badges/reporting/badge_json.php");
  <div id="chart"></div>
  <script type="text/javascript">

   $("#chart").igPieChart({
            width: "435px",
            height: "435px",
            dataSource: result, 
            dataValue: "count",
            dataLabel: "Domain",
            labelsPosition: "bestFit"
        });

      });
    <script>

 </body>
 s</html>

But this code does not work. please tell me how do this ?

What error are you getting? What do you get in $jsn_data? Try wrapping your url using urlencode - php.net/manual/en/function.file-get-contents.php — AntG
– AntG, Commented May 22, 2018 at 11:03
Please be more specific than "does not work". Are you getting any errors in the JavaScript console? Did you check the generated page to make sure your php is correct? Is everything good but the chart doesn't show up? — Jared Smith
– Jared Smith, Commented May 22, 2018 at 11:38
i need to create a pi chart using JSON data from URL..I tried many times..but didn't get any result...chart doesn't show up. — Jayalakshmi
– Jayalakshmi, Commented May 22, 2018 at 12:14

War · Accepted Answer · 2018-05-22 11:01:19Z

1

dataLabel: "Badge_SubDomain" doesn't exist in your data source.

Maybe try something like ...

   $("#chart").igPieChart({
            width: "435px",
            height: "435px",
            dataSource: result, 
            dataValue: "count",
            dataLabel: "Domain",
            labelsPosition: "bestFit"
        });
   });

answered May 22, 2018 at 11:01

War

8,6584 gold badges54 silver badges101 bronze badges

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

Comments

The Badak · Accepted Answer · 2018-05-23 04:18:57Z

Fix these:

JSON property Count is a string, not an integer
The code is broken, it needs to be fixed
The variable result is not defined anywhere in the <script> tag
The JavaScript snippet is inside <?php/> tag, move it outside

here's the fixed code:

index.php:

<!DOCTYPE html>   
<html>
    <head>
        <title></title>
        <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></script>
        <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet"></script>

        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
        <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
        <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
    </head>
    <body>
        <div id="chart"></div>
        <script type="text/javascript">
            $.ajax({type:"GET", url: "badge_json.php", success: function(data) {
                $("#chart").igPieChart({
                    width: "435px",
                    height: "435px",
                    dataSource: data, 
                    dataValue: "Count",
                    dataLabel: "Domain",
                    labelsPosition: "bestFit"
                });
            }});
        </script>
    </body>
</html>

and badge_json.php:

<?php
    header('Content-type: application/json');

    // your data goes here
    $data = array(
        ['Domain' => 'Artificial Intelligence', 'Count' => 46],
        ['Domain' => 'Data Architecture', 'Count' => 21],
        ['Domain' => 'Data Science', 'Count' => 50]
    );

    echo json_encode($data);
?>

Collectives™ on Stack Overflow

Pie chart creating from JSON Data in Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related