Side By Side Placement Instead Of Vertically Placed Charts
I would like to place the charts side by side but they are being rendered one below another . Please suggest how to do this. I don't want to use a Dashboard panel for it. Can we ac
Solution 1:
This is a HTML Styling question. Whether HTML elements are displayed on a new line, or on the same line depend on a few different things. If the width is not sufficient to display two elements side by side, the second element will be wrapped to the next line. Basically there are two issues:
- Is the width of the Parent Element wide enough to display the children side by side
- Is the style setting, set to Inline or Block.
This is the HTML in question:
<div><divid="col_chart"style="width: 500px; height: 600px;"></div><divid="investedpie_chart"style="width: 700px; height: 700px;"></div><divid="currentpie_chart"style="width: 700px; height: 700px;"></div></div>What happens if you set the width of the parent DIV?
<divstyle="width: 2000px;"><divid="col_chart"style="width: 500px; height: 600px;"></div><divid="investedpie_chart"style="width: 700px; height: 700px;"></div><divid="currentpie_chart"style="width: 700px; height: 700px;"></div></div>In some situations, using float: left or float: right can work or some combination of the two.
You can also research existing StackOverflow questions like these:
Solution 2:
This worked for me:
<body><table><tr><td><divid="chart_div"style="width: 300px; height: 300px;"></div></td><td><divid="chart2_div"style="width: 300px; height: 300px;"></div></td></tr><table>
Post a Comment for "Side By Side Placement Instead Of Vertically Placed Charts"