Home › Forums › Chart Support › My chart doesn't expand inside a div tag so a scroll bar is created

My chart doesn't expand inside a div tag so a scroll bar is created

Viewing 2 posts - 1 through 2 (of 2 total)
  • December 1, 2017 at 1:11 am #17804

    MMM333

    Image Of Chart

    So I render a chart inside a partial view. Instead of the partial view filling out the space on the main page, a scroll bar is created instead and the partial view doesn’t expand… I’m not sure how to describe my problem fully so I posted a pic. 

    console.log('test');
function getFun() {
    var chart = new CanvasJS.Chart("chartContainer", {
		theme: "theme2",
		animationEnabled: true,
		title: {
			text: "Simple Column Chart in ASP.NET MVC"
		},
		subtitles: [
			{ text: "Try Resizing the Browser" }
		],
		data: [
		{
			type: "column", //change type to bar, line, area, pie, etc
			dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
			]
                                //Uncomment below line to add data coming from the controller.
		}
		]
	});
	chart.render();
}
    @{ 
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">getFun();</script>
    <div id="chartContainer">
    </div>
    <!DOCTYPE html>
<html> 
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title MM-3</title>
        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/unobtrusive")
        @model IEnumerable<RoboticUI.Models.ResultantRead>

    	<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
	<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
	<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
	<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
        <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
	<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>    
        <script src="~/Scripts/AutocompleteScript.js"></script>
        <script src="~/Scripts/chartJsTrial.js"></script>
        <link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" />
    </head>
<body style="font-family:Verdana;">
    
    <div class="container">
        <header>
            <div class="headerContent">
            <p>Robot Gallery</p>
                </div>
        </header>

        <div class="menu-content" style="overflow:auto">
            <div class="menu">
                <p>@Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
                <p>@Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
                <p>@Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p>
            </div>
            <div id="navResult" class="main">
                
                <h2 id="cc">Lorum Ipsum</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            </div>
        </div>
        <footer>Copyright &copy MMM</footer>
    </div>
    @RenderBody()
</body>

</html>
    header, footer {
    background-color: #68bbff;
    height: 5%;
    text-align: center;
}
div.headerContent p{
    display:inline-block;
}

div.headerContent p.CompanySearchBar{
    float:right;
}
div.container {
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.menu {
    float: left;
    width: 5%;
    text-align: center;
}
.menu-content {
    padding-bottom: .2em;
}
.menu a {
        border: 2px solid #4CAF50;
        border-radius: 15px 100px;
        text-align: center;
        font-size: 12px;
        display:block;
        padding:20px;
}
.menu a:hover{
    background-color:#4CAF50;
}
.main {
    float: left;
    width: 95%;
    padding: 0 20px;
}

@media only screen and (max-width:620px) {
    /* For mobile phones: */
    .menu, .main, .right {
        width: 100%;
    }
}

    I’m not really sure if the .css is ruining my page. Or if it’s the actual chart it self that ruins the responsive style website.

    • This topic was modified 6 years, 11 months ago by MMM333.
    • This topic was modified 6 years, 11 months ago by MMM333.
    December 6, 2017 at 11:01 am #17868

    Indranil

    @mmm333,

    Can you please create a sample project and share it with us so that we can look into the code and help you out.

    ___________
    Indranil Deo,
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.