When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended.
var chart1;
function createGraph(mpy)
{
if (mpy == undefined) mpy = 12.00;
chart1 = new cfx.Chart();
chart1.getData().setSeries(1);
chart1.getAxisY().setMin(baseRoi-50);
chart1.getAxisY().setMax(finalroi+50);
var series1 = chart1.getSeries().getItem(0);
series1.setGallery(cfx.Gallery.Area);
var data=generateChartData(mpy);
chart1.setDataSource(data);
var graphContainer = document.getElementById('ChartDiv');
chart1.create(graphContainer);
}
Here is how my HTML is structured:
<div id="pnlROIDetails">
<label id="lblRoiResult"> </label>
<div id="pnlROIChart">
<label id="lblHelp">Help</label>
<div id="jqxgrid" style="font-size: 13px; font-family: Verdana; float: left;"> </div>
</div>
<div id="pnlROIGraph" style="clear:both">
<div id="ChartDiv" style="width:700px;height:500px; float:left;">
</div>
</div>
I believe that fixing this issue requires some CSS adjustments, although I am not certain on the exact solution. Any guidance or assistance would be highly appreciated. Thank you!