html selector to specify the container

[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

[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.

[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