I'm using Chart.js and I'm looking for help with custom images for each point on a scatter graph. I've tried using a javascript array of images but it isn't working. I'm new to canvas and html5.
What I would like is for each point to be a small profile picture of the user instead of a circle.
An example would be greatly appreciated.
I currently have:
var ctx = document.getElementById("member-graph-scatter");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Miles / Feet',
data: [<?php echo $member_scatter_graph_miles_climbing; ?>],
backgroundColor: "rgba(255,99,132,0.6)",
borderColor: "rgba(75,192,192,1)",
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Feet Climbed (ft)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Miles Ridden (miles)'
},
type: 'linear',
position: 'bottom'
}]
},
showLines: false
}
});
This graph works fine, however, the points are obviously default circles.
According to documentation I need to use:
"If the option is an image, that image is drawn on the canvas using drawImage. Image, Array" viewable at: http://www.chartjs.org/docs/
var yourImage = new Image(),
yourImage.src ='http://your.site.com/your_image.png';
data = {
labels: ['one', 'two', 'three'],
datasets: [{
label: 'Label1',
pointRadius: [0,0,0,0,20],
pointHoverRadius: [0,0,0,0,20],
pointHitRadius: [0,0,0,0,20],
pointStyle: ['', '', '', '', yourImage],
data: [1,2,3]
}, {
label: 'label2',
pointRadius: [0,0,0,0,20],
pointHoverRadius: [0,0,0,0,20],
pointHitRadius: [0,0,0,0,20],
pointStyle: ['', '', '', '', yourImage],
data: [1,2,3]
}]
Here is a more complete example. It shows how you can set styles for individual points or for all points.
var yourImage = new Image()
yourImage.src ='http://your.site.com/your_image.png';
var imageData = {
labels: ['one', 'two', 'three', 'four'],
datasets: [{
label: 'Label1',
pointRadius: [10, 0, 10, 10],
pointHoverRadius: 20,
pointHitRadius: 20,
pointStyle: ['rect', yourImage, 'triangle', 'circle'],
pointBackgroundColor: "rgba(0,191,255)",
data: [1.5, 2.3, 3, 2.5]
}]
}
window.onload = function() {
var lineID = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(lineID, {
type: 'line',
data: imageData,
options: {}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With