insert HTML code in Object Literals attribute

[SaraEL_MALKI]

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

[RobertScheitlin__GISP · Accepted solution]

Sara,

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

[SaraEL_MALKI]

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

[RobertScheitlin__GISP]

Sara,

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

20 best JavaScript charting libraries 

[SaraEL_MALKI]

Thank you sir for your time and your help

[JohnGrayson]

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.