Im coding a Paint version for Minecraft with the CC Tweaked Mod
The Problem is i give my program an array and the program follows the order of the array one after the other.
That means if i draw something in the top left and then bottom right and then i fill everything else it will follow this order (which isnt very efficient)
I have an array called output
Here is how the array could look like
[
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 3 },
{ x: 2, y: 0, color: 5 },
{ x: 0, y: 1, color: 8 },
{ x: 1, y: 1, color: 10 },
{ x: 2, y: 1, color: 11 },
{ x: 0, y: 2, color: 12 },
{ x: 2, y: 2, color: 3 },
{ x: 1, y: 2, color: 14 }
]
The array comes from this "drawing"(ignore the arrows for now)
Now the question
How can i get from the first array to an array that looks like this
[
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 3 },
{ x: 2, y: 0, color: 5 },
{ x: 2, y: 1, color: 11 },
{ x: 1, y: 1, color: 10 },
{ x: 0, y: 1, color: 8 },
{ x: 0, y: 2, color: 12 },
{ x: 1, y: 2, color: 14 }
{ x: 2, y: 2, color: 3 },
]
(See how it follows the arrows?)
This would be much faster.
It is possibles that some squares are not filled with any color. Idk how important that might be
If important these are the colorcodes
const LISTOFCOLORS = {
white: 1,
orange: 2,
magenta: 3,
dodgerblue: 4,
yellow: 5,
lime: 6,
pink: 7,
gray: 8,
lightgray: 9,
cyan: 10,
purple: 11,
blue: 12,
SaddleBrown: 13,
green: 14,
red: 15,
black: 16
}
If you are only reversing the 3 - 6 entries, you could create a new array from slices of the old array using slice() and reverse the specified entries using reverse().
const rowByRow = [
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 3 },
{ x: 2, y: 0, color: 5 },
{ x: 0, y: 1, color: 8 },
{ x: 1, y: 1, color: 10 },
{ x: 2, y: 1, color: 11 },
{ x: 0, y: 2, color: 12 },
{ x: 2, y: 2, color: 3 },
{ x: 1, y: 2, color: 14 }
];
const result = [
...rowByRow.slice(0, 3),
...rowByRow.slice(3, 6).reverse(), // reverse 3 - 6 entries
...rowByRow.slice(6, 9)
];
console.log(result);
#axtck Thank you very much. I ended up not using slice but the "slicing the array in multiple arrays and work from there" part i got from your post
i ended up with this
const arr = [
{ x: 1, y: 4, color: 12 },
{ x: 2, y: 4, color: 12 },
{ x: 2, y: 3, color: 12 },
{ x: 2, y: 2, color: 12 },
{ x: 2, y: 1, color: 12 },
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 12 },
{ x: 1, y: 1, color: 12 },
{ x: 4, y: 1, color: 12 },
{ x: 3, y: 2, color: 12 },
{ x: 1, y: 3, color: 12 },
{ x: 0, y: 3, color: 12 },
{ x: 0, y: 1, color: 12 },
{ x: 0, y: 2, color: 12 },
{ x: 1, y: 2, color: 12 },
{ x: 3, y: 4, color: 12 },
{ x: 4, y: 4, color: 12 },
{ x: 4, y: 0, color: 12 },
{ x: 3, y: 0, color: 12 },
{ x: 2, y: 0, color: 12 },
{ x: 3, y: 1, color: 12 },
{ x: 4, y: 2, color: 12 },
{ x: 4, y: 3, color: 12 },
{ x: 0, y: 4, color: 12 },
{ x: 3, y: 3, color: 12 }
]
const ArrayOfArrays = []
const dimension = 5
for (let i = 0; i < dimension; i++) {
let array = []
for (let j = 0; j < arr.length; j++) {
if (i == arr[j].y) {
array.push(arr[j])
}
}
ArrayOfArrays.push(i % 2 === 0 ?
array.sort(function (a, b) {
return a.x - b.x;
}) : array.sort(function (a, b) {
return b.x - a.x;
}))
}
console.log(ArrayOfArrays)
The output would be
[
[
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 12 },
{ x: 2, y: 0, color: 12 },
{ x: 3, y: 0, color: 12 },
{ x: 4, y: 0, color: 12 }
],
[
{ x: 4, y: 1, color: 12 },
{ x: 3, y: 1, color: 12 },
{ x: 2, y: 1, color: 12 },
{ x: 1, y: 1, color: 12 },
{ x: 0, y: 1, color: 12 }
],
[
{ x: 0, y: 2, color: 12 },
{ x: 1, y: 2, color: 12 },
{ x: 2, y: 2, color: 12 },
{ x: 3, y: 2, color: 12 },
{ x: 4, y: 2, color: 12 }
],
[
{ x: 4, y: 3, color: 12 },
{ x: 3, y: 3, color: 12 },
{ x: 2, y: 3, color: 12 },
{ x: 1, y: 3, color: 12 },
{ x: 0, y: 3, color: 12 }
],
[
{ x: 0, y: 4, color: 12 },
{ x: 1, y: 4, color: 12 },
{ x: 2, y: 4, color: 12 },
{ x: 3, y: 4, color: 12 },
{ x: 4, y: 4, color: 12 }
]
]
notice how the x value goes up and down
Related
I have 2 array's with objects of coordinates. For example:
const coordinates = [
{ x: 2, y: 6 },
{ x: 14, y: 10 },
{ x: 7, y: 10 },
{ x: 11, y: 6 },
];
const coordinates2 = [
{ x: 8, y: 9 },
{ x: 25, y: 11 },
{ x: 2, y: 11 },
{ x: 7, y: 8 },
];
I want to make an sort function which will return which are closest to each other.
I tried multiple things but can not figure it out.
Any solution is accepted. Maybe sort 1 to the other or sort both at the same time.
This is wat I want to achive:
result array 1[
{ x: 2, y: 6 },
{ x: 14, y: 10 },
{ x: 7, y: 10 },
{ x: 11, y: 6 },
];
result array 2 = [
{ x: 2, y: 11 }, // beceause it is closest to {x: 2,y: 6}
{ x: 25, y: 11 }, // beceayse it is closest to {x: 14,y: 10},
{ x: 7, y: 8 }, // beceause it is closest to { x: 7, y: 10 }
{ x: 8, y: 9 }, // beceause it is closest to {x: 11,y: 6} after x: 7, y:10 but x:7, y:8 is even closer
];
^ the result can be different. But I want the most efficient distance between them.
The formula to see the distance of coordination a and coordination b is the following:
distance=√((x1-x2)²+(y1-y2)²).
If anyone has an idea or an tip please let me know !
You could map the first array by getting the closest coordinate from the second array.
const
getClosest = ({ x, y }, data) => data.reduce((a, b) => Math.hypot(x - a.x, y - a.y) < Math.hypot(x - b.x, y - b.y) ? a : b),
coordinates = [{ x: 2, y: 6 }, { x: 14, y: 10 }, { x: 7, y: 10 }, { x: 11, y: 6 }, { x: 6, y: 2 }],
coordinates2 = [{ x: 8, y: 9 }, { x: 25, y: 11 }, { x: 2, y: 11 }, { x: 18, y: 21 }, { x: 7, y: 8 }],
pairs = coordinates.map(o => [o, getClosest(o, coordinates2)]);
console.log(pairs);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I have a deep nested array of objects and arrays in my project and I want to find a object that has a value in nested array child of itself; Below is a simple example of my json (For a better understanding, I simplified it a bit) :
sections: [
{
id: 'e9904688-fd8a-476d-8f46-930bc4d888d1',
name: 'sec-e9904688-fd8a-476d-8f46-930bc4d888d1',
rows: [
{
id: '2f1bc178-d2bf-4283-ae9c-868513af789f',
name: 'row-2f1bc178-d2bf-4283-ae9c-868513af789f',
cols: [
{
id: 'adad03c8-60f3-4db1-8c6c-a125bbd7f114',
name: 'col-adad03c8-60f3-4db1-8c6c-a125bbd7f114',
isEmpty: false,
size: {
lg: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
md: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
sm: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
xs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
xxs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }
},
controles: [
{
id : '37619580-6ba6-4058-a39b-2d57d23007d6' ,
name : 'control name' ,
type : 'control type' ,
options : [
{} ,
{}
]
}
]
}
]
}
]
}
{
id: 'f3f5522c-0b7f-4d6f-84a7-50cce4e92775',
name: 'sec-f3f5522c-0b7f-4d6f-84a7-50cce4e92775',
rows: [
{
id: '8263d5fc-4445-4243-8cb2-3853b3918994',
name: 'row-8263d5fc-4445-4243-8cb2-3853b3918994',
cols: [
{
id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa',
name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa',
isEmpty: false,
size: {
lg: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
md: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
sm: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
xs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
xxs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }
},
controles: [
{
id : '37619580-6ba6-4058-a39b-2d57d23007d6' ,
name : 'control name' ,
type : 'control type' ,
options : [
{} ,
{}
]
}
]
}
]
}
]
}
]
for example I want find an object that its child has col-e0a56604-196a-4dcc-a04e-a56968a2f8aa value (in size in i key and I want its parent that's mean a object of cols array with name equal of searched characters)
You have to based the seach on your object structure. In your case it could look like this.
const sections = [
{
id: 'e9904688-fd8a-476d-8f46-930bc4d888d1',
name: 'sec-e9904688-fd8a-476d-8f46-930bc4d888d1',
rows: [
{
id: '2f1bc178-d2bf-4283-ae9c-868513af789f',
name: 'row-2f1bc178-d2bf-4283-ae9c-868513af789f',
cols: [
{
id: 'adad03c8-60f3-4db1-8c6c-a125bbd7f114',
name: 'col-adad03c8-60f3-4db1-8c6c-a125bbd7f114',
isEmpty: false,
size: {
lg: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
md: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
sm: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
xs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
xxs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }
},
controles: [
{
id : '37619580-6ba6-4058-a39b-2d57d23007d6' ,
name : 'control name' ,
type : 'control type' ,
options : [
{} ,
{}
]
}
]
}
]
}
]
},
{
id: 'f3f5522c-0b7f-4d6f-84a7-50cce4e92775',
name: 'sec-f3f5522c-0b7f-4d6f-84a7-50cce4e92775',
rows: [
{
id: '8263d5fc-4445-4243-8cb2-3853b3918994',
name: 'row-8263d5fc-4445-4243-8cb2-3853b3918994',
cols: [
{
id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa',
name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa',
isEmpty: false,
size: {
lg: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
md: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
sm: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
xs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
xxs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }
},
controles: [
{
id : '37619580-6ba6-4058-a39b-2d57d23007d6' ,
name : 'control name' ,
type : 'control type' ,
options : [
{} ,
{}
]
}
]
}
]
}
]
}
];
const searchString = "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa";
const foundItem = sections.find(
section => section.rows.find(
row => row.cols.find(
col => Object.keys(col.size).find(size => col.size[size].i === searchString)
)
)
);
console.log(foundItem.id);
Your question is a bit hard to understand, but here is a possible solution using object-scan. Note that all parents are present in the parents array, so pick whichever one you desire.
// const objectScan = require('object-scan');
const sections = [{"id":"e9904688-fd8a-476d-8f46-930bc4d888d1","name":"sec-e9904688-fd8a-476d-8f46-930bc4d888d1","rows":[{"id":"2f1bc178-d2bf-4283-ae9c-868513af789f","name":"row-2f1bc178-d2bf-4283-ae9c-868513af789f","cols":[{"id":"adad03c8-60f3-4db1-8c6c-a125bbd7f114","name":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","isEmpty":false,"size":{"lg":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"md":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"sm":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"xs":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"xxs":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4}},"controles":[{"id":"37619580-6ba6-4058-a39b-2d57d23007d6","name":"control name","type":"control type","options":[{},{}]}]}]}]},{"id":"f3f5522c-0b7f-4d6f-84a7-50cce4e92775","name":"sec-f3f5522c-0b7f-4d6f-84a7-50cce4e92775","rows":[{"id":"8263d5fc-4445-4243-8cb2-3853b3918994","name":"row-8263d5fc-4445-4243-8cb2-3853b3918994","cols":[{"id":"e0a56604-196a-4dcc-a04e-a56968a2f8aa","name":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","isEmpty":false,"size":{"lg":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"md":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"sm":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"xs":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"xxs":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4}},"controles":[{"id":"37619580-6ba6-4058-a39b-2d57d23007d6","name":"control name","type":"control type","options":[{},{}]}]}]}]}];
objectScan(['**[*].name'], {
filterFn: ({ value, parents }) => {
if (value === 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa') {
console.log(parents[2]);
}
}
})(sections);
// => { id: '8263d5fc-4445-4243-8cb2-3853b3918994', name: 'row-8263d5fc-4445-4243-8cb2-3853b3918994', cols: [ { id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa', name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', isEmpty: false, size: { lg: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, md: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, sm: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, xs: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, xxs: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 } }, controles: [ { id: '37619580-6ba6-4058-a39b-2d57d23007d6', name: 'control name', type: 'control type', options: [ {}, {} ] } ] } ] }
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#13.7.1"></script>
Disclaimer: I'm the author of object-scan
I'm trying to create a linear chart like a curve for different datasets but with start and end range for the x and y.
I want the start and end point of each dataset start from x y, how can convert the y line as values but takes labels? I tried to do something similar on the codepen but still need more to be similar to the image.
var data = {
labels: ["Group A", "Group B", "Group C", "Group D", "Group E"],
datasets: [
{
label: "Group A",
backgroundColor: gradient,
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "#911215",
data: [
{ x: 0, y: 0 },
{ x: 5, y: 5 }
]
},
{
label: "Group B",
backgroundColor: "green",
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "green",
data: [
{ x: 0, y: 0 },
{ x: 5, y: 5 },
{ x: 10, y: 10 }
]
},
{
label: "Group C",
backgroundColor: gradient,
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "#911215",
data: [
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 10, y: 10 },
{ x: 60, y: 60 },
{ x: 60, y: 10 }
]
},
{
label: "Group D",
backgroundColor: "blue",
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "blue",
data: [
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 60, y: 10 },
{ x: 0, y: 5 }
]
},
{
label: "Group E",
backgroundColor: "pink",
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "pink",
data: [
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 10 },
{ x: 0, y: 0 },
{ x: 0, y: 0 }
]
}
]
};
codepen
I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:
as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>
I have multiple charts on page, one of them is HeatMap.
I am using chartjs to create my charts. I am unable to create a heatmap using chartjs. Also is it possible to get look like github punchcard with chartJS
punchcard example
Use bubble chart to draw chart. Below is the image for the same.
[Sample-code]
var ctx = document.getElementById("myChart");
var data = {
datasets: [
{
label : "Monday",
data: [
{
x: 2,
y: 5,
r: 12
},
{
x: 6,
y: 5,
r: 8
},
{
x: 10,
y: 5,
r: 8
},
{
x: 14,
y: 5,
r: 6
},
{
x: 18,
y: 5,
r: 6
},
{
x: 22,
y: 5,
r: 2
},
{
x: 26,
y: 5,
r: 2
},
{
x: 30,
y: 5,
r: 6
},
{
x: 34,
y: 5,
r: 8
},
{
x: 38,
y: 5,
r: 12
},
{
x: 42,
y: 5,
r: 12
},
{
x: 46,
y: 5,
r: 10
},
{
x: 50,
y: 5,
r: 12
},
{
x: 54,
y: 5,
r: 8
},
{
x: 58,
y: 5,
r: 8
}
],
backgroundColor:"#444",
hoverBackgroundColor: "#FF6384",
},
{
label : "Tuesday",
data: [
{
x: 2,
y: 15,
r: 12
},
{
x: 6,
y: 15,
r: 8
},
{
x: 10,
y: 15,
r: 8
},
{
x: 14,
y: 15,
r: 6
},
{
x: 18,
y: 15,
r: 6
},
{
x: 22,
y: 15,
r: 2
},
{
x: 26,
y: 15,
r: 2
},
{
x: 30,
y: 15,
r: 6
},
{
x: 34,
y: 15,
r: 8
},
{
x: 38,
y: 15,
r: 12
},
{
x: 42,
y: 15,
r: 12
},
{
x: 46,
y: 15,
r: 10
},
{
x: 50,
y: 15,
r: 12
},
{
x: 54,
y: 15,
r: 8
},
{
x: 58,
y: 15,
r: 8
}
],
backgroundColor:"#444",
},
{
label : "Wednesday",
data: [
{
x: 2,
y: 25,
r: 12
},
{
x: 6,
y: 25,
r: 4
},
{
x: 10,
y: 25,
r: 4
},
{
x: 14,
y: 25,
r: 2
},
{
x: 18,
y: 25,
r: 6
},
{
x: 22,
y: 25,
r: 12
},
{
x: 26,
y: 25,
r: 12
},
{
x: 30,
y: 25,
r: 6
},
{
x: 34,
y: 25,
r: 8
},
{
x: 38,
y: 25,
r: 12
},
{
x: 42,
y: 25,
r: 12
},
{
x: 46,
y: 25,
r: 10
},
{
x: 50,
y: 25,
r: 12
},
{
x: 54,
y: 25,
r: 8
},
{
x: 58,
y: 25,
r: 8
}
],
backgroundColor:"#444",
}
]
};
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales : {
xAxes : [{
display : false,
ticks : {
beginAtZero : true,
max : 70
}
}],
yAxes : [{
ticks: {
beginAtZero : true,
max : 40,
stepSize : 10
}
}]
}
}
});