Balloontext Still Appears even with no data - amcharts

So I have a map that display and currently has all state data available except Puerto Rico. Even though when I dynamically load the data and Puerto Rico isn't apart of the data set it still is allowing me to hover over with balloontext. I want to disable Puerto Rico all together. Here is my map script:
function initializeFoodSafetyMap() {
var mapData = $('#foodSafetyMap').data('url');
var newmapdata = [];
var mapHeader = ['map-hdr-us'];
$.ajax({
url: mapData,
cache: false,
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (index, item) {
if (item.CategoryAmount > 0) {
newmapdata.push({
id: "US-" + item.GeoCode,
title: item.Category,
value: item.CategoryAmount,
balloonText: "<b>" + item.GeoName +
"</b>" + "<br>$" + item.CategoryAmount.toLocaleString(),
info: 'TEST',
color: "#91B2AB"
});
}
});
var map = AmCharts.makeChart("foodSafetyMap", {
type: "map",
"theme": "light",
dragMap: true,
fixedSize: false,
colorSteps: 10,
"responsive": {
"enabled": true,
// Rules
"rules": [
// at 500px wide, we hide baloons
{
"maxWidth": 500,
"overrides": {
"balloon": {
"enabled": false
},
"imagesSettings": {
"labelPosition": "middle",
"labelFontSize": 8
}
}
}
]
},
// End of Rules
"areasSettings": {
"autozoom": true,
outlineColor: "#000000"
},
dataProvider: {
map: "usaLow",
areas: newmapdata,
getAreasFromMap: true,
images: [
{
label: "AL",
latitude: -40,
longitude: 81,
linkToObject: "US-AL"
}, {
label: "AK",
latitude: -84,
longitude: -130,
linkToObject: "US-AK"
}, {
label: "AZ",
latitude: -4,
longitude: -85,
linkToObject: "US-AZ"
}, {
label: "AR",
latitude: -11,
longitude: 41,
linkToObject: "US-AR"
}, {
label: "CA",
latitude: 70,
longitude: -135,
linkToObject: "US-CA"
}, {
label: "CO",
latitude: 60,
longitude: -42,
linkToObject: "US-CO"
}, {
"label": "CT",
"latitude": 71,
"longitude": 180,
"linkToObject": "US-CT",
//labelBackgroundColor: "#cccccc",
labelBackgroundAlpha: .8
}, {
label: "DE",
//labelBackgroundColor: "#cccccc",
latitude: 38,
longitude: 180,
linkToObject: "US-DE",
labelBackgroundAlpha: .8
}, {
//labelBackgroundColor: "#cccccc",
label: "DC",
latitude: -20,
longitude: 180,
linkToObject: "US-DC",
labelBackgroundAlpha: .8
}, {
label: "FL",
latitude: -78,
longitude: 120,
linkToObject: "US-FL"
}, {
label: "GA",
latitude: -40,
longitude: 102,
linkToObject: "US-GA"
}, {
label: "HI",
latitude: -88.7,
longitude: -35.7,
linkToObject: "US-HI"
},
{
label: "PR",
latitude: -88.9,
longitude: 22.9,
linkToObject: "US-PR"
},
{
label: "ID",
latitude: 85,
longitude: -85,
linkToObject: "US-ID"
}, {
label: "IL",
latitude: 65,
longitude: 60,
linkToObject: "US-IL"
}, {
label: "IN",
latitude: 67,
longitude: 78,
linkToObject: "US-IN"
}, {
label: "IA",
latitude: 77,
longitude: 35,
linkToObject: "US-IA"
}, {
label: "KS",
latitude: 48,
longitude: 5,
linkToObject: "US-KS"
}, {
label: "KY",
latitude: 42,
longitude: 87,
linkToObject: "US-KY"
}, {
label: "LA",
latitude: -65,
longitude: 43,
linkToObject: "US-LA"
}, {
label: "ME",
latitude: 88.3,
longitude: 168,
linkToObject: "US-ME"
}, {
label: "MD",
//labelBackgroundColor: "#cccccc",
latitude: 10,
longitude: 180,
linkToObject: "US-MD",
labelBackgroundAlpha: .8
}, {
label: "MA",
latitude: 83.5,
longitude: 180,
linkToObject: "US-MA",
labelBackgroundAlpha: .8,
//labelBackgroundColor: "#cccccc",
}, {
label: "MI",
latitude: 82.7,
longitude: 85,
linkToObject: "US-MI"
}, {
label: "MO",
latitude: 48,
longitude: 40,
linkToObject: "US-MO"
}, {
label: "MN",
latitude: 87,
longitude: 28,
linkToObject: "US-MN"
}, {
label: "MS",
latitude: -40,
longitude: 61,
linkToObject: "US-MS"
}, {
label: "MT",
latitude: 88.2,
longitude: -55,
linkToObject: "US-MT"
}, {
label: "NE",
latitude: 75,
longitude: 0,
linkToObject: "US-NE"
}, {
label: "NV",
latitude: 75,
longitude: -107,
linkToObject: "US-NV"
}, {
label: "NH",
//labelBackgroundColor: "#cccccc",
latitude: 86.2,
longitude: 180,
linkToObject: "US-NH",
labelBackgroundAlpha: .8
}, {
label: "NJ",
//labelBackgroundColor: "#cccccc",
latitude: 58,
longitude: 180,
linkToObject: "US-NJ",
labelBackgroundAlpha: .8
}, {
label: "NM",
latitude: -10,
longitude: -46,
linkToObject: "US-NM"
}, {
label: "NY",
latitude: 85,
longitude: 140,
linkToObject: "US-NY"
}, {
label: "NC",
latitude: 23,
longitude: 128,
linkToObject: "US-NC"
}, {
label: "ND",
latitude: 88,
longitude: -5,
linkToObject: "US-ND"
}, {
label: "OH",
latitude: 70,
longitude: 98,
linkToObject: "US-OH"
}, {
label: "OK",
latitude: -6,
longitude: 11,
linkToObject: "US-OK"
}, {
label: "OR",
latitude: 87,
longitude: -122,
linkToObject: "US-OR"
}, {
label: "PA",
latitude: 78,
longitude: 128,
linkToObject: "US-PA"
}, {
label: "RI",
//labelBackgroundColor: "#cccccc",
latitude: 79,
longitude: 180,
linkToObject: "US-RI",
labelBackgroundAlpha: .8
}, {
label: "SC",
latitude: -12,
longitude: 117,
linkToObject: "US-SC"
}, {
label: "SD",
latitude: 84.5,
longitude: -5,
linkToObject: "US-SD"
}, {
label: "TN",
latitude: 12,
longitude: 83,
linkToObject: "US-TN"
}, {
label: "TX",
latitude: -65,
longitude: 0,
linkToObject: "US-TX"
}, {
label: "UT",
latitude: 66,
longitude: -77,
linkToObject: "US-UT"
}, {
label: "VT",
latitude: 87,
longitude: 150.5,
linkToObject: "US-VT"
}, {
label: "VA",
latitude: 55,
longitude: 128,
linkToObject: "US-VA"
}, {
label: "WA",
latitude: 89,
longitude: -112,
linkToObject: "US-WA"
}, {
label: "WV",
latitude: 60,
longitude: 112,
linkToObject: "US-WV"
}, {
label: "WI",
latitude: 85,
longitude: 53,
linkToObject: "US-WI"
}, {
label: "WY",
latitude: 82.5,
longitude: -47,
linkToObject: "US-WY"
}
],
lines: [
{
//DC LINE
latitudes: [66.8921, -20],
longitudes: [135.6241, 173]
}, {
//CT LINE
latitudes: [82.8921, 71],
longitudes: [153.8241, 173]
}, {
//DE LINE
latitudes: [69.0921, 38],
longitudes: [145.2241, 173]
}, {
//MD LINE
latitudes: [69.8921, 10],
longitudes: [136.8241, 172.5]
}, {
//MA LINE
latitudes: [84.0921, 83],
longitudes: [153.8241, 173]
}, {
//NH LINE
latitudes: [86.0921, 86.2],
longitudes: [156.8241, 173]
}, {
//NJ LINE
latitudes: [76.0921, 58],
longitudes: [147.8241, 173]
}, {
//RI LINE
latitudes: [83.0921, 78],
longitudes: [162.8241, 173.5]
}
]
},
zoomControl: {
zoomControlEnabled: true,
panControlEnabled: false
},
"imagesSettings": {
"labelPosition": "middle",
"labelFontSize": 11
},
"listeners": [{
"event": "clickMapObject",
"method": function (event) {
document.getElementById("info").innerHTML = '<hr><p><b>' + event.mapObject.title + '</b></p><p>' + event.mapObject.info + '</p>';
}
}]
});
}
});
}

