I have this code,which makes a static bar graph, but i need to pass these values dynamically from a JSON File. So I found this code online:
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Batch1", "Batch2", "Batch3"],
datasets: [{
label: "Percentage",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: [2478, 5267, 734, 784, 433]
}]
},
options: {
legend: {
display: false
},
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
But I need to write for loop for making labels and data dynamic by getting JSON file, so if someone could please help me in writing the code for dynamic data, I am fairly new to this. I have added readTextFile to read JSON data.
The example of JSON file is:
"failed_count": {
"Sr no.": 0,
"Domain": 0,
"Company Name": 0,
"Address": 2,
"Industry": 2,
"Phone Number": 2,
"Zipcode": 2,
"email": 2
},
ThankYou.
What I have tried:
I tried this code:
<script>
window.onload = function () {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
},
axisY: {
title: "Percentage",
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC"
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
itemclick: toggleDataSeries
},
data:
[{
type: "column",
name: "Accuracy",
legendText: "Accuracy",
showInLegend: true,
dataPoints:[
{ label: "Batch1", y: 90 },
{ label: "Batch2", y: 70 },
{ label: "Batch3", y: 60 }
]
},
{
type: "column",
name: "validity",
legendText: "Validity",
axisYType: "secondary",
showInLegend: true,
dataPoints:[
{ label: "Batch1", y: 86 },
{ label: "Batch2", y: 76 },
{ label: "Batch3", y: 66 }
]
},
{
type: "column",
name: "Uniqueness",
legendText: "Uniqueness",
axisYType: "secondary",
showInLegend: true,
dataPoints:[
{ label: "Batch1", y: 100 },
{ label: "Batch2", y: 90 },
{ label: "Batch3", y: 80 }
]
},
{
type: "column",
name: "Completeness",
legendText: "Completeness",
axisYType: "secondary",
showInLegend: true,
dataPoints:[
{ label: "Batch1", y: 100 },
{ label: "Batch2", y: 95 },
{ label: "Batch3", y: 85 }
]
},
{
type: "column",
name: "Consistency",
legendText: "Consistency",
axisYType: "secondary",
showInLegend: true,
dataPoints: [
{ label: "Batch1", y: 90 },
{ label: "Batch2", y: 95 },
{ label: "Batch3", y: 94 }
]
}
]
});
This code works fine but creates a static bar graph, but I need to take labels as well as data from the JSON file.