javascript - CanvasJS graphs skewed until zoom level changed? -
window.onload = function() { var chart = new canvasjs.chart("chartcontainer", { zoomenabled: false, animationenabled: true, title: { text: "mobile phone subscriptions" }, axisy2: { valueformatstring: "0.0 bn", maximum: 1.2, interval: .2, interlacedcolor: "#f5f5f5", gridcolor: "#d7d7d7", tickcolor: "#d7d7d7" }, theme: "theme2", tooltip: { shared: true }, legend: { verticalalign: "bottom", horizontalalign: "center", fontsize: 15, fontfamily: "lucida sans unicode" }, data: [{ type: "line", linethickness: 3, axisytype: "secondary", showinlegend: true, name: "india", datapoints: [{ x: new date(2001, 0), y: 0 }, { x: new date(2002, 0), y: 0.001 }, { x: new date(2003, 0), y: 0.01 }, { x: new date(2004, 0), y: 0.05 }, { x: new date(2005, 0), y: 0.1 }, { x: new date(2006, 0), y: 0.15 }, { x: new date(2007, 0), y: 0.22 }, { x: new date(2008, 0), y: 0.38 }, { x: new date(2009, 0), y: 0.56 }, { x: new date(2010, 0), y: 0.77 }, { x: new date(2011, 0), y: 0.91 }, { x: new date(2012, 0), y: 0.94 } ] }, { type: "line", linethickness: 3, showinlegend: true, name: "china", axisytype: "secondary", datapoints: [{ x: new date(2001, 00), y: 0.18 }, { x: new date(2002, 00), y: 0.2 }, { x: new date(2003, 0), y: 0.25 }, { x: new date(2004, 0), y: 0.35 }, { x: new date(2005, 0), y: 0.42 }, { x: new date(2006, 0), y: 0.5 }, { x: new date(2007, 0), y: 0.58 }, { x: new date(2008, 0), y: 0.67 }, { x: new date(2009, 0), y: 0.78 }, { x: new date(2010, 0), y: 0.88 }, { x: new date(2011, 0), y: 0.98 }, { x: new date(2012, 0), y: 1.04 } ] }, { type: "line", linethickness: 3, showinlegend: true, name: "usa", axisytype: "secondary", datapoints: [{ x: new date(2001, 00), y: 0.16 }, { x: new date(2002, 0), y: 0.17 }, { x: new date(2003, 0), y: 0.18 }, { x: new date(2004, 0), y: 0.19 }, { x: new date(2005, 0), y: 0.20 }, { x: new date(2006, 0), y: 0.23 }, { x: new date(2007, 0), y: 0.261 }, { x: new date(2008, 0), y: 0.289 }, { x: new date(2009, 0), y: 0.3 }, { x: new date(2010, 0), y: 0.31 }, { x: new date(2011, 0), y: 0.32 }, { x: new date(2012, 0), y: 0.33 } ] } ], legend: { cursor: "pointer", itemclick: function(e) { if (typeof(e.dataseries.visible) === "undefined" || e.dataseries.visible) { e.dataseries.visible = false; } else { e.dataseries.visible = true; } chart.render(); } } }); chart.render(); }#control_panel_container { text-align: center; } .cp_content_container { padding-top: 12px; text-align: left; color: #373737; } .cp_content_container > div { display: none; } input.control_panel_tabs { display: none; } label.control_panel_tabs { font-family: verdana, tahoma, sans-serif; font-weight: 600; background-color: #c0b9c7; color: white; display: inline-block; padding: 15px 25px; text-align: center; border: 2px solid black; border-radius: 15px; } label.control_panel_tabs:hover { background-color: #aa95b9; color: #fff; cursor: pointer; } input:checked + label.control_panel_tabs { background: #9471ab; color: #fff; } #cp_tab1:checked ~ .cp_content_container #cp_content1, #cp_tab2:checked ~ .cp_content_container #cp_content2 { display: block; }<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="control_panel_container"> <input class="control_panel_tabs" id="cp_tab1" type="radio" name="cp_tabs" checked> <label class="control_panel_tabs" for="cp_tab1">tab 1</label> <input class="control_panel_tabs" id="cp_tab2" type="radio" name="cp_tabs"> <label class="control_panel_tabs" for="cp_tab2">tab 2</label> <div class="cp_content_container"> <div id="cp_content1"></div> <div id="cp_content2"> <div id="chartcontainer" style="height: 300px; width: 100%;"></div> </div> </div> </div>i have chart in tab that's default hidden. when user clicks on tab, appear. however, they're skewed bit, smooshed horizontally , stretched vertically. see fiddle mean, it's under "tab 2".
changing browser's zoom level (in firefox @ least) seems make correct itself.
i noticed if put inside tab 1, however, on page load displays correctly. it's when it's not default tab warp around , requires zoom change display correctly.
what's going on here? looks graph rendered when open tab (judging animation). thinking maybe it's because of display property in css maybe it's because needs rendered @ page load?
here's editable fiddle: http://jsfiddle.net/ryfy8j9s/1/
the problem chart's default width set 500, , though calling chart.render() in window.onload, since container not visible creates chart @ default width , it's stuck there until chart.render() called again (e.g., window resize). this isn't issue. example, if resize window fix chart, click on tab1, resize window again, , click tab2, once again chart wrong size.
you set explicit width when chart created, make chart non-responsive resize, isn't want.
i suggest click handler on tab2 check exact situation , call chart.render() if chart visible , not same size container:
window.onload = function () { $("#cp_tab2").on("click", function() { if ($("#chartcontainer").is(":visible") && $("#chartcontainer canvas").width() !== $("#chartcontainer").width()) { chart.render(); } }); var chart = new canvasjs.chart("chartcontainer", { zoomenabled: false, // etc. i tried on fiddle , fixes issue. see fork of jsfiddle. working.
Comments
Post a Comment