Optimizing ajax request for a large data set - ajax

Question

Need some help with a ajax use case.
I need to render a graph on a data that has a size of 45 MB approx, I am sending a ajax request on button click to get that data from server and then render the graph on the client side based upon the response.
The problem is due to the content size Content Downloading time is so long which is around 23s. I need to optimize it to around 5s.
Can anyone recommend a solution for this use case?
I have attached the timing stats of the ajax request.
AJAX REQUEST STATS IMAGE
Here is the ajax function
<script>
function generateGraph() {
$.ajax({
type: "GET",
url: "/test",
success: function (data) {
var records = data;
console.log(records.length);
var x = records[0];
var y = records[1];
Plotly.addTraces('myDiv', [
{
x: x,
y: records[1],
type: 'scattergl',
mode: "line"
},
{
x: x,
y: records[2],
type: 'scattergl',
mode: "line"
},
{
x: x,
y: records[3],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[4],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[5],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[6],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[7],
type: 'scattergl'
}, {
x: x,
y: records[3],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[8],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[9],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[10],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[11],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[12],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[13],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[14],
type: 'scattergl',
mode: "line"
}, {
x: x,
y: records[15],
type: 'scattergl',
mode: "line"
},
{
x: x,
y: records[16],
type: 'scattergl',
mode: "line"
},
{
x: x,
y: records[17],
type: 'scattergl',
mode: "line"
},
{
x: x,
y: records[18],
type: 'scattergl',
mode: "line"
}
]);
}
});
}
Plotly.newPlot('myDiv', [{type: 'scattergl'}], {});
</script>