[font="Arial,"][size="2"]I am using XAMPP web server.[/size][/font]
[font="Arial,"][size="2"]I have created folder chartexample in htdocs.[/size][/font]
[font="Arial,"][size="2"]Now I want to display database data using chart js.[/size][/font]
[font="Arial,"][size="2"]So I created data.php and bargraph.html files into chartexample folder. Similarly I created app.js file in js folder in chartexample folder.[/size][/font]
[font="Arial,"][size="2"]But when I run this code nothing is display on chart. Below are my code :[/size][/font]
[font="Arial,"][size="2"]I have attached 2 files:[/size][/font]
[font="Arial,"][size="2"]1. data.php[/size][/font]
[font="Arial,"][size="2"]2. bargraph.html[/size][/font]
[font="Arial,"] [/font]
[font="Arial,"][size="2"]And the content of app.js is as follows:[/size][/font]
[font="Arial,"] [/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"]$(document).ready(function(){[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] $.ajax({[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] url: "http://localhost/chartexample/data.php",[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] method: "GET",[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] dataType: "json",[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] success: function(data) {[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] console.log(data);[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] var emp = [];[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] var groups = [];[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"] [/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] for(var i in data) {[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] emp.push(" " + data[i].FirstName);[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] groups.push(data[i].TotalGroups);[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] }[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"] [/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] var chartdata = {[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] labels: emp,[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] datasets : [[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] {[/size][/color][/font]
[font=“Arial, Helvetica Neue, Helvetica, sans-serif”][color="#242729"][size=“2”] label: ‘SHG Groups’,[/size][/color][/font]
[font=“Arial, Helvetica Neue, Helvetica, sans-serif”][color="#242729"][size=“2”] backgroundColor: ‘rgba(200, 200, 200, 0.75)’,[/size][/color][/font]
[font=“Arial, Helvetica Neue, Helvetica, sans-serif”][color="#242729"][size=“2”] borderColor: ‘rgba(200, 200, 200, 0.75)’,[/size][/color][/font]
[font=“Arial, Helvetica Neue, Helvetica, sans-serif”][color="#242729"][size=“2”] hoverBackgroundColor: ‘rgba(200, 200, 200, 1)’,[/size][/color][/font]
[font=“Arial, Helvetica Neue, Helvetica, sans-serif”][color="#242729"][size=“2”] hoverBorderColor: ‘rgba(200, 200, 200, 1)’,[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] data: groups[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] }[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] ][/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] };[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"] [/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] var ctx = $("#mycanvas");[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"] [/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] var barGraph = new Chart(ctx, {[/size][/color][/font]
[font=“Arial, Helvetica Neue, Helvetica, sans-serif”][color="#242729"][size=“2”] type: ‘bar’,[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] data: chartdata[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] });[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] },[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] error: function(data) {[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] console.log(data);[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] }[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"] });[/size][/color][/font]
[font="Arial, Helvetica Neue, Helvetica, sans-serif"][color="#242729"][size="2"]});[/size][/color][/font]
[font="Arial,"] [/font]
[font="Arial,"] [/font]