I figured it out, I had to remove
getAreasFromMap: true,

Related

create slider animation with multiple traces in plotly js

I want to make create a slider animation with multiple traces in plotly js like the image below but it shows only trace 1.
when I click on the play button it only shows the first trace lines without any warning or error in the console.
I used version plotly-2-12.1.
enter image description here
let myArr = new Array(35).fill(0).map((d, i) => i + 1);
`Plotly.plot("graph", {
trace1: {
x: myArr,
y: [0, -5, 2, 5, 15, 1, 2, 5, 15, , 20, 5, 17],
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "Asas",
name: "rex",
marker: {
color: "rgb(128, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
trace2: {
x: myArr,
y: [0, 10, 20, 5, 17, 80, 3, , 20, 5, 17],
text: "Asas",
name: "rex",
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "as",
marker: {
color: "rgb(0, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
data: [trace1, trace2],
layout: {
xaxis: { autorange: false, range: [1, 35] },
yaxis: { autorange: false, range: [0, 100] },
updatemenus: [
{
type: "buttons",
xanchor: "left",
yanchor: "top",
direction: "right",
x: 0,
y: 0,
pad: { t: 60 },
showactive: false,
buttons: [
{
label: "Play",
method: "animate",
args: [
null,
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
fromcurrent: true,
},
],
},
{
label: "Pause",
method: "animate",
args: [
[null],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
},
],
},
],
sliders: [
{
currentvalue: {
prefix: "t = ",
xanchor: "right",
},
pad: { l: 130, t: 30 },
transition: {
duration: 500,
},
steps: myArr.map((t) => ({
label: t,
method: "animate",
args: [
[t],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
})),
},
],
},
frames: myArr.map((t) => ({
name: t,
data: [{ "transforms[0].value": t }],
})),
});`
enter image description here

