I am looking to add the word "Ages " to my tooltip title, to represent age groups as per in the chart.
Basically, title should be "Ages 11-20", for example. However, I get "Ages undefined"?
Anyone know why I am getting this issue?
Code (fiddle below):
var ageRangedata = {type: 'bar',
data:{datasets: [
{ data : [0,1,5,2,1,0,0, 0, 0, 0], backgroundColor: 'rgba(255, 209, 240, 0.6)', borderColor: 'rgba(255, 209, 240, 1)', borderWidth: 2, label: 'Female' },
{ data : [1,0,1,1,6,1,0, 1, 0, 0], backgroundColor: 'rgba(81, 187, 245, 0.6)', borderColor: 'rgba(81, 187, 245, 1)', borderWidth: 2, label: 'Male' }],
labels:['0-10','11-20','21-30','31-40','41-50','51-60','61-70', '71-80', '81-90', '90-']},
options: {maintainAspectRatio: false,responsive: true, tooltips: { callbacks: { title: function(tooltipItem, data) { return 'Ages ' + data.labels[tooltipItem.Index]; }}},legend: { display: false }}};
var ageR = document.getElementById("ageRange").getContext("2d");
var chart_ageR = new Chart(ageR, ageRangedata);
Extra points (side question, ignore if you want) to anyone who know what using afterLabel sends the text to just below the label instead of after it (as it sounds like it should be doing)"?
https://jsfiddle.net/unc76c7s/
Try it like this:
return 'Ages ' + tooltipItem[0].xLabel;
In any case your error is quite explicit. You could do a console.log of your tooltipItem in your callback to see if you're using it correctly.
Hope this helps.
Related
I think I'm doing something very basic wrong, or I'm misunderstanding something very fundamental, but I just can't make this respond to mouse events – it's just frozen in its initial view (Code Pen sample):
const {Deck, OrbitView, SimpleMeshLayer, COORDINATE_SYSTEM} = deck;
const {CubeGeometry} = luma;
const view = {
target: [0, 0, 0],
zoom: 0,
rotationOrbit: 145,
rotationX: 65,
minRotationX: -90,
maxRotationX: 90,
minZoom: -10,
maxZoom: 10
}
deck = new Deck({
views: new OrbitView({
orbitAxis: "Y"
}),
layers: [
new SimpleMeshLayer({
initialViewState: view,
controller: true,
data: [
{
position: [-25, 0, 0],
color: [255, 0, 0]
},
{
position: [25, 0, 0],
color: [0, 255, 0]
}
],
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
mesh: new CubeGeometry(),
getPosition: d => d.position,
getColor: d => d.color,
getScale: [20, 20, 20]
})
]
});
Fixed it. I was confused about which properties go where. I left the buggy code here, and fixed it in the Pen, if you want to compare before and after.
Im new to Chart.js and im trying make a line chart where it is possible to click somewhere in the line graph and retrieve the full data object.
This is what my chart looks like right now which is working fine but now I would like to use this my own data
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00',],
datasets: [{
label: 'Cardscans',
data: [
214,
200,
195,
214,
200,
320,
214,
200,
299,
214,
200,
210],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2,
pointStyle: 'circle',
pointRadius: 5,
pointHoverRadius: 15
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}});
So now I want to fill the line chart with the total scans and the pie chart with 'successful' and 'failed'.
I would like to use for example this array of objects:
[
{
id: 1,
date: '01-10-2022',
Scans: {
total: 206151,
times: [
{
time: '12:00 - 13:00',
successful: 12283,
failed: 24,
0: 12184,
1: 55,
2: 22,
3: 12,
4: 8,
5: 2,
}
]
}
},
{
....
}]
What I want to achieve is to fill a pie chart with the 'successful' and 'Failed' data. But I want to do this based on the previous clicked data in the Line chart.
So my question is not about how to click something in the line chart but more about how i fill my line chart with the data above and pull the specific object to fill the other pie chart with.
Thanks in advance
I am try to display a billboardjs bubble chart using javascript and html.
I included the lib in my index.html file as:
src="/lib/billboard.pkgd.js"
The codes are very simple but when ran, I got the "NaN" error.
this.d3Chart = bb.generate({
bindto: "#d3bubbleChart",
data: {
type: "bubble",
label: false,
xs: {
data1: "x1",
data2: "x2"
},
columns: [,
["x1", 10, 20, 50, 100, 50],
["x2", 30, 40, 90, 100, 170],
["data1", [20, 50], [30, 10], [50, 28], [60, 70], [100, 80]],
["data2", [350, 50, 30], [230, 90], [200, 100],[250, 150],[200, 200]]
]
},
bubble: {
maxR: 50
},
grid: { y: { show: true } },
axis: {
x: {
label: { text: "AOV", position: "outer-left"},
height: 50,
tick: { format: function(x) { return ("$"+x);}}
},
y: {
fit: false,
min: {fit: true, value: 0},
max: 450,
labels: "yes",
label: { text: "Conversion Rate", position: "outer-bottom"},
tick: { format: function(x) { return (x+"%");}}
}
}
});
Checkout the allowed data for bubble type from API doc:
For 'bubble' type, data can contain dimension value:
- an array of [y, z] data following the order
- or an object with 'y' and 'z' key value
'y' is for y axis coordination and 'z' is the bubble radius value
I'm seeing from your example, that the first data of data2 contains additional value. Removing that will work fine.
this.d3Chart = bb.generate({
data: {
...
columns: [,
// the length for each bubble should be 2
["data2", [350, 50, 30], ...]
]
How to make touchable area on image [click on position 1 show effect and same effects and different effects show on another position 2, 3, 4, 5.]
Actually when i am Clicking on Particular Position On an image, getting the Corresponding x and y co-ordinates but not getting touchable area on image
Please follow this
we have to create a mapping object similar to this
const MAPPING = [
{
id: '0',
name: 'First Area Name',
shape: 'rectangle',
width: 30,
height: 40,
x1: 80,
y1: 500,
prefill: 'red',
fill: 'blue'
},
{
id: '1',
name: 'Second Area Name',
shape: 'rectangle',
x2: 155,
y2: 540,
x1: 125,
y1: 500
},
]
using of ImageMapper
<ImageMapper
imgHeight={500}
imgWidth={250}
imgSource={imageSource}
imgMap={MAPPING}
onPress={(item, idx, event) => this.onAnyAreaPress(item, idx, event)}
containerStyle={styles.myCustomStyle}
selectedAreaId="my_area_id"
/>
It provided touch points based on mappings we pass.
Please go through this doc for more info.
Library
what are the interpretation values in the"" points assignment. all I want is a "plane jane" line where I can manipulate the length and width. Any help will greatly appreciated.
var line = new Kinetic.Line({
x: 100,
y: 50,
points: [73, 70, 340, 23, 450, 60, 500, 20],
stroke: 'red',
tension: 1
});
The points array is a series of x,y coordinates:
// [73, 70, 340, 23, 450, 60, 500, 20],
{x:73,y:70},
{x:340,y:23},
{x:450,y:60},
{x:500,y:20}
This is your "plain jane" line:
// draw a black line from 25,25 to 100,50 and width of 5
var line = new Kinetic.Line({
points:[25,25, 100,50],
y:100,
stroke: 'black',
strokeWidth: 5
});