Canvas JS graph overrides and removes my content

JavaScript
1

Hi all

I’m using CanvasJS to produce a visual graph, just testing for now with dummy content. The problem is, I can’t seem to add any extra markup inside the container without it being removed, once the graph is rendered, everything overrides my content.

Here is my fiddle of the setup: Graph test 1
This will show my html dropdown outside of the container which shows ok.

And here is the other fiddle: Graph test 2
This removes the dropdown because we have it inside the graph container.

My question. How do we keep the dropdown inside the graph container with it being removed?
Do we need to code the html into the javascript somehow? Or is there a simple fix?

Thanks, Barry

2

Try using your Graph test 1 format with the following CSS:

#select2 {
    position:absolute;
    top:250px; 
    left:0px;
    z-index: 9;
    width: 100%;
    text-align: center;    
}

This keeps the code outside the canvas box while positioning it in the right place. :smiley:

3

Right on! Thanks Allan.

The problem is, I need it to be inside the canvas box, like Graph 2 shows. But for some reason, when the chart renders, it removes the dropdown, this is what I don’t understand?

I can position the dropdown as needed, as you have shown, though it needs to be inside the container, in the code, not just visually.

Any ideas?

Cheers, Barry

4

CanvasJS replaces the contents of the container element, so any markup you put inside will be removed. That’s actually quite common behaviour for libraries like this. Can I ask why you need to put your dropdown within the container, rather than just positioning it with CSS?

5

I didn’t realise. I was wondering if there was a way so everything was not replaced or a way, somehow with javascript to code this in.

The reason being, I have a number of different graphs displaying inside a carousel which have different dropdowns. The example above, is just one slide of many, which have their own graph. As you can imagine, becomes quite tricky trying to position, hide and show things outside of their container #ID.

I might have to rethink things if this is not possible, maybe I can find a better solution.

Thnaks, Barry

6

Why not nest your chart container and dropdown inside each slide element, something like this:

<div class="slideContainer">

    <div id="chartContainer1"></div>

    <div class="chartOptions">
        <i>This is a list and dropdown</i>
        <select>
            <option value="1" selected="">This week</option>
            <option value="2">This month</option>
            <option value="3">This year</option>
        </select>
    </div>

</div>
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.