Is there a easy way to convert a chart dataset to html polyline image. I looked online but I couldn't find any information. Website like https://www.coingecko.com/en use it to save data, when loading a image instead of the whole dataset.
I would like to convert this dataset
[[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]]
This this a examples of the chart I would like to convert. only the line
var options = {
chart: {
type: "line",
height: 300,
},
grid: {
show: false,},
yaxis: {
show: false},
series: [{
data:
[[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]]
}],
};
var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);
chart.render(); <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
<div id="timeline-chart"></div>
</div>Having looked at the code produced by the chart library it would be quite messy to extract the graph line only and make into a polyline - it is drawn as separate lines alongside the icons and axes so would take some disentangling.
It would seem easier just to create a polyline from the given points.
This snippet takes the array of points, finds the min and max values and creates a polyline within an svg by scaling appropriately.
const height = 300; //the number of pixels high the chart is to be
const points = [[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]];
const len = points.length;
let minx = points[0][0]
let maxx = points[0][0];
let miny = points[0][1];
let maxy = points[0][1];
points.forEach( (point) => {
minx = (point[0] < minx) ? point[0] : minx;
maxx = (point[0] > maxx) ? point[0] : maxx;
miny = (point[1] < miny) ? point[1] : miny;
maxy = (point[1] > maxy) ? point[1] : maxy;
} );
function setup() {
const width = window.innerWidth;
let svg = '<svg width="' + width + '" height="' + (height+4) + '"><polyline points="';
points.forEach( (point) => {
svg = svg + ((point[0] - minx) / (maxx - minx)) * width + ',' + (height - ((point[1] - miny) / (maxy - miny)) * height + 2) + ' ';
});
svg = svg + '" stroke-linejoin="round" style="fill: transparent; stroke:blue; stroke-width:4" /></svg>';
document.querySelector('div').innerHTML = svg;
}
window.onresize = setup;
setup();<div></div>