While hovering on the chat it showing the total orders and it is fine. It is showing because list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option). I want to show the amount as well while hovering on the chat and not adding it on the ykeys.
Below is my code please check.
var order_graph_chat = [
{order_date: '01', count: 10, amount: 9000},
{order_date: '02', count: 75, amount: 6500},
{order_date: '03', count: 50, amount: 4000},
{order_date: '04', count: 75, amount: 6500},
{order_date: '05', count: 50, amount: 4000},
{order_date: '06', count: 75, amount: 6005},
{order_date: '07', count: 10, amount: 9000},
{order_date: '08', count: 75, amount: 6500},
{order_date: '09', count: 50, amount: 4000},
{order_date: '10', count: 75, amount: 6500},
{order_date: '11', count: 50, amount: 4000},
{order_date: '12', count: 75, amount: 6005},
];
$(function () {
"use strict";
//BAR CHART
var bar = new Morris.Bar({
element: 'bar-chart',
resize: true,
data: order_graph_chat,
barColors: ['#00a65a', '#f56954'],
xkey: 'order_date',
ykeys: ['count'],
labels: ['Total Orders'],
hideHover: 'auto'
});
});
Below is the image of that chat with hovering on it. I just want to show the amount as well.
Bar Chart Image
Can anyone help me to do this. Thanks in advance
You can try to use the function hoverCallback as follow:
hoverCallback: function(index, options, content) {
var data = options.data[index];
content += 'Amount: '+data.amount;
return content;
},
Related
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], ...]
]
I'm trying to build a game hiscore view with rankings for my Django site, and I'm having some issues.
The query I have is the following:
row_number_rank = Window(
expression=RowNumber(),
partition_by=[F('score_type')],
order_by=F('score').desc()
)
hiscores = Hiscore.objects.annotate(rank=row_number_rank).values()
The query above works perfectly, and properly assigns each row a rank according to how it compares to other scores within each score type.
The result of this is the following:
{ 'id': 2, 'username': 'Bob', 'score_type': 'wins', 'score': 12, 'rank': 1 }
{ 'id': 1, 'username': 'John', 'score_type': 'wins', 'score': 5, 'rank': 2 }
{ 'id': 4, 'username': 'John', 'score_type': 'kills', 'score': 37, 'rank': 1 }
{ 'id': 3, 'username': 'John', 'score_type': 'kills', 'score': 5, 'rank': 2 }
{ 'id': 5, 'username': 'Bob', 'score_type': 'kills', 'score': 2, 'rank': 3 }
The issue comes in when I want to retrieve only a specific user's scores from the above results. If I append a filter(username="Bob") the query is now:
row_number_rank = Window(
expression=RowNumber(),
partition_by=[F('score_type')],
order_by=F('score').desc()
)
hiscores = Hiscore.objects.annotate(rank=row_number_rank).filter(username='Bob').values()
Unexpectedly, adding this filter step has yielded the following incorrect results:
{ 'id': 2, 'username': 'Bob', 'score_type': 'wins', 'score': 12, 'rank': 1 }
{ 'id': 5, 'username': 'Bob', 'score_type': 'kills', 'score': 2, 'rank': 1 }
Randomly, the rank on the id=5 entry has decided to change to 1 instead of its correct value of 3.
Why would adding this filter step modify the values of the fields in the QuerySet, instead of just excluding the proper elements from it?
Thanks.
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
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.