topic insert HTML code in Object Literals attribute in ArcGIS JavaScript Maps SDK Questions

insert HTML code in Object Literals attribute

SaraEL_MALKI — Wed, 27 Sep 2017 13:56:04 GMT

Hi guys,

I am working on a dojo Chart, I wanna turn all the X-axis text to buttons, that I can click them later on,

var circuits_1_=[];
for (var i = 0, len = FeaturesCC.length; i < len; i++) {
var circuit_1_={};
var FeatureCC = FeaturesCC[i];
id_circuit_array.push(FeatureCC.attributes['objectid']);

//var s = '<button id="myDivButton'+i+'">'+FeatureCC.attributes['layer']+'</button>';
//var x = document.createElement("BUTTON");
//var t = document.createTextNode(""+FeatureCC.attributes['layer']);
//x.appendChild(t);

circuit_1_={value:i+1, text:""+FeatureCC.attributes['layer']};
circuits_1_.push(circuit_1_);
}

I have tried this :

circuit_1_={value:i+1, text:"<button id='smth"+i+"' type='button'>"+FeatureCC.attributes['layer']+"</button>"};

but it doesn't work, HELP me please

Robert Scheitlin, GISP‌ Thomas Solow rastrauch

Re: insert HTML code in Object Literals attribute

RobertScheitlin__GISP — Wed, 27 Sep 2017 14:14:43 GMT

Sara,

That will not work and I am not aware of any way to accomplish that.

Re: insert HTML code in Object Literals attribute

SaraEL_MALKI — Wed, 27 Sep 2017 15:28:37 GMT

Okay sir, I think that I will go for another charting library, what do you suggest me ?

Re: insert HTML code in Object Literals attribute

RobertScheitlin__GISP — Wed, 27 Sep 2017 15:30:58 GMT

Sara,

I don't do much with charting but this is what Google returns:

20 best JavaScript charting libraries

Re: insert HTML code in Object Literals attribute

SaraEL_MALKI — Wed, 27 Sep 2017 15:33:49 GMT

Thank you sir for your time and your help

Re: insert HTML code in Object Literals attribute

JohnGrayson — Fri, 10 Dec 2021 22:39:31 GMT

Below is some code I pulled out of an old demo that does what you need. The task involves two steps. The first one is to augment the label nodes with a custom inner node (chartLabel) with custom attribute (date). The second step is to find them and add a 'click' event handler to those nodes AFTER they've been rendered.

//
// GET CHART LABELS //
//
getChartLabels: function (store) {
  // CHART LABELS //
  return store.query().map(lang.hitch(this, function (item, itemIdx) {
    var selectionClass = (itemIdx === 0) ? ".chartlabelselected" : "";
    var labelNode = put(lang.replace("chartLabel span{0}[date='{1}']<", [selectionClass, item.monthDate.valueOf()]), item.text);
    return {
     text: has("ie") ? item.text : labelNode.outerHTML,
     value: (itemIdx + 1)
     };
  }));
}

//
// CUSTOM AXIS LABEL BEHAVIOR //
//
aspect.after(this.monthlyChart, "render", lang.hitch(this, function (evt) {
  // ALLOW USERS TO CLICK ON DATE CHART LABEL TO SET MAP TIME EXTENT //
  query("chartLabel", this.monthlyChart.domNode).forEach(lang.hitch(this, function (node) {
    node.innerHTML = node.innerHTML.replace(/ /g, " ");
    on(node, "click", lang.hitch(this, function (evt) {
      var dateValue = domAttr.get(node.firstChild, "date");
      this.selectMonth(this.monthlyTotalsStore.get(dateValue));
    }));
  }));
}), true);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I hope this helps.