Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

Pie chart creating from JSON Data in Javascript – Artificial Intelligence

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 ?

Tags:

2

Answers


  1. 0

    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"
        });
   });
    Login or Signup to reply.
  2. 0

    Fix these:

    1. JSON property Count is a string, not an integer

    2. The code is broken, it needs to be fixed

    3. The variable result is not defined anywhere in the <script> tag

    4. 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);
?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search