How to show custom label in line chart or scatter chart - javascript

I am adding data to charts like this
const data = [
["2020-05-22 14:20:22", "173.9"],
["2020-05-22 14:20:40", "175.3"],
["2020-05-22 14:20:58", "172.4"]
]
function stringToDate(s) {
s = s.split(/[-: ]/);
return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]);
}
for(var key in data)
{
var xTime = stringToDate(data[key][0]);
var yVal = parseFloat(data[key][1]);
series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal})
}
How do I show custom label to it, For example I want to show full date for above line series and also for other scatter charts , I want to show custom label like below.
series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal , label : "my own text" })


To show a full date for a series using a DateTime axis you can take a look at my previously posted answer: https://stackoverflow.com/a/59839354/6198227 The sort version of it is to define a format options based on Intl.DateTimeFormat when defining the axis tick strategy for a axis.
Custom labels can be done by creating custom ticks. The text inside the tick can be defined with a text formatter set by Axis.setTextFormatter. The formatter function gets the position and the tick itself as parameters so those can be used to define the text inside the tick if that's needed.
const tick = lineSeries.axisX.addCustomTick()
.setGridStrokeLength(0)
.setTextFormatter(()=>'My Text')
.setValue(dataFrequency * 50)
See below snippet for a implementation of both custom DateTime formatting and the use of custom ticks. The snippet is based on DateTime Axis example from the LightningChart JS Interactive Examples.
LightningChart JS v1.3.1 example:
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisTickStrategies,
DataPatterns,
emptyFill,
emptyLine
} = lcjs
// Create a XY Chart.
const dateOrigin = new Date(2008, 0, 1)
const chart = lightningChart().ChartXY({
defaultAxisXTickStrategy: AxisTickStrategies.DateTime(
dateOrigin,
undefined,
{
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
}
)
})
.setTitle('Customer Satisfaction')
chart.setPadding({ right: '5' })
// Add a progressive line series.
// Using the DataPatterns object to select the horizontalProgressive pattern for the line series.
const lineSeries = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
.setName('Customer Satisfaction')
// Generate some points using for each month
const dataFrequency = 30 * 24 * 60 * 60 * 1000
// Setup view nicely.
chart.getDefaultAxisY()
.setScrollStrategy(undefined)
.setInterval(0, 100)
.setTitle('Satisfaction %')
// Data for the plotting
const satisfactionData = [
{ x: 0, y: 0 },
{ x: 1, y: 8 },
{ x: 2, y: 12 },
{ x: 3, y: 18 },
{ x: 4, y: 22 },
{ x: 5, y: 32 },
{ x: 6, y: 40 },
{ x: 7, y: 48 },
{ x: 8, y: 50 },
{ x: 9, y: 54 },
{ x: 10, y: 59 },
{ x: 11, y: 65 },
{ x: 12, y: 70 },
{ x: 13, y: 68 },
{ x: 14, y: 70 },
{ x: 15, y: 69 },
{ x: 16, y: 66 },
{ x: 17, y: 65.4 },
{ x: 18, y: 64 },
{ x: 19, y: 65 },
{ x: 20, y: 63.5 },
{ x: 21, y: 62 },
{ x: 22, y: 61.2 },
{ x: 23, y: 63 },
{ x: 24, y: 61 },
{ x: 25, y: 62 },
{ x: 26, y: 62 },
{ x: 27, y: 60 },
{ x: 28, y: 57.8 },
{ x: 29, y: 58 },
{ x: 30, y: 61 },
{ x: 31, y: 59 },
{ x: 32, y: 63 },
{ x: 33, y: 61 },
{ x: 34, y: 61.8 },
{ x: 35, y: 62 },
{ x: 36, y: 59.9 },
{ x: 37, y: 58 },
{ x: 38, y: 60 },
{ x: 39, y: 63 },
{ x: 40, y: 59.5 },
{ x: 41, y: 62.5 },
{ x: 42, y: 59.7 },
{ x: 43, y: 57 },
{ x: 44, y: 61 },
{ x: 45, y: 59 },
{ x: 46, y: 61 },
{ x: 47, y: 65 },
{ x: 48, y: 62 },
{ x: 49, y: 60 },
{ x: 50, y: 58 },
{ x: 51, y: 59 },
{ x: 52, y: 61 },
{ x: 53, y: 64 },
{ x: 54, y: 65.5 },
{ x: 55, y: 67 },
{ x: 56, y: 68 },
{ x: 57, y: 69 },
{ x: 58, y: 68 },
{ x: 59, y: 69.5 },
{ x: 60, y: 69.9 },
{ x: 61, y: 68.5 },
{ x: 62, y: 67 },
{ x: 63, y: 65 },
{ x: 64, y: 63 },
{ x: 65, y: 60 },
{ x: 66, y: 61.6 },
{ x: 67, y: 62 },
{ x: 68, y: 61 },
{ x: 69, y: 60 },
{ x: 70, y: 63.3 },
{ x: 71, y: 62.7 },
{ x: 72, y: 64.3 },
{ x: 73, y: 63 },
{ x: 74, y: 61.2 },
{ x: 75, y: 60 },
{ x: 76, y: 61 },
{ x: 77, y: 64 },
{ x: 78, y: 61.9 },
{ x: 79, y: 61 },
{ x: 80, y: 58 },
{ x: 81, y: 59 },
{ x: 82, y: 60.5 },
{ x: 83, y: 61 },
{ x: 84, y: 63 },
{ x: 85, y: 64.5 },
{ x: 86, y: 65 },
{ x: 87, y: 66.2 },
{ x: 88, y: 64.9 },
{ x: 89, y: 63 },
{ x: 90, y: 62 },
{ x: 91, y: 63 },
{ x: 92, y: 61.8 },
{ x: 93, y: 62 },
{ x: 94, y: 63 },
{ x: 95, y: 64.2 },
{ x: 96, y: 63 },
{ x: 97, y: 61 },
{ x: 98, y: 59.7 },
{ x: 99, y: 61 },
{ x: 100, y: 58 },
{ x: 101, y: 59 },
{ x: 102, y: 58 },
{ x: 103, y: 58 },
{ x: 104, y: 57.5 },
{ x: 105, y: 59.2 },
{ x: 106, y: 60 },
{ x: 107, y: 61.9 },
{ x: 108, y: 63 },
{ x: 109, y: 64.1 },
{ x: 110, y: 65.9 },
{ x: 111, y: 64 },
{ x: 112, y: 65 },
{ x: 113, y: 62 },
{ x: 114, y: 60 },
{ x: 115, y: 58 },
{ x: 116, y: 57 },
{ x: 117, y: 58.2 },
{ x: 118, y: 58.6 },
{ x: 119, y: 59.3 },
{ x: 120, y: 61 }
]
// Adding points to the series
lineSeries.add(satisfactionData.map((point) => ({ x: point.x * dataFrequency, y: point.y })))
// Show the customized result table for each point
lineSeries.setResultTableFormatter((builder, series, xValue, yValue) => {
return builder
.addRow('Customer Satisfaction')
.addRow(series.axisX.formatValue(xValue))
.addRow(yValue.toFixed(2) + "%")
})
const tick = lineSeries.axisX.addCustomTick()
.setGridStrokeLength(0)
.setTextFormatter(()=>'My Text')
.setValue(dataFrequency * 50)
<script src="https://unpkg.com/#arction/lcjs#2.2.1/dist/lcjs.iife.js"></script>
Update for LightningChart JS v3.4.0
DateTime axis formatting options have changed a little bit, there are more options to format based on the zoom level. And setResultTableFormatter has been renamed to setCursorResultTableFormatter.
const formatting = {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric'}
chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (styler)=>
styler.setDateOrigin(dateOrigin)
.setFormattingDay(formatting, formatting, formatting)
.setFormattingDecade(formatting, formatting, formatting)
.setFormattingHour(formatting, formatting, formatting)
.setFormattingMilliSecond(formatting, formatting, formatting)
.setFormattingMinute(formatting, formatting, formatting)
.setFormattingMonth(formatting, formatting, formatting)
.setFormattingSecond(formatting, formatting, formatting)
.setFormattingWeek(formatting, formatting, formatting)
.setFormattingYear(formatting, formatting, formatting)
)
LightningChart JS v3.4.0 example:
// Import LightningChartJS
const {
lightningChart,
AxisTickStrategies,
DataPatterns,
emptyFill,
emptyLine
} = lcjs
// Create a XY Chart.
const dateOrigin = new Date(2008, 0, 1)
const chart = lightningChart().ChartXY()
.setTitle('Customer Satisfaction')
const formatting = {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
}
chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (styler) =>
styler.setDateOrigin(dateOrigin)
.setFormattingDay(formatting, formatting, formatting)
.setFormattingDecade(formatting, formatting, formatting)
.setFormattingHour(formatting, formatting, formatting)
.setFormattingMilliSecond(formatting, formatting, formatting)
.setFormattingMinute(formatting, formatting, formatting)
.setFormattingMonth(formatting, formatting, formatting)
.setFormattingSecond(formatting, formatting, formatting)
.setFormattingWeek(formatting, formatting, formatting)
.setFormattingYear(formatting, formatting, formatting)
)
chart.setPadding({
right: '5'
})
// Add a progressive line series.
// Using the DataPatterns object to select the horizontalProgressive pattern for the line series.
const lineSeries = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
.setName('Customer Satisfaction')
// Generate some points using for each month
const dataFrequency = 30 * 24 * 60 * 60 * 1000
// Setup view nicely.
chart.getDefaultAxisY()
.setScrollStrategy(undefined)
.setInterval(0, 100)
.setTitle('Satisfaction %')
// Data for the plotting
const satisfactionData = [
{ x: 0, y: 0 },
{ x: 1, y: 8 },
{ x: 2, y: 12 },
{ x: 3, y: 18 },
{ x: 4, y: 22 },
{ x: 5, y: 32 },
{ x: 6, y: 40 },
{ x: 7, y: 48 },
{ x: 8, y: 50 },
{ x: 9, y: 54 },
{ x: 10, y: 59 },
{ x: 11, y: 65 },
{ x: 12, y: 70 },
{ x: 13, y: 68 },
{ x: 14, y: 70 },
{ x: 15, y: 69 },
{ x: 16, y: 66 },
{ x: 17, y: 65.4 },
{ x: 18, y: 64 },
{ x: 19, y: 65 },
{ x: 20, y: 63.5 },
{ x: 21, y: 62 },
{ x: 22, y: 61.2 },
{ x: 23, y: 63 },
{ x: 24, y: 61 },
{ x: 25, y: 62 },
{ x: 26, y: 62 },
{ x: 27, y: 60 },
{ x: 28, y: 57.8 },
{ x: 29, y: 58 },
{ x: 30, y: 61 },
{ x: 31, y: 59 },
{ x: 32, y: 63 },
{ x: 33, y: 61 },
{ x: 34, y: 61.8 },
{ x: 35, y: 62 },
{ x: 36, y: 59.9 },
{ x: 37, y: 58 },
{ x: 38, y: 60 },
{ x: 39, y: 63 },
{ x: 40, y: 59.5 },
{ x: 41, y: 62.5 },
{ x: 42, y: 59.7 },
{ x: 43, y: 57 },
{ x: 44, y: 61 },
{ x: 45, y: 59 },
{ x: 46, y: 61 },
{ x: 47, y: 65 },
{ x: 48, y: 62 },
{ x: 49, y: 60 },
{ x: 50, y: 58 },
{ x: 51, y: 59 },
{ x: 52, y: 61 },
{ x: 53, y: 64 },
{ x: 54, y: 65.5 },
{ x: 55, y: 67 },
{ x: 56, y: 68 },
{ x: 57, y: 69 },
{ x: 58, y: 68 },
{ x: 59, y: 69.5 },
{ x: 60, y: 69.9 },
{ x: 61, y: 68.5 },
{ x: 62, y: 67 },
{ x: 63, y: 65 },
{ x: 64, y: 63 },
{ x: 65, y: 60 },
{ x: 66, y: 61.6 },
{ x: 67, y: 62 },
{ x: 68, y: 61 },
{ x: 69, y: 60 },
{ x: 70, y: 63.3 },
{ x: 71, y: 62.7 },
{ x: 72, y: 64.3 },
{ x: 73, y: 63 },
{ x: 74, y: 61.2 },
{ x: 75, y: 60 },
{ x: 76, y: 61 },
{ x: 77, y: 64 },
{ x: 78, y: 61.9 },
{ x: 79, y: 61 },
{ x: 80, y: 58 },
{ x: 81, y: 59 },
{ x: 82, y: 60.5 },
{ x: 83, y: 61 },
{ x: 84, y: 63 },
{ x: 85, y: 64.5 },
{ x: 86, y: 65 },
{ x: 87, y: 66.2 },
{ x: 88, y: 64.9 },
{ x: 89, y: 63 },
{ x: 90, y: 62 },
{ x: 91, y: 63 },
{ x: 92, y: 61.8 },
{ x: 93, y: 62 },
{ x: 94, y: 63 },
{ x: 95, y: 64.2 },
{ x: 96, y: 63 },
{ x: 97, y: 61 },
{ x: 98, y: 59.7 },
{ x: 99, y: 61 },
{ x: 100, y: 58 },
{ x: 101, y: 59 },
{ x: 102, y: 58 },
{ x: 103, y: 58 },
{ x: 104, y: 57.5 },
{ x: 105, y: 59.2 },
{ x: 106, y: 60 },
{ x: 107, y: 61.9 },
{ x: 108, y: 63 },
{ x: 109, y: 64.1 },
{ x: 110, y: 65.9 },
{ x: 111, y: 64 },
{ x: 112, y: 65 },
{ x: 113, y: 62 },
{ x: 114, y: 60 },
{ x: 115, y: 58 },
{ x: 116, y: 57 },
{ x: 117, y: 58.2 },
{ x: 118, y: 58.6 },
{ x: 119, y: 59.3 },
{ x: 120, y: 61 }
]
// Adding points to the series
lineSeries.add(satisfactionData.map((point) => ({
x: point.x * dataFrequency,
y: point.y
})))
// Show the customized result table for each point
lineSeries.setCursorResultTableFormatter((builder, series, xValue, yValue) => {
return builder
.addRow('Customer Satisfaction')
.addRow(series.axisX.formatValue(xValue))
.addRow(yValue.toFixed(2) + "%")
})
const tick = lineSeries.axisX.addCustomTick()
.setGridStrokeLength(0)
.setTextFormatter(() => 'My Text')
.setValue(dataFrequency * 50)
<script src="https://unpkg.com/#arction/lcjs#3.4.0/dist/lcjs.iife.js"></script>

Related

chartjs datapoints breakes

I don't know If I have done anything wrong or if this is just an annoying bug.
I want to be able to have two charts on top of each other and have the 24-hour format
so the x-axis should start from 0 and go to 23:59
When I add one datapoint to the chart it works and it does not break. As soon as I add another datapoint it breaks.
If you look at the image the Monthly totals works, but as soon as I get the data2 info then some data points on the red line just start to break.
Also I don't know how to remove some of the labels since there are duplicates
Codesandbox link to bug
This is how my datapoints are
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: usageData,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
},
{
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
},
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top" as const,
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
options: {
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
},
};

AFA I see, there is a bug in the chart configuration. The options node it's wrong and it must be removed. This is the reason of the bug and why the scales are not what your are defining (see missing colors and correct position in your picture) and is using the defaults (linear ones).
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let dsMonthly = {
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
};
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: dailyGeneration,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
}
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm"
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'line',
data: yourData,
options: yourOptions
});
document.getElementById('month').addEventListener('click', function() {
myChart.data.datasets.push(dsMonthly);
myChart.update();
document.getElementById('month').disabled = true;
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#3.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
<button id="month">Add month dataset</button>
</body>
</html>

Finding closest x,y coordinates

I have coordinates (x, y) of place where I am currently and array of objects with coordinates of destinations.
Coordinates x and y are just representing of fields in map like this:
and it is up to 100x100.
myPosition is array: [ 13, 11 ] where 13 is x and 11 is y (demonstratively marked it as red in above jpg).
destinations is array of object:
[ { x: 22, y: 13 },
{ x: 16, y: 25 },
{ x: 20, y: 11 },
{ x: 76, y: 49 },
{ x: 65, y: 47 },
{ x: 82, y: 33 },
{ x: 86, y: 35 },
{ x: 61, y: 59 },
{ x: 62, y: 52 },
{ x: 18, y: 52 },
{ x: 24, y: 49 },
{ x: 52, y: 55 },
{ x: 20, y: 57 },
{ x: 80, y: 11 },
{ x: 55, y: 61 },
{ x: 46, y: 59 },
{ x: 77, y: 19 },
{ x: 2, y: 22 },
{ x: 78, y: 23 },
{ x: 86, y: 51 },
{ x: 75, y: 46 },
{ x: 6, y: 8 },
{ x: 25, y: 12 },
{ x: 81, y: 21 },
{ x: 53, y: 58 } ]
I need some tips or algorithm which will sort destination array of object in order from closest to my position.

What you got is called the nearest neighbor problem.
Two solutions, depening on where you need to take your problem:
You could simply do a brute force distance search with the usual optimization of skipping the square-root:
Some code:
function DistSquared(pt1, pt2) {
var diffX = pt1.x - pt2.x;
var diffY = pt1.y - pt2.y;
return (diffX*diffX+diffY*diffY);
}
closest = destinations[0];
shortestDistance = DistSquared(myPosition, destinations[0]);
for (i = 0; i < destinations.length; i++) {
var d = DistSquared(myPosition, destinations[i]);
if (d < shortestDistance) {
closest = destinations[i];
shortestDistance = d;
}
}
If you are going to make repeated nearest neighbor queries on the same destinations array, you can use an algorithm known as a k-d tree. This where you build a binary tree representation of your grid of points by partitioning it in half many times along a different axis.

How to show only first and last labels in CanvasJS

I need to show first and last labels only in CanvasJS. It's always showing all the labels but my requirement is to show only first and last. Is there any way out to do so?

You can use axisY labelFormatter to do so.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisY: {
tickColor: "transparent",
labelFormatter: function(e){
if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
return e.value;
return "";
}
},
data: [{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

You can also try hiding all axis-labels and add stripLines at the minimum and maximum.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisX: {
valueFormatString: "####"
},
axisY:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
axisY2:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
data: [
{
type: "column",
showInLegend: true,
name: "Axis Y-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 6 },
{ x: 2007, y: 2 },
{ x: 2008, y: 5 },
{ x: 2009, y: 7 },
{ x: 2010, y: 1 },
{ x: 2011, y: 5 },
{ x: 2012, y: 5 },
{ x: 2013, y: 2 },
{ x: 2014, y: 2 }
]
},
{
type: "column",
showInLegend: true,
axisYType: "secondary",
//axisYIndex: 0, //Defaults to Zero
name: "Axis Y2-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 12 },
{ x: 2007, y: 20 },
{ x: 2008, y: 28 },
{ x: 2009, y: 34 },
{ x: 2010, y: 24 },
{ x: 2011, y: 45 },
{ x: 2012, y: 15 },
{ x: 2013, y: 34 },
{ x: 2014, y: 22 }
]
}
]
});
chart.render();
addStripLine(chart);
function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
min = chart.axisY[i].get("minimum");
max = chart.axisY[i].get("maximum");
chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
min = chart.axisY2[i].get("minimum");
max = chart.axisY2[i].get("maximum");
chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

Bubble Chart-Cannot read property 'length' of null at Object.acquireContext (Chart.min.js:14)

var popCanvas = document.getElementById("popChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var popData = {
datasets: [{
label: ['Deer Population'],
//data to plot bubble on chart
data: [{
x: 100,
y: 0,
r: 10
}, {
x: 60,
y: 30,
r: 20
}, {
x: 40,
y: 60,
r: 25
}, {
x: 80,
y: 80,
r: 50
}, {
x: 20,
y: 30,
r: 25
}, {
x: 0,
y: 100,
r: 5
}],
//color properties for chart
backgroundColor: "#9966FF",
hoverBackgroundColor: "#000000",
hoverBorderColor: "#9966FF",
hoverBorderWidth: 5,
hoverRadius: 5
}]
};
var bubbleChart = new Chart(popCanvas, {
type: 'bubble',
data: popData
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="popChart" width="600" height="400"></canvas>

Create a heatmap/punchcard Using Chart.js

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
}
}]
}
}
});

Categories

Resources