score:3
i messed around with it and got it working (at least for me)
the notable parts i changed were the ajax:
$.ajax({url:"data.json",datatype:"json"})
.fail(function(){alert("im a failure")})
.done(function(data){
var mydata = (data);
and i took the end part out of the "window.onload", which wasn't neccesary since you'd already declared the canvas.
i guess i'll dump all the code i used
<script src="chart.js"></script>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="chartcanvas">
<canvas id="canvas"></canvas>
<br>
</div>
<script type="text/javascript">
$.ajax({url:"data.json",datatype:"json"})
.fail(function(){alert("im a failure")})
.done(function(data){
var mydata = (data);
console.log(mydata[0].jaar);
array.prototype.mapproperty = function(property) {
return this.map(function (obj) {
return obj[property];
});
};
// example: mydata.mapproperty('rank') to get an array of all ranks
linechartdata = {
labels : mydata.mapproperty('jaar'),
datasets : [
{
label: "my first dataset",
fillcolor : "rgba(220,220,220,0.2)",
strokecolor : "rgba(220,220,220,1)",
pointcolor : "rgba(220,220,220,1)",
pointstrokecolor : "#fff",
pointhighlightfill : "#fff",
pointhighlightstroke : "rgba(220,220,220,1)",
data : mydata.mapproperty('verbruikingb')
}
]
};
//window.onload = function(){
console.log("cheerio")
var ctx = document.getelementbyid("canvas").getcontext("2d");
window.myline = new chart(ctx).line(linechartdata);
//}
});
Source: stackoverflow.com
Related Query
- Drawing line chart in chart.js with json response
- Drawing chart.js with external JSON
- Drawing line chart in chart.js with json data
- Html5 web page with chartjs: loading an external json file and create a line chart
- How to use JSON data in creating a chart with chartjs?
- How to display chart using Chartjs with JSON data in Laravel
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- Chart js with json file from url
- Parsing values from external JSON file with Chart.js
- drawing bar chart with Chart.js
- Chart.JS Multiline Chart with unknown numbers of Lines from JSON
- what is wrong with my code ? java script chart position
- drawing line chart with chartjs
- Chart.js - creating time series freqency chart with JSON data
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- Plotting multiple JSON subobjects in Chart.js Line chart ( with Time as x-axis)
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- drawing bar chart with chart.js jQuery
- Dynamic Pie Chart With Json Data using chart.js
- Drawing chart with Chart.js filled with data gotten per JsonRPC
- Drawing a doughnut chart with columns inside to represent hourly stats in chart.js
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to prevent first/last bars from being cut off in a chart with time scale
- ChartJS - Draw chart with label by month, data by day
- Horizontal stacked bar chart with chart.js
- line chart with {x, y} point data displays only 2 values
- Vertical stacked bar chart with chart.js
- Display line chart with connected dots using chartJS
More Query from same tag
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to handle epic long text at y-axis for angular-chart.js?
- Chartjs tick color different at zero
- Try to change style in current month in chartJS
- How to make ChartJS not cut off tooltips?
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- Chart js 2.x renders the canvas invisible
- stepsize x-axe with time string labels
- JSON Data in javascript
- How to create a chart-js pie chart with PHP data variables?
- Creating multiple charts and selecting them later
- Chart.js : Multiple colors for tooltipFontColor
- I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels
- How to solve Uncaught ReferenceError in console?
- How to apply each color to each dataset
- How to add text to chart.js data?
- Angular-chartjs expression/value inside canvas class
- Create data in data with Chartjs
- Charts.js: changing xAxis time attribute with function
- Chartjs custom dynamic legend overflowing
- Vertical scrubber line using chartjs
- Chart JS, Choose different Y-axis for different datasets
- How to manipulate different charts by angular
- call Column that is complex in query
- diplay barchart in a <div>
- chart.js Doughnut anticlockwise animation
- Utils package in Chart.js
- How to set start value as “0” in Chart.js Laravel
- How do I selecting a date range (like onClick but drag/select)
- ChartJs + ie11 doesn't work