Programmatically changing selection in v-data-table: bug in v-data-table or bug in my code?

I want to programatically control the selected items in a v-data-table.
I am trying to do this by pushing items onto and splicing items out of the selected variable that I passed to v-data-table's v-model.
This example works far better in a codepen:
https://codepen.io/masonk-the-decoder/pen/OJPdmaq?editable=true&editors=101
<div id="app">
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:top>
<v-switch v-model="singleSelect" label="Single select" class="pa-3"></v-switch>
</template>
</v-data-table>
<v-btn #click="clearSelection">Clear Selection</v-btn>
<v-btn #click="random">Select Random</v-btn>
</v-app>
</div>
const selected = [];
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
];
new Vue({
el: '#app',
vuetify: new Vuetify(),
watch: {
selected: (val) => console.log("selected watch: ", val),
},
data () {
return {
singleSelect: false,
selected,
desserts,
random() {
const idx = Math.floor(Math.random() * desserts.length);
selected.push(desserts[idx]);
console.log("Pushed: ", idx, desserts[idx]);
},
clearSelection() {
selected.splice(0, selected.length);
},
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},
})
What I've found is that when I press "select random" the first time, causing select.push to be called, it succeeds at changing the selection. But push the button again and nothing happens.
clearSelection never works.
Clicking to select always works.
Edit: Moving the handlers to methods makes it work. But, I don't understand why having the handlers in data broke anything. Closures are just bits of data themselves, so what's happening here?
(Codepen: https://codepen.io/masonk-the-decoder/pen/MWYLoyp)
const selected = [];
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
];
new Vue({
el: '#app',
vuetify: new Vuetify(),
watch: {
selected: (val) => console.log(val),
},
methods: {
random() {
const idx = Math.floor(Math.random() * desserts.length);
this.selected.push(desserts[idx]);
console.log("Pushed ", idx, desserts[idx]);
},
clearSelection() {
console.log(this.selected.length);
this.selected.splice(0, this.selected.length);
},
},
data () {
return {
singleSelect: false,
selected,
desserts,
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},
})
You can't refer to other data properties inside the data property. Also, why have you initialized both the selected array and the desserts array outside of the Vue instance? selected/deserts should be initialized inside the data property.

Ajax call time to load in django application

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>
You can test you django api using postman. You will get the execution time there.
Also if you want to profile your django app you can refer the following link profiling django

Custom label values for Y axis in amcharts

Can I set Custom label values for Y axis in amcharts js?
example : convert 10,20,30,... y-axis value to 'very low','low','high'
There are two solutions here.
The first solution uses a labelFunction in your valueAxis to specify what label you want given the value being drawn on the chart, i.e
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelFunction: function(value, valueText, valueAxis) {
switch (value) {
case 10:
valueText = "Very Low";
break;
case 20:
valueText = "Low";
break;
case 30:
valueText = "Average";
break;
case 40:
valueText = "Above Average";
break;
case 50:
valueText = "High";
break;
default:
valueText = "";
}
return valueText;
}
}
],
Demo:
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelFunction: function(value, valueText, valueAxis) {
switch (value) {
case 10:
valueText = "Very Low";
break;
case 20:
valueText = "Low";
break;
case 30:
valueText = "Average";
break;
case 40:
valueText = "Above Average";
break;
case 50:
valueText = "High";
break;
default:
valueText = "";
}
return valueText;
}
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.2,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
Note that this solution is slightly brittle in that you're depending on the value axis to generate the correct scale (increments of 10, for instance) and there isn't a guaranteed way to control that.
The better solution is to use guides instead to draw your axis labels, lines and ticks at the appropriate points on the axis, while disabling the ones generated by the axis to ensure that you get the correct lines:
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
//disable the axis' labels, gridAlpha and tickLength so you can
//draw them using guides
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 5,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 5,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 5,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength: 5,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 5,
lineAlpha: .15,
label: "High"
}]
}
]
Demo:
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 5,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 5,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 5,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength: 5,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 5,
lineAlpha: .15,
label: "High"
}]
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.2,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
In v4, you can use adapters to achieve this.
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 100,
strictMinMax: true,
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 2,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 2,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 2,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength:2,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 2,
lineAlpha: .15,
label: "High"
}]
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.1,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

AmXYChart - How to add padding to prevent hidden overflows

I have create a simple XY Chart graph with percent as y axes and customers as x axes, I randomised the data between 0...100% with a set of 184 points. and have a bit of difficulty display the lower/upper region values. I have included an image for the demonstration.
Here my config file, I cant seem to find some sort of offset/padding ?
{
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineColorField: 'color',
}],
valueAxes: [
{
title,
borderThickness: 0,
axisThickness: 2,
maximum: 100,
labelFunction: (e,val) => { return val + "%"; },
},
{
title,
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
};
Thanks.
There isn't a way to pad this without modifying your minimum and maximum to be further outside your 0-100 range to accommodate. Since you're using a labelFunction, you can set it up so that you don't display any labels above and below 0-100% if you want, for example:
labelFunction: (e, val) => { return (val > 100 || val < 0 ? "" : val + "%"); }
Demo below using -10 as a minimum and 110 as a maximum:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
labelFunction: (e,val) => { return (val > 100 || val < 0 ? "" : val + "%"); },
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
If you want to remove the extra grid lines from the additional points generated by the new minimum and maximum, you'll have to use guides as your grid lines and labels instead of the ones auto-generated by the chart. For example:
valueAxes: [{
guides: [{
"value": 0,
"label": "0%",
"lineAlpha": .2,
"tickLength": 5
},
// repeat for each tick/grid line
],
"gridAlpha": 0,
"tickLength": 0,
"labelsEnabled": false,
// ...
Demo:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
guides: [{
value: 0,
label: "0%",
lineAlpha: .2,
tickLength: 5
},{
value: 20,
label: "20%",
lineAlpha: .2,
tickLength: 5
},{
value: 40,
label: "40%",
lineAlpha: .2,
tickLength: 5
},{
value: 60,
label: "60%",
lineAlpha: .2,
tickLength: 5
},{
value: 80,
label: "80%",
lineAlpha: .2,
tickLength: 5
},{
value: 100,
label: "100%",
lineAlpha: .2,
tickLength: 5
}],
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

Resources