display pi chart using json data from URL

Question

I am new in PHP and Javascript. i need to create pi chart from JSON which should be read from URL.

I tried to create pi chart to directly given json data and it works. My code is given below :-

<!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>
<style type="text/css">
     #chart { position: relative;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
}   
</style>
<div id="chart"></div>
<script type="text/javascript">
$(function () {
        var data = [
            { "Badge_SubDomain": "Data Architecture", "count": "1333"},
            { "Badge_SubDomain": "Data Integration", "count": "849"},
            { "Badge_SubDomain": "Data Platform", "count": "250"},
                 ];

        $("#chart").igPieChart({
            width: "435px",
            height: "435px",
            dataSource: data, 
            dataValue: "count",
            dataLabel: "Badge_SubDomain",
            labelsPosition: "bestFit" });
});
</script>
</body>
</html>

The JSON data from the URL is :-

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

I need to read data from URL instead of direct giving value. The 'Count' in JSON data is in string format and it needs to change float format for plotting pi chart. How can i change code for it?

"I need to read data from URL instead of direct giving value" Okay, so what have you tried to accomplish this? — Patrick Q
– Patrick Q, Commented May 22, 2018 at 12:45
Possible duplicate of Pie chart creating from JSON Data in Javascript — Jared Smith
– Jared Smith, Commented May 22, 2018 at 12:53
I'm not sure why you posted the same question twice, but you need to delete at least one of them — Jared Smith
– Jared Smith, Commented May 22, 2018 at 12:53

Neethu George · Accepted Answer · 2018-05-22 12:57:08Z

-1

$.get("url", function(data, status){

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

finalArray = data.map(data => parseFloat(data.Count));

}); Result = [46, 21, 50]

edited May 22, 2018 at 12:57

answered May 22, 2018 at 12:50

Neethu George

6276 silver badges8 bronze badges

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

1 Comment

Jared Smith Over a year ago

The user posted the same question twice. I'd post your answer on the first one, this one will almost certainly be closed/deleted. See the dupe link in the comment on the question.

Collectives™ on Stack Overflow

display pi chart using json data from URL

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related