How can i combine ApexCharts Candlestick chart with multiple lines in the same chart - apexcharts
I want to add multiple lines to ApexCharts candlestick chart. The lines have different lengths. How can i do this? (I develop in another language than java (LiveCode) but want to use ApexCharts for showing stock charts with resistance and trend lines in the Browser Widget).
Tried to copy line chart script in the candle chart but i could not get the lines to show in the candlestick chart. Below the original candlestick chart script is shown that occupies the html page (basic.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CandleStick Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#latest"></script>
<script src="../../assets/ohlc.js"></script>
<script>
var options = {
chart: {
height: 350,
type: 'candlestick',
},
series: [{
data: [{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11]
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65]
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24]
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47]
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31]
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02]
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02]
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01]
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02]
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91]
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612]
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612]
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95]
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67]
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4]
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9]
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45]
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35]
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53]
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19]
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620]
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620]
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61]
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58]
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86]
},
{
x: new Date(1538825400000),
y: [6598.86, 6598.88, 6570, 6587.16]
},
{
x: new Date(1538827200000),
y: [6588.86, 6600, 6580, 6593.4]
},
{
x: new Date(1538829000000),
y: [6593.99, 6598.89, 6585, 6587.81]
},
{
x: new Date(1538830800000),
y: [6587.81, 6592.73, 6567.14, 6578]
},
{
x: new Date(1538832600000),
y: [6578.35, 6581.72, 6567.39, 6579]
},
{
x: new Date(1538834400000),
y: [6579.38, 6580.92, 6566.77, 6575.96]
},
{
x: new Date(1538836200000),
y: [6575.96, 6589, 6571.77, 6588.92]
},
{
x: new Date(1538838000000),
y: [6588.92, 6594, 6577.55, 6589.22]
},
{
x: new Date(1538839800000),
y: [6589.3, 6598.89, 6589.1, 6596.08]
},
{
x: new Date(1538841600000),
y: [6597.5, 6600, 6588.39, 6596.25]
},
{
x: new Date(1538843400000),
y: [6598.03, 6600, 6588.73, 6595.97]
},
{
x: new Date(1538845200000),
y: [6595.97, 6602.01, 6588.17, 6602]
},
{
x: new Date(1538847000000),
y: [6602, 6607, 6596.51, 6599.95]
},
{
x: new Date(1538848800000),
y: [6600.63, 6601.21, 6590.39, 6591.02]
},
{
x: new Date(1538850600000),
y: [6591.02, 6603.08, 6591, 6591]
},
{
x: new Date(1538852400000),
y: [6591, 6601.32, 6585, 6592]
},
{
x: new Date(1538854200000),
y: [6593.13, 6596.01, 6590, 6593.34]
},
{
x: new Date(1538856000000),
y: [6593.34, 6604.76, 6582.63, 6593.86]
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6604.2, 6590, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6595, 6583.27, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6598.21, 6587.6, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6605, 6596.61, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.99, 6597.5, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6606]
},
]
}],
title: {
text: 'CandleStick Chart',
align: 'left'
},
xaxis: {
type: 'datetime'
},
yaxis: {
tooltip: {
enabled: true
}
}
}
// -------------------------
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
//--------------------------
</script>
</body>
</html>
n.a.
With apexcharts v3.20.1 and above, you can render a Candlestick chart together with line charts.
You will need to declare a data series with two data sets:
const lineData = [
{
x: new Date(1538778600000),
y: 6604,
}, {
x: new Date(1538782200000),
y: 6602,
},
];
const ohlcData = [
{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33],
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11],
},
];
const series: ApexAxisChartSeries = [{
name: 'line',
type: 'line',
data: lineData,
}, {
name: 'candle',
type: 'candlestick',
data: ohlcData,
}];
Later on, you can then use it on your Chart component:
import Chart from 'react-apexcharts';
Chart options={chartOptions} series={series} type='candlestick' height={320} />
As of v3.8.6, this is not possible, but it is in the development roadmap.
Already suggested in this GitHub issue
Related
The chart.js zoom and pan plugin is not working in WKWebView
I added the zoom and pan functionality to a graph.
This works in Chrome and Safari. But when embedded in a SwiftUI WKWebview the entire graph zooms as if it is an image. I do not get the proper axis scaling.
I basically followed this tutorial to add the zoom. https://www.youtube.com/watch?v=QUzVVPK1Nks&ab_channel=ChartJS
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="container" style="position: relative; height:95vh; width:95vw">
<canvas id="myCanvas"></canvas>
</div>
<script>
//var incomingData = __#data__;
var ctx = document.getElementById("myCanvas").getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 500);
gradient.addColorStop(0, 'rgba(158,200,62,1)');
gradient.addColorStop(1, 'rgba(188,190,50,1)');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["5:30 PM","5:45 PM","6:00 PM","6:15 PM","6:30 PM","6:45 PM","7:00 PM","7:15 PM","7:30 PM","7:45 PM","8:00 PM","8:15 PM","8:30 PM","8:45 PM","9:00 PM","9:15 PM","9:30 PM","9:45 PM","10:00 PM","10:15 PM","10:30 PM","10:45 PM","11:00 PM","11:15 PM","11:30 PM","11:45 PM","12:00 AM","12:00 AM","12:15 AM","12:30 AM","12:45 AM","1:00 AM","1:15 AM","1:30 AM","1:45 AM","2:00 AM","2:15 AM","2:30 AM","2:45 AM","3:00 AM","3:15 AM","3:30 AM","3:45 AM","4:00 AM","4:15 AM","4:30 AM","4:45 AM","5:00 AM","5:15 AM","5:30 AM","5:45 AM","6:00 AM","6:15 AM","6:30 AM","6:45 AM","7:00 AM","7:15 AM","7:30 AM","7:45 AM","8:00 AM","8:15 AM","8:30 AM","8:45 AM","9:00 AM","9:15 AM","9:30 AM","9:45 AM","10:00 AM","10:15 AM","10:30 AM","10:45 AM","11:00 AM","11:15 AM","11:30 AM","11:45 AM","12:00 PM","12:15 PM","12:30 PM","12:45 PM","1:00 PM","1:15 PM","1:30 PM","1:45 PM","2:00 PM","2:15 PM","2:30 PM","2:45 PM","3:00 PM","3:15 PM","3:30 PM","3:45 PM","4:00 PM","4:15 PM","4:30 PM","4:45 PM","5:00 PM"],
datasets: [{
backgroundColor : gradient, // Put the gradient here as a fill color
label: 'Temp',
data: [21.62,21.54,21.66,21.39,23,22.31,21.18,21.12,28.18,22.1633333333333333,20.66,20.18,19.7266666666666667,19.35,32.04,30.9533333333333333,33.18,31.9733333333333333,43.035,32.6225,31.7033333333333333,48.32,33.58,33.64,22.37,20.9,20.56,20.56,20.43,20.39,20.25,20,19.87,19.68,19.62,19.5,19.355,19.18,19.06,19,18.87,18.79,18.68,18.68,18.62,18.56,18.5,18.385,18.25,18.12,18,17.91,17.81,17.75,17.62,17.5,17.5,17.5,17.5,18.43,18.68,18.85,19.12,19.25,19.31,19.37,19.43,NaN,NaN,NaN,NaN,19.6,19.68,19.81,19.87,19.9533333333333333,20,NaN,NaN,NaN,NaN,NaN,NaN,NaN,NaN,0,NaN,NaN,NaN,NaN,NaN,NaN,NaN,22.18,22.37,22.31],
borderColor: '#9ec83e',
borderWidth: '1',
fill: true,
}]
},
options: {
plugins: {
legend:{
display: false,
},
zoom: {
limits: {
x: {min: 0, max: 400, minRange: 50},
y: {min: 0, max: 200, minRange: 50}
},
pan: {
enabled: true,
mode: 'xy',
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'xy',
}
}
},
maintainAspectRatio: false,
animation: {
duration: 0, // general animation time
},
elements: {
point: {
radius: 0
}
},
scales: {
x: {
grid: {
display:false
}
},
y: {
grid: {
display:false
},
ticks: {
autoSkip: true,
maxTicksLimit: 4
}
}
},
}
});
Chart.register(zoomPlugin);
</script>
</body>
</html>
I have tried the following in Swift
wkWebview.scrollView.delegate = self
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return nil
}
Chart JS: Old chart data not clearing
I'm trying to update Chart JS data entirely but the old data label on the x-axis not resetting. Is there anything wrong with my code? let netProfitData = #this.netProfitData; netProfitChart.data.datasets[0].data = netProfitData; console.log(netProfitChart.data.datasets); netProfitChart.data.datasets[0].backgroundColor = netProfitData.map((value) => value.y > 0 ? fullConfig.theme.colors.green[400] : fullConfig.theme.colors.red[400]); netProfitChart.update(); Data array in datasets seems correct to me.
This is because internally chart.js still populates the labels array so you will need to clear that one before replacing your data:
chart.data.labels = [];
chart.data.datasets[0].data = newData;
chart.update();
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 'hi',
y: 5
}, {
x: 'test',
y: 10
}, {
x: 'end',
y: 2
}],
borderColor: 'pink'
}]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
chart.data.labels = [];
chart.data.datasets[0].data = [{
x: 'k',
y: 1
}, {
x: 't',
y: 4
}, {
x: 'a',
y: 5
}];
chart.update();
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
AWS rekognition: How to process the output
I have got the output for aws-rekognition face detection. But I want to process the output i.e I want the cropped image to be stored in s3 bucket. So how to I process it and save it. Can anyone please help me with this? This is my output
{ JobStatus: 'SUCCEEDED',
VideoMetadata:
{ Codec: 'h264',
DurationMillis: 134802,
Format: 'QuickTime / MOV',
FrameRate: 23.976024627685547,
FrameHeight: 534,
FrameWidth: 1280 },
Faces:
[ { Timestamp: 4462, Face: { BoundingBox:
{ Width: 0.061342477798461914,
Height: 0.1805628538131714,
Left: 0.5905241966247559,
Top: 0.23422487080097198 },
Landmarks: [ { Type: 'eyeLeft',
X: 0.6156551241874695,
Y: 0.30313247442245483 },
{ Type: 'eyeRight',
X: 0.6457341313362122,
Y: 0.29226067662239075 },
{ Type: 'mouthLeft',
X: 0.6207911968231201,
Y: 0.38366419076919556 },
{ Type: 'mouthRight',
X: 0.6457210779190063,
Y: 0.3740907311439514 },
{ Type: 'nose', X: 0.6382492780685425, Y: 0.3447791337966919 } ],
Pose:
{ Roll: -8.287483215332031,
Yaw: 24.705015182495117,
Pitch: -16.02778434753418 },
Quality: { Brightness: 27.270671844482422, Sharpness: 5.775668621063232 },
Confidence: 99.99810791015625 } }
} ]
}
I have a demo solution for this problem, implemented in Python 3 on Github. Please feel free to use it and adjust accordingly. I have a function that specifically does the cropping for you, provided the files are on your local machine. See --> https://github.com/Kayokwa/multi_face_detection_and_search_using_aws_rekognition Ciao!
Chart.js - scaleType='date' not working
Using Chart.js, I'm trying to get the x-axis (and toolips) to show a DATE, but all I can get are large integers appearing as the x-axis label. I've compared what the example in the documentation does and I don't see what it's doing that i'm not. Can anyone please help?
Here's the tiny example that I created showing it not working.
(btw - as a side issue, notice that if the color of the RED line is spelled Red rather than red, the line looks normal, but tooltips no longer work on that line)
https://plnkr.co/edit/CKUf4zFC1vhe3VNUF5Lf?p=preview
javascript for the above plunker example is below
----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
<script>
var chartData = {
datasets: [{
borderColor: 'Red',
label: 'Capital R in borderColor, tooltips dont work',
data: [{
x: new Date('2011-04-11T11:45:00'),
y: 25
}, {
x: new Date('2011-04-11T12:51:00'),
y: 28
}, {
x: new Date('2011-04-11T14:10:00'),
y: 22
}, {
x: new Date('2011-04-11T15:15:00'),
y: 18
}]
}, {
borderColor: 'green',
label: 'borderColor all lower case, tooltips now work',
data: [{
x: new Date('2011-04-11T11:45:00'),
y: 15
}, {
x: new Date('2011-04-11T12:51:00'),
y: 18
}, {
x: new Date('2011-04-11T14:10:00'),
y: 12
}, {
x: new Date('2011-04-11T15:15:00'),
y: 8
}]
}, ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myScatterxx = Chart.Scatter(ctx, {
data: chartData,
scaleType: 'date',
options: { title: { display: true, text: "scaleType='date' isn't working", fontSize:36} },
});
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js">
</script>
</body>
</html>
First of all, since the documentation is messy, I'm not surprised you didn't get how to create a time-scale chart. The actual call is the following :
window.myScatterxx = Chart.Scatter(ctx, {
data: chartData,
options: {
title: {
display: true,
text: "it is now working",
fontSize: 36
},
scales: {
xAxes: [{
// This is the important part
type: "time",
}]
}
},
});
Now you have the correct syntax, you'd need to import the correct library as well. As I can see in the piece of code you gave, you imported Chart.min.js, but you need more since you know work with the time element.
You can either :
Import Moment.js (CDN link) and then Chart.min.js.
Import Chart.bundle.min.js, that contains both Moment and Chart libraries.
Finally, I also noticed in your code you had a problem displaying tooltips for the red dataset. It is because you defined its color as Red. Change it to red and tooltips will work again :
datasets: [{
borderColor: 'red',
label: 'Capital R in borderColor, tooltips now work',
data: [
// ...
]
}]
You can see all these fixes live in this jsFiddle, and here is the final result :
ChartNew.js - Remove/Hide zero label from Pie Chart
I'm trying to remove zero(0) label from pie chart in ChartNew.js.
Can't figure it out.
Below is the example:
var pieData = [
{
value: 0,
color: "sandybrown",
title: "label1",
},
{
value: 10,
color: "gold",
title: "label2",
},
{
value: 46,
color: "darkviolet",
title: "label3",
},
{
value: 0,
color: "green",
title: "label4",
},
{
value: 33,
color: "DeepSkyBlue",
title: "label5",
}
];
var myoptions = {
animateRotate : true,
animateScale : false,
animationByData : false,
animationSteps : 50,
canvasBorders : true,
canvasBordersWidth : 0,
canvasBordersColor : "black",
legend : true,
inGraphDataShow : true,
animationEasing: "linear",
annotateDisplay : true,
spaceBetweenBar : 5,
graphTitleFontSize: 18,
extrapolateMissingData : false
};
var myPie = new Chart(document.getElementById("canvas1").getContext("2d")).Pie(pieData, myoptions);
<SCRIPT src='https://rawgit.com/FVANCOP/ChartNew.js/master/ChartNew.js'></SCRIPT>
<canvas id="canvas1" height="500" width="500"></canvas>
[https://jsfiddle.net/boxxevolution/wb64oL66/2/][1]
Im trying to remove label1 and label4 from the chart.
As suggested by V-Q-A NGUYEN, add the following line in options, inGraphDataTmpl: "<%=(v6 > 0 ? v6+' %' : ' ')%>",