How do I make dygraph expand to fill height on div

Question

I am unable to get DyGraph to render to the correct height. My ideal is for graph to be 100% of main browser area height.

ie I would like it to fill all space between navbar and footer.

With set-up below I get a graph but it is just a single horizontal line. I don't want to specify a px height as I would like to fill whatever room is available.

_PnlDyGraph.cshtml:

<script type="text/javascript" src="dygraph-combined-dev.js"></script>
<h1>Title</h1>
<div id="mygrapharea" style="width: 100%; height:100%;"></div>
<script type="text/javascript">
    @{
        string txtER = (string)Session["PnlDataForChart"];
            <text>
               var dataT = "@txtER"
            </text>
     }
    g = new Dygraph(document.getElementById("mygrapharea"),
                dataT 
        );
</script>

_Traders.cshtml:

<div class="row">
    <div class="col-sm-6">
        @Html.Partial("~/Views/Employee/_PnlDyGraph.cshtml")
    </div>
</div>

_Layoutcshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @*<title>@ViewBag.Title - Platform</title>*@
    <title>Platform</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img src="~/Images/Banner_Front.png" alt="Banner" style="width:300px;height:50px;"/>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Traders", "Traders", "Traders")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()

        <hr />
        <footer>
            @*<p>&copy; @DateTime.Now.Year</p>*@
        </footer>
    </div>

    @*@Scripts.Render("~/bundles/jquery")*@
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

you should write this div in another div and specified div height in pixel and in inner div you will specified in percentage.

Without content, the height has no value to calculate the percentage of. The width, however, will take the percentage from the DOM, if no parent is specified.

for example.

<div   id="parent"  style="width: 100px; height: 1000px; background-color: orange">
  <div id="mygrapharea" style="width: 100px; height: 100%;   background-color: blue"></div>
</div>

i hope it will helps you

How do I make dygraph expand to fill height on div

Question

1 answers

solution1
1 2016-11-04 08:54:52

How do I make dygraph expand to fill height on div

Question

1 answers

solution1 1 2016-11-04 08:54:52

solution1
1 2016-11-04 08:54:52