How to pass JSON data in javascript bar chart?

See more:

Javascript

JSON

HTML5

chart

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.