Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: how to have several graphics on the same webpage? #3498

Open
Phil353556 opened this issue Oct 28, 2023 · 4 comments
Open

Question: how to have several graphics on the same webpage? #3498

Phil353556 opened this issue Oct 28, 2023 · 4 comments
Labels

Comments

@Phil353556
Copy link

Phil353556 commented Oct 28, 2023

Hi,
sorry for this basic question, however I tried to duplicate without any succes, still only one is displayed.
Thank you for your answer
kind regards

<style>
#tooltip { font-size: 13px;padding: 0;margin-bottom: 80px; }
#tooltip li { list-style: none;float: left; padding: 0 10px; }
#tooltip li span:first-child { font-size: 16px; }
#chart .bb-title tspan:first-child { font-size: 17px; font-weight: bold; }
#tooltip2 { font-size: 13px;padding: 0;margin-bottom: 80px; }
#tooltip2 li { list-style: none;float: left; padding: 0 10px; }
#tooltip2 li span:first-child { font-size: 16px; }
#chart2 .bb-title tspan:first-child { font-size: 17px; font-weight: bold; }
</style>

<div id="chart"></div>
<div id="tooltip"></div>
<div id="chart2"></div>
<div id="tooltip2"></div>

<script>
var chart = bb.generate({
    title: {
	text: "--- graphics1"
        },
    bindto: "#chart",   
 .....
 
})

<script>
var chart = bb.generate({
    title: {
	text: "--- graphics2"
        },
    bindto: "#chart2",   
 .....
 
})
@netil netil added the question label Oct 30, 2023
@netil
Copy link
Member

netil commented Oct 30, 2023

@Phil353556, here's working demo

checkout possible syntax error.

@Phil353556
Copy link
Author

Ok, thank you. I found the syntax error.
however why if the two lines for chart2 and tooltip2 are deleted, both graphs are still displayed?
lines deleted:

<div id="chart2"></div> 
<div id="tooltip2"></div> 

I understood that graphs are displayed only if two lines such them are coded.
I tested on https://jsfiddle.net/netil/s5z0havq/8/

image

@netil
Copy link
Member

netil commented Oct 30, 2023

@Phil353556, from the API doc, bindto option states as:

In case of element doesn't exist or not specified, will add a <div> element to the body.

So, when specified #chart2 doesn't exist, it will append it.

and the why is working when tooltip2 is deleted, is because when specified tooltip element doesn't exist on DOM tree, it will use default tooltip element.

@Phil353556
Copy link
Author

Ok - thank you to point out the API Doc.
so the only way to not have a graph displayed is to delete the lines between <script> and </script> right ?
may be there is a way to think about to enhance this behavior? I don't know if it is technicaly feasible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants