html selector to specify the container

• April 6, 2015 at 5:40 pm #8541
  
  andrei.turcu

  Hi there,
  Canvas js renders in the HTML element with id specified in the constructor. This becomes a real problem, since I am rendering it in a template using marionette.view, therefore, for the different charts the id’s the same, but the selector differs, or, better said the DOM tree path to that element is different. It seems that default, the chart is rendered into the very first element that matches id in the dom tree.
  Example:
  CanvasJS.Chart($(“.firstChartClass #chart”).attr(‘id’), someChart) and
  CanvasJS.Chart($(“.secondChartClass #chart”).attr(‘id’) , anotherChart)
  will render both charts in the same element, the first one parsed in the DOM tree. Actually, first chart is rendered, and the second is rendered over the first one, but visually you only see the second. Is there really no other way to specify the container, than the ID as a string?
  Of course I could create distinct IDs, but that would result in duplicating all the html templates and this is not what I want.

  thanks and regards,
  andrei turcu

  April 6, 2015 at 6:51 pm #8546
  
  andrei.turcu

  I solved the problem by customizing the template and generating distinct IDs. I also found out that having multiple elements with the same ID is a bad practice and should be avoided. Still, it would have been nice to have alternative ways of specifying the container.

  April 6, 2015 at 8:12 pm #8567
  
  Sunil Urs

  Andrei,

  ID is not an absolute necessity. In case of plain JavaScript API you can also pass the DOM element directly. In case you jQuery it just renders inside the first selected element (based on any given selector) – ID is not required.

  —
  Sunil Urs