I have trouble to scale Y-axis on Apexcharts using JS.
I used this codepen :Codepen Check codepen
from Apexcharts website for multiple axis : Apexcharts Website
I past my datas like :
SeriesA :
{x: '2020-04-21 00:06:24' ,y: 1009.07},{x: '2020-04-21 00:16:26' ,y: 1009.12},{x: '2020-04-21 00:26:28' ,y: 1009.04},{x: '2020-04-21 00:36:30' ,y: 1008.94},{x: '2020-04-21 00:46:32' ,y: 1009.09},{x: '2020-04-21 00:56:35' ,y: 1009.11},{x: '2020-04-21 01:06:37' ,y: 1009.29},{x: '2020-04-21 01:16:39' ,y: 1009.29},{x: '2020-04-21 01:26:41' ,y: 1009.16},{x: '2020-04-21 01:36:43' ,y: 1009.14},{x: '2020-04-21 01:46:45' ,y: 1009.18},{x: '2020-04-21 01:56:47' ,y: 1009.13},{x: '2020-04-21 02:06:49' ,y: 1009.06},{x: '2020-04-21 02:16:51' ,y: 1009.12},{x: '2020-04-21 02:26:53' ,y: 1009.07},{x: '2020-04-21 02:36:55' ,y: 1008.86},{x: '2020-04-21 02:46:57' ,y: 1008.77}
SeriesB:
{x: '2020-04-21 00:06:24' ,y: 13.86},{x: '2020-04-21 00:16:26' ,y: 13.85},{x: '2020-04-21 00:26:28' ,y: 13.87},{x: '2020-04-21 00:36:30' ,y: 13.68},{x: '2020-04-21 00:46:32' ,y: 13.84},{x: '2020-04-21 00:56:35' ,y: 13.91},{x: '2020-04-21 01:06:37' ,y: 13.87},{x: '2020-04-21 01:16:39' ,y: 13.84},{x: '2020-04-21 01:26:41' ,y: 13.75},{x: '2020-04-21 01:36:43' ,y: 13.56},{x: '2020-04-21 01:46:45' ,y: 13.48},{x: '2020-04-21 01:56:47' ,y: 13.54},{x: '2020-04-21 02:06:49' ,y: 13.54},{x: '2020-04-21 02:16:51' ,y: 13.5},{x: '2020-04-21 02:26:53' ,y: 13.31},{x: '2020-04-21 02:36:55' ,y: 13.44},{x: '2020-04-21 02:46:57' ,y: 13.32}
And I got the same behavior than on my website.
Series A are not scaled from min to max.
Does anyone has a solution please ?
Thank you.
Related
I have below string(Captured by Drone GPS).
1
00:00:00,000 --> 00:00:00,033
<font size="36">FrameCnt : 1, DiffTime : 33ms
2022-10-08 10:39:34,664,324
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.510010] </font>
2
00:00:00,033 --> 00:00:00,066
<font size="36">FrameCnt : 2, DiffTime : 33ms
2022-10-08 10:39:34,697,694
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.510010] </font>
3
00:00:00,066 --> 00:00:00,100
<font size="36">FrameCnt : 3, DiffTime : 34ms
2022-10-08 10:39:34,731,055
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.510010] </font>
4
00:00:00,100 --> 00:00:00,133
<font size="36">FrameCnt : 4, DiffTime : 33ms
2022-10-08 10:39:34,764,424
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.537994] </font>
5
00:00:00,133 --> 00:00:00,166
<font size="36">FrameCnt : 5, DiffTime : 33ms
2022-10-08 10:39:34,797,792
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.537994] </font>
I want to delete all lines containing "Date and Time"
I want output as per below.
1
00:00:00,000 --> 00:00:00,033
<font size="36">FrameCnt : 1, DiffTime : 33ms
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.510010] </font>
2
00:00:00,033 --> 00:00:00,066
<font size="36">FrameCnt : 2, DiffTime : 33ms
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.510010] </font>
3
00:00:00,066 --> 00:00:00,100
<font size="36">FrameCnt : 3, DiffTime : 34ms
[iso : 100] [shutter : 1/1000.0] [fnum : 280] [ev : -0.7] [ct : 4878] [color_md : default] [focal_len : 280] [latitude : 25.726788] [longtitude : 76.246599] [altitude: 334.510010] </font
These lines are in specific patterns
Line Numbers (4,10,16,22,28,...)
I have tried this but problem is in every new files I have to put date manually.
.*2022-09-29.*[\r]?[\n]
You can use
^\d{4}-\d\d-\d\d\h.*\R
^ Start of string
\d{4}-\d\d-\d\d Match the date like pattern where \d matches a digit
\h Match a horizontal whitespace char
.* Match the rest of the line
\R Match a newline
Regex demo
In the replacement use an empty string.
I have Table with 2 secondary index and trying to update billing mode to provisioned.
below is the aws cli used. getting error
when calling the UpdateTable operation: One or more parameter values were invalid: ProvisionedThroughput must be specified for index: gsi-key-first
aws dynamodb update-table \
--table-name ddb-test-table \
--billing-mode PROVISIONED \
--provisioned-throughput ReadCapacityUnits=15,WriteCapacityUnits=10 \
--global-secondary-index-updates file://gsi-updates.json \
--region us-east-1
cat gsi-updates.json
[{
"Update": {
"IndexName": "gsi-key-first",
"ProvisionedThroughput": {
"ReadCapacityUnits": 150,
"WriteCapacityUnits": 150
}
},
"Update": {
"IndexName": "gsi-key-second",
"ProvisionedThroughput": {
"ReadCapacityUnits": 150,
"WriteCapacityUnits": 150
}
}
}]
Please try to update your gsi-updates.json like this and give it a shot:
[
{
"Update": {
"IndexName": "gsi-key-first",
"ProvisionedThroughput": {
"ReadCapacityUnits": 150,
"WriteCapacityUnits": 150
}
}
},
{
"Update": {
"IndexName": "gsi-key-second",
"ProvisionedThroughput": {
"ReadCapacityUnits": 150,
"WriteCapacityUnits": 150
}
}
}
]
See https://docs.aws.amazon.com/amazondynamodb/latest/APIReference/API_UpdateTable.html for more details.
I have a chart were the data looks like this where X represents days of the week:
{x: 1, y: 18, r: 4.7614}
{x: 6, y: 17, r: 4.7619}
{x: 0, y: 16, r: 4.7657}
I'd like to rename the numbers to weekdays on the X axis (0: "Sunday", 1: "Monday") etc., but I can't figure it out.
My config looks like this: (but obviously not working).
Any help would be appreciated, thank you.
const config = {
type: "bubble",
data: data,
options: {
responsive: true,
scales: {
x: ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"],
},
},
}
You can use the tickCallback to transform the value to whatever you like, easyest thing to do is make an array with all the weekDays and then use the value as an index like so:
const weekDays = ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"];
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 1,
r: 4
}, {
x: 1,
y: 1,
r: 4
}, {
x: 2,
y: 1,
r: 4
}, {
x: 3,
y: 1,
r: 4
}, {
x: 4,
y: 1,
r: 4
}, {
x: 5,
y: 1,
r: 4
}, {
x: 6,
y: 1,
r: 4
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
ticks: {
callback: (val) => (weekDays[val])
}
}
}
}
};
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I'm using chartJS 2.6.0 with scatter. The code I use is as below:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/960.css" />
<title>OCA-Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<div class="container_12">
<canvas id="linechart"></canvas>
<script>
var linedata = {
datasets: [{
fill: false,
lineTension: 0,
borderColor: "black",
borderWidth: [2,2,2,2,2,2,2,2,2,2],
pointBackgroundColor: ["blue", "blue","blue", "blue","blue", "blue","blue", "blue","blue", "blue"],
pointRadius: [5,5,5,5,5,5,5,5,5,5],
pointStyle: ["rect","rect","rect","rect","rect","rect","rect","rect","rect","rect"],
data: [
{x: 0.25, y: 80},
{x: 0.75, y: -14},
{x: 1.25, y: -46},
{x: 1.75, y: 30},
{x: 2.25, y: 14},
{x: 2.75, y: -20},
{x: 3.25, y: -72},
{x: 3.75, y: -56},
{x: 4.25, y: -24},
{x: 4.75, y: -52}
]
}]
};
var chartOptions = {
responsive: true,
maintainAspectRatio: true,
legend: {display: false},
gridLines :{
},
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
max: 100,
min: -100
}
}],
xAxes: [{
ticks: {
display: false
}
}]
}
};
var lineID = document.getElementById("linechart").getContext("2d");
var lineChart = new Chart(lineID, {
type: "scatter",
data: linedata,
options: chartOptions
});
</script>
</body>
</html>
What I'm trying to do is to display some texts in the x-axis in the middle of every grid column like what the bar graph does see image Bar graph image
Also, I would like to add a color to the grid just between y-axis -30 and 20 like in the capture below HTML workaround
All I could do is do it in HTML by displaying tags below the graph and using margins and by also placing an image in the background to get what shows in image 2 but it is an ugly solution.
Any help would be appreciated thanks.
For both requirements you can write custom inline plugins.
Example:
var options = {
type: 'scatter',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: 0.25,
y: 80
},
{
x: 0.75,
y: -14
},
{
x: 1.25,
y: -46
},
{
x: 1.75,
y: 30
},
{
x: 2.25,
y: 14
},
{
x: 2.75,
y: -20
},
{
x: 3.25,
y: -72
},
{
x: 3.75,
y: -56
},
{
x: 4.25,
y: -24
},
{
x: 4.75,
y: -52
}
],
borderWidth: 1
}]
},
options: {
plugins: {
customText: {
text: ['hi', 'this', 'is', 'text', 'in', 'Mid', '!', ':)'],
size: '20px',
color: 'red',
font: 'Arial black'
},
backgrounds: {
hbars: [{
from: -28,
to: -80,
color: "rgb(195, 230, 195)"
},
{
from: 20,
to: 28,
color: "rgb(230, 220, 195)"
},
{
from: 0,
to: 20,
color: "rgb(230, 195, 195)"
}
]
}
}
},
plugins: [{
id: 'backgrounds',
beforeDraw: (chart, args, options) => {
const {
ctx,
chartArea,
scales
} = chart;
const y = scales['y-axis-1'];
const x = scales['y-axis-1'];
options.hbars.forEach((hBar) => {
ctx.save();
ctx.fillStyle = hBar.color;
ctx.fillRect(chartArea.left, y.getPixelForValue(hBar.from), chartArea.right - chartArea.left, y.getPixelForValue(hBar.to) - y.getPixelForValue(hBar.from));
ctx.restore();
})
}
},
{
id: 'customText',
afterDraw: (chart, args, options) => {
const {
ctx,
chartArea,
scales
} = chart;
const y = scales['y-axis-1'];
const x = scales['x-axis-1'];
options.text.forEach((text, i) => {
ctx.save();
ctx.textAlign = 'center';
ctx.font = `${options.size || '20px'} ${options.font || 'Arial'}`;
ctx.fillStyle = options.color || 'black'
ctx.fillText(text, x.getPixelForValue((Number(x.ticks[0]) + Number(x.ticks[1])) / 2), y.getPixelForValue((Number(y.ticks[i]) + Number(y.ticks[i + 1])) / 2))
ctx.restore();
})
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
https://codepen.io/shaz1234/pen/PEKjOV
The codepen has my code
new Chart(document.getElementById("chartjs-0"), {
"type":"line",
"data": {
"datasets": [
{
"label":"My First Dataset",
"data": [
{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}
],
"fill":false,
"borderColor":"rgb(75, 192, 192)",
"lineTension":0.1
}
]
},
"options":{
}
}
);
Very simple example but the chart displays only the first two points. I would have expected the chart to scale to the min and max provided x values. Do I misunderstand how point line charts are designed to work or do I have a bug?
Thanks in advance for looking.
To help those who are stuck on this in 2019 (Chart.js 2.0), please see below :
For those who prefer to dig into the details and form your own inferences, You can refer to the chartjs example at https://www.chartjs.org/samples/latest/scales/time/line-point-data.html (go and view its source).
For those who want a quick answer: In short you can maintain your existing code, but add the following options: (I re-append Shaz's code for completeness)
new Chart(document.getElementById("chartjs-0"), {
"type":"line",
"data": {
"datasets": [
{
"label":"My First Dataset",
"data": [
{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}
],
"fill":false,
"borderColor":"rgb(75, 192, 192)",
"lineTension":0.1
}
]
},
// this is the part that will make it work... see .. xAxes type:'linear'
"options":{
responsive: true,
title: {
// optional: your title here
},
scales: {
xAxes: [{
type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
display: true, // mandatory
scaleLabel: {
display: true, // mandatory
labelString: 'Your label' // optional
},
}],
yAxes: [{ // and your y axis customization as you see fit...
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
}
}],
}
}
}
);
Try this, This link may be helpful to you http://www.chartjs.org/docs/latest/charts/scatter.html
var ctx = document.getElementById("myChart");
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Edit:
Why We use Scatter chart instead of line Chart?
Line Chart is use when we want to plot data set on same difference,and data structure is one dimensional array, for example, data: [20, 10] then we use line chart.
But When we want plot data on different differences and data structure is 2 dimensional array then we use scatter chart.
for example,
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
Point objects ( {x:2, y:4}) can be interpreted by line chart and should be displayed correctly if you just specified a labels key before the datasets key:
data: {
labels:["a","b","c",...]
datasets: [{
label: 'my Dataset',
data: [{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}]
}]
},
note that the labels array and the data object inside the datasets should have the same number of elements.