Problem:
I want to make a chart that looks like the image below
Now the problem is, I only have the start and end value of “Ideal Tasks Remaining”, start value is 2000 and end value 0. I have all the values for “Actual Tasks Remaining”. Is this kind of visualization possible in apex-chart or any chart for that matter? Thank you
I have tried giving just the start and end value but that line is not visible. Other line shows just fine.
Solution:
Maybe this will help. If you know the start and end values of y for the “Ideal Tasks Remaining” then you can calculate the slope of that line and its y values at each x point in your data. You can then feed this into the chart. Here is an example:
// Sample data
let days = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let sums = [2000, 2557, 1146, 1833, 990, 1250, 268, 700, 800, 90, 0]
// When x is 0, y is 2000
let x1 = 0 //
let y1 = 2000
// At the last point of the data, y is 0 <-- Assumed from the example chart posted
let x2 = days.slice(-1)
let y2 = 0
// Calcuate the slope of the Ideal Tasks Remaining line
let slope = (y2 - y1) / (x2 - x1)
// Calculate the y values of Ideal Tasks Remaining at each x
let trend = days.map((x) => slope * x + y1)
// Make the chart
let options = {
chart: { type: 'line' },
markers: {
size: 5
},
series: [
{
name: 'Actual Tasks Remaining',
data: sums
},
{ name: 'Ideal Tasks Remaining', data: trend }
],
xaxis: {
categories: days,
title: {
text: 'Itiration Timeline (days)'
}
},
yaxis: {
title: {
text: 'Sum of Task Estimates (days)'
}
}
}
let chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
