Select to view content in your preferred language

[Arcade] Using Date Type of data in a chart by using tierce API

131
0
07-16-2024 03:15 AM
JasonBOCQUET
Frequent Contributor

Hi,

I have a code to retrieve and list all of the rows who have the same ID that the point i'm clicking on and showing this list on the pop-up box of the point. 

Now, I want to use this code to retrieve a list of establishment who have a common ID with the establishment that i'm clicking on and see what are they opening and closing date.

 

To do that i found quickchart (i already use it for other case, work very well) propose a GANTT chart.

 

Here is my code :

 

var date_crea = $feature.ets_date_creation
var Ending = Date('2024-07-16')
var fs = FeatureSetByName($map, "Ancienneté d'implantation siège", ['ets_date_creation', 'ets_siren'], false)
var filt_fs = Filter(fs, `ets_siren = '${$feature['ets_siren']}'`)

var match_arr = []
for (var f in filt_fs) {
  Push(match_arr, Text(f['ets_date_creation'],'YYYY MM DD'))
}

var HTML = ""
HTML += "<p style='text-align: center; line-height: 0.1;'><strong><span style='font-size: 30px; font-family: Calibri, sans-serif; color: rgb(1, 42, 132);'>"+Concatenate(match_arr, "<br>")+"</span></strong></p>"



var param_charts = {
  type: 'horizontalBar',
  data: {
    labels: match_arr,
    datasets: [{
      data: [
        [date_crea, Ending],
      ],
    }, ],
  },
  options: {
    legend: {
      display: false
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: Date('2021-10-30'),
        borderColor: 'red',
        borderWidth: 1,
        label: {
          enabled: true,
          content: 'Deadline',
          position: 'top'
        }
      }]
    },
    scales: {
      xAxes: [{
        position: 'top',
        type: 'time',
        time: {
          unit: 'month',
          parser : 'YYYY-MM-DD'
        },
        ticks: {
          min: date_crea,
          max: Ending,
        }
      }],
    },
  },
}
var param_url = URLEncode(Text(param_charts)) 
var chart_url="https://quickchart.io/chart" + "?width=600&height=600&v=2&c=" + param_url
HTML += `<img src='${chart_url}' /></div>`

return { 
	type : 'text', 
	text : HTML
}

 

when i call "date_crea" (the creation date) to make the left terminal of the X axis, it works the API recognize the date. But when i use the creation date in the data to create the content on the chart, i see nothing.

 

Anyone have an idea to see my data on the chart ?

0 Replies