score:0
Accepted answer
figured it out myself after following nagib's comment link.
just leaving it here in case anyone else is trying the same thing.
$(document).ready(function () {
$.ajax({
type: "get",
url: "/?handler=agedata",
contenttype: "application/json; charset=utf-8",
datatype: "json",
success: function (response) {
var datatf = response.below35;
var datafn = response.below49;
var dataff = response.below55;
var dataso = response.below60;
var datasf = response.below65;
var dataasf = response.above65;
var cage = document.getelementbyid('agechart').getcontext('2d');
var agechart = new chart(cage, {
type: 'pie',
data: {
labels: ['< 36', '36 - 49', '50 - 55', '56 - 60', '61 - 65', '> 65'],
datasets: [{
label: 'age group',
data: [datatf, datafn, dataff, dataso, datasf, dataasf],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
options: {
scales: {
y: {
beginatzero: true
}
}
}
});
}
});
});
and in my handler, the variables are the same as the one in the question and called it with jsonresult {...below35 = lessthreefive...}
Source: stackoverflow.com
Related Query
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- How to make a chart with chartjs and Angular?
- how to create bar chart with group and sam color for each group using chart.js?
- How to make chart which has both positive and negative value, starts with 0 - x axis
- How to display data labels outside in pie chart with lines in ionic
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to make a chart with an associative array with chart.js?
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- ChartJS: how to make a bar chart with a horizontal guideline:
- How to use JSON data in creating a chart with chartjs?
- How to display chart using Chartjs with JSON data in Laravel
- how to display multiple sum with chart js and laravel?
- Chart JS - How to output JSON objects into PIE variant
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- chart.js pie chart - how to update dataset with smooth transition
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How to make dynamic chart using Vue component with chart-js
- How to make Chart.js Bubble chart with ng2-chart?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How do you make a progressive line chart with time as the X axis?
- How can I make streaming chart with react?
- How to make chartjs pie chart responsive
- How to group smaller Pie Chart slices together to Improve Readability in chartjs
- Map with pie chart and label
- How to make dynamic chart js using JSON in Codeigniter?
- How to properly feed data to ChartJS with different number of x(labels) and y(data) points
- How to make chart with chartjs.?
- how to make scrollable the legends of pie chart ( chart js )
More Query from same tag
- Is it possible to add a custom font to chart js?
- Chart.js not showing in my view
- ionic display chartjs data from json http request
- Is it possible to add a click event in chart.js that directs you to a url?
- Chart.Js - Background Bar in Chart Bar
- ChartJS how to sync animations when page loads
- Custom script tag in index.html is removed on each build in Ionic 2 RC.0
- Chartjs Options are ignored
- How to display grid lines (without showing label) between each ticks?
- Chart.js how to rewrite x for webAPP
- Printing Chart using ngPrint and tc-chartjs
- Radar chart - show values near vertices in chart.js
- Chart.js with dual axis on bar and line graph
- ChartJS Arrays Acting as One Item
- Chart.js - Connect two datasets in a line chart at same y value
- angular-chart add horizontal line
- How to align ticks label in chartJS 3.x?
- NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
- Bar Graph, chart.js PHP Will Not Load
- How to add legend on chart js annotation
- creating a chart.js scatter graph with variables for data
- How do I implement the 'autoskip' feature in chartjs?
- Chart.js disappears on Android
- Chart.js bar chart labels do not valign
- ChartJS: datalabels: show percentage value in Pie piece
- Grouping the object by key for Chartjs bar chart
- How to use Real time chart in react?
- ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
- How to set default colour for bars in Chart.js
- Chart.js : Multiple colors for tooltipFontColor