Home forums Using CanvasJS My chart doesn't expand inside a div tag so a scroll bar is created

This topic contains 1 reply, has 2 voices, and was last updated by  Indranil Deo 1 week, 3 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #17804

    MMM333
    Member

    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://canvasjs.com/assets/script/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 2 weeks, 1 day ago by  MMM333.
    • This topic was modified 2 weeks, 1 day ago by  MMM333.
    #17868

    Indranil Deo
    Member

    @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.