I am developing a django app using the Django Rest Framework with chart.JS in order to render some chart.
My ajax call is taking a long long long time and I am on local.. Is there a way to check what is taking so long in order to know where to look in order to refactor ?
it takes on average on local between 10 and 15 second each time.. Here is my code for example:
<script>
var endpoint = 'api/chart/data2'
$('.ajaxProgress').show();
$('.dashboard-container').hide();
function getAvg(grades) {
return grades.reduce(function (p, c) {
return p + c;
}) / grades.length;
}
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
console.log(data)
complete_data = data.team_complete,
info_data = data.team_info_score,
motiv_data = data.team_motiv_score,
action_data = data.team_action_score,
behaviour_data = data.team_behaviour_score,
user_list = data.users,
user_dist = data.user_dist,
info_dist = data.info_dist,
motiv_dist = data.motiv_dist,
action_dist = data.action_dist,
behav_dist = data.behav_dist,
info_label = data.info_label,
motivation_label = data.motivation_label,
action_label = data.action_label,
behav_label = data.behav_label,
complete_label = data.complete_label,
cohesiveness_score = data.cohesiveness_score
var bar_color = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 220, 89, 0.2)',
'rgba(255, 192, 35, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 220, 89, 0.2)',
'rgba(255, 192, 35, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(255, 99, 132, 0.2)'
]
var ctx = document.getElementById("mainGraph").getContext('2d');
var ctx2 = document.getElementById("mainGraph2").getContext('2d');
var ctx3 = document.getElementById("mainGraphLine1").getContext('2d');
var ctx4 = document.getElementById("mainGraphLine2").getContext('2d');
var ctx5 = document.getElementById("mainGraphLine3").getContext('2d');
var ctx6 = document.getElementById("mainGraphLine4").getContext('2d');
$('.ajaxProgress').hide();
$('.dashboard-container').show();
var canvas = document.getElementById("mainGraph");
var mainGraph = new Chart(ctx, {
type: 'bar',
data: {
labels: complete_label,
datasets: [{
data: complete_data,
backgroundColor: bar_color ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false}
}]
}
},
});
//end graph 1//
canvas.onclick = function(evt) {
var activePoints = mainGraph.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var str_label = label.toString()
console.log(str_label)
var value = chartData.datasets[0].data[idx];
if(label == "General,Details"){
$('#general').modal('show');
} else if(label == "Sameness,Difference"){
$('#sameness').modal('show');
} else if(label == "Visual,Auditory"){
$('#visual').modal('show');
} else if(label == "Static,Process"){
$('#static').modal('show');
} else if(label == "Best Scenario,Worst Scenario"){
$('#bestScenario').modal('show');
} else if(label == "Binary,Shades"){
$('#binary').modal('show');
} else if(label == "External,Internal"){
$('#external').modal('show');
} else if(label == "Go Away,Toward"){
$('#goAway').modal('show');
} else if(label == "Things"){
$('#things').modal('show');
} else if(label == "Variety,Routine"){
$('#variety').modal('show');
} else if(label == "Active,Reaction"){
$('#active').modal('show');
} else if(label == "Manager worker"){
$('#manager').modal('show');
} else if(label == "Option,Procedure"){
$('#option').modal('show');
} else if(label == "Perfection,Optimizing"){
$('#perfection').modal('show');
} else if(label == "Sensor,Intuition"){
$('#sensor').modal('show');
} else if(label == "External locus,Internal locus"){
$('#locus').modal('show');
} else if(label == "Strong Will,Compliant"){
$('#will').modal('show');
} else if(label == "In time,Through time"){
$('#time').modal('show');
} else{
$('#modeling').modal('show');
}
}}
;
//graph 2 //
var mainGraph2 = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: user_list,
datasets: [{
data: user_dist,
backgroundColor: bar_color ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
min: 0,
max:100,
}
}]
},
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: getAvg(user_dist),
borderColor: "rgba(216, 138, 138, 1)",
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 10,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 2//
//graph 3 //
var mainGraphLine1 = new Chart(ctx3, {
type: 'line',
data: {
labels: info_label,
datasets: [{
data: info_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(info_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 3//
//graph 4 //
var mainGraphLine2 = new Chart(ctx4, {
type: 'line',
data: {
labels: motivation_label,
datasets: [{
data: motiv_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(motiv_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 4//
//graph 5 //
var mainGraphLine3 = new Chart(ctx5, {
type: 'line',
data: {
labels: action_label,
datasets: [{
data: action_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(action_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 5//
//graph 6 //
var mainGraphLine4 = new Chart(ctx6, {
type: 'line',
data: {
labels: behav_label,
datasets: [{
data:behav_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)',
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(behav_dist),
borderColor: "rgba(216, 138, 138, 0.8)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 6//
}
})
</script>
