billboard.js
billboard.js copied to clipboard
naver
Issue Loading JSON Data Into Pie Chart
Hello, I am having an issue getting my data properly loaded into a pie chart. I am wondering if someone in the community can help me.
I am using this JSON data, a sample of 255 entries:
[
{
"SPECIES": "WHITE TAILED TROPIC",
"COUNT": 5920
},
{
"SPECIES": "TRUMPTER SWAN",
"COUNT": 10512
},
{
"SPECIES": "CASPIAN TERN",
"COUNT": 1556
},
{
"SPECIES": "SAND MARTIN",
"COUNT": 4087
},
{
"SPECIES": "COCKATOO",
"COUNT": 10310
},
On this HTML page:
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='javascript/billboard.css') }}">
<script src="{{ url_for('static', filename='javascript/billboard.js') }}"></script>
<script src="{{ url_for('static', filename='javascript/main.js') }}"></script>
</head>
<body>
<div id="chart"></div>
<script>
const jsonfile = JSON.parse({{json_file|tojson}});
var jsonData = jsonfile;
var data = {};
var sites = [];
jsonData.forEach(function(e) {
var elem = [e.SPECIES];
elem.push(e.COUNT);
sites.push(elem);
})
console.log(sites);
chart = bb.generate({
data: {
columns:sites,
type:'pie'
},
});
</script>
</body>
</html>`
Giving me this result:
https://imgur.com/a/XJRKoxS
Could someone direct me as to what exactly is going wrong with the lack of rendering the pie chart?
Hi @DJT777, is because the data length is overwhelmed and because of that, the legend area is fully occupying the chart area. To solve, you can make legends to be displayed in different areas, rather than within the chart area.
But, even if the legend issue is solved, displaying 255 entries using pie isn't a recommended way to visualize values.
As you can see, it makes harder to understand.
The working example:
- https://jsfiddle.net/netil/o3zmegvn/
