tengo un problema al utilizar la libreria CanvasJS. Defino el siguiente div:
<div id="resizable" style="height: 300px;"><div id="chartContainer1" style="height: 100%; width: 100%;"></div></div>Y añado este script el antes de cerrar el body:
$(document).ready(function () { //Better to construct options first and then pass it as a parameter var options1 = { title: { text: "Chart inside a jQuery Resizable Element" }, animationEnabled: true, data: [ { type: "column", //change it to line, area, bar, pie, etc dataPoints: [ { y: 10 }, { y: 6 }, { y: 14 }, { y: 12 }, { y: 19 }, { y: 14 }, { y: 26 }, { y: 10 }, { y: 22 } ] } ] }; $("#resizable").resizable({ create: function (event, ui) { //Create chart. $("#chartContainer1").CanvasJSChart(options1); }, resize: function (event, ui) { //Update chart size according to its container's size. $("#chartContainer1").CanvasJSChart().render(); } });});Esta como en el ejemplo que viene en la documentación, solo he cambiado
window.onload = function () {Por esto:
$(document).ready(function () {Pero a la hora de cargar la página, no me aparece al 100% de ancho, sino solo un 30% mas o menos, pero si reduzco el tamaño de la ventana y la agrando, si se coloca con ancho al 100%. Alguna idea de cual puede ser el problema? Gracias!
El contenido html importante seria asi:
Css del head
<link href="path_to_folder/css/jquery-ui.min.css" rel="stylesheet" />Inicio del body
<div class="container" style="margin-bottom:20px;margin-top: 20px;"><div class="row"><div class="col-md-12"><div id="resizable" style="height: 300px; width:100%;"><div id="chartContainer1" style="height: 100%; width: 100%;"></div></div></div></div></div>El footer seria asi
<script src="path_to_folder/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="path_to_folder/js/jquery-ui.min.js"></script><script type="text/javascript" src="path_to_folder/js/jquery.canvasjs.min.js"></script>Y debajo de esto va el script que he añadido arriba
