Login to Ask a Question or Reply
You must be logged in to post your query.
Home › Forums › Chart Support › How i can resize the chart after the full screen expansion
How i can resize the chart after the full screen expansion
- This topic has 2 replies, 2 voices, and was last updated 5 years, 9 months ago by
Devikagopakumar.
Viewing 3 posts - 1 through 3 (of 3 total)
-
March 4, 2019 at 5:39 pm #24540
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css "> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script > <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script > <title>Full_Screen</title> <style> .panel-actions { margin-top: -20px; margin-bottom: 0; text-align: right; } .panel-actions a { color:#333; } .panel-fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0px; right:0px; left: 0px; bottom: 0; overflow: auto; } </style> </head> <body> <div class="container" > <div class="row" > <div class="col-md-8" > <h2>Fullscreen toggle</h2> <div class="panel panel-default" > <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> <ul class="list-inline panel-actions"> <li><a href="#" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li> </ul> </div> <div class="panel-body"> <div id="chartContainer1" style="height: 200px; width: 100%;"></div> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </div> </div> </div> </div> </div> <script> $(document).ready(function () { //Toggle fullscreen $("#panel-fullscreen").click(function (e) { document.getElementById("chartContainer1").style.width="100%"; document.getElementById("chartContainer1").style.height="100%"; e.preventDefault(); var $this = $(this); if ($this.children('i').hasClass('glyphicon-resize-full')) { $this.children('i').removeClass('glyphicon-resize-full'); $this.children('i').addClass('glyphicon-resize-small'); } else if ($this.children('i').hasClass('glyphicon-resize-small')) { $this.children('i').removeClass('glyphicon-resize-small'); $this.children('i').addClass('glyphicon-resize-full'); } $(this).closest('.panel').toggleClass('panel-fullscreen'); window.dispatchEvent(new Event('resize')); }); }); window.onload = function () { var chart = new CanvasJS.Chart("chartContainer1", { axisX: { valueFormatString: "MMM YYYY" }, toolTip: { shared: true }, data: [{ type:"spline", name: "Zone 00", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 409 }, { x: new Date(2014, 01, 01), y: 420}, { x: new Date(2014, 02, 01), y: 450 }, { x: new Date(2014, 03, 01), y: 300}, { x: new Date(2014, 04, 01), y: 450}, { x: new Date(2014, 05, 01), y: 470}, { x: new Date(2014, 06, 01), y: 500 }, { x: new Date(2014, 07, 01), y: 875 }, { x: new Date(2014, 08, 01), y: 875 }, { x: new Date(2014, 09, 01), y: 875 }, { x: new Date(2014, 10, 01), y: 875 }, { x: new Date(2014, 11, 01), y: 500 }, { x: new Date(2015, 00, 01), y: 500 }, { x: new Date(2015, 01, 01), y: 500 }, { x: new Date(2015, 02, 01), y: 490 }, { x: new Date(2015, 03, 01), y: 580}, { x: new Date(2015, 04, 01), y: 580 }, { x: new Date(2015, 05, 01), y: 1600}, { x: new Date(2015, 06, 01), y: 1600 }, { x: new Date(2015, 07, 01), y: 1600 }, { x: new Date(2015, 08, 01), y: 1210 }, { x: new Date(2015, 09, 01), y: 1210 }, { x: new Date(2015, 10, 01), y: 1210 }, { x: new Date(2015, 11, 01), y: 1750 }, { x: new Date(2016, 00, 01), y: 1750}, { x: new Date(2016, 01, 01), y: 1750 }, { x: new Date(2016, 02, 01), y: 1750 }, { x: new Date(2016, 03, 01), y: 1880 }, { x: new Date(2016, 04, 01), y: 1890}, { x: new Date(2016, 05, 01), y: 2000 }, { x: new Date(2016, 06, 01), y: 2000 }, { x: new Date(2016, 07, 01), y: 2100 }, { x: new Date(2016, 08, 01), y: 2100 }, { x: new Date(2016, 09, 01), y: 2100 }, { x: new Date(2016, 10, 01), y: 2100 }, { x: new Date(2016, 11, 01), y: 1300 }, { x: new Date(2017, 00, 01), y: 2300 }, { x: new Date(2017, 01, 01), y: 2300 }, { x: new Date(2017, 02, 01), y: 2350 }, { x: new Date(2017, 03, 01), y: 2350 }, { x: new Date(2017, 04, 01), y: 2500 }, { x: new Date(2017, 05, 01), y: 2500 } ] }, { type:"spline", name: "Zone 01", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 450 }, { x: new Date(2014, 01, 01), y: 450}, { x: new Date(2014, 02, 01), y: 450 }, { x: new Date(2014, 03, 01), y: 300}, { x: new Date(2014, 04, 01), y: 300}, { x: new Date(2014, 05, 01), y: 300}, { x: new Date(2014, 06, 01), y: 1000 }, { x: new Date(2014, 07, 01), y: 1000}, { x: new Date(2014, 08, 01), y: 1000 }, { x: new Date(2014, 09, 01), y: 1200}, { x: new Date(2014, 10, 01), y: 1200}, { x: new Date(2014, 11, 01), y: 1220}, { x: new Date(2015, 00, 01), y: 100 }, { x: new Date(2015, 01, 01), y: 100 }, { x: new Date(2015, 02, 01), y: 500 }, { x: new Date(2015, 03, 01), y: 580}, { x: new Date(2015, 04, 01), y: 580 }, { x: new Date(2015, 05, 01), y: 950}, { x: new Date(2015, 06, 01), y: 950 }, { x: new Date(2015, 07, 01), y: 950 }, { x: new Date(2015, 08, 01), y: 200 }, { x: new Date(2015, 09, 01), y: 200 }, { x: new Date(2015, 10, 01), y: 200 }, { x: new Date(2015, 11, 01), y: 800 }, { x: new Date(2016, 00, 01), y: 850}, { x: new Date(2016, 01, 01), y: 850 }, { x: new Date(2016, 02, 01), y: 850 }, { x: new Date(2016, 03, 01), y: 1700 }, { x: new Date(2016, 04, 01), y: 1700}, { x: new Date(2016, 05, 01), y: 1700 }, { x: new Date(2016, 06, 01), y: 1750 }, { x: new Date(2016, 07, 01), y: 1750 }, { x: new Date(2016, 08, 01), y: 1750 }, { x: new Date(2016, 09, 01), y: 1600 }, { x: new Date(2016, 10, 01), y: 1600 }, { x: new Date(2016, 11, 01), y: 1600 }, { x: new Date(2017, 00, 01), y: 1800 }, { x: new Date(2017, 01, 01), y: 2000 }, { x: new Date(2017, 02, 01), y: 2000 }, { x: new Date(2017, 03, 01), y: 2350 }, { x: new Date(2017, 04, 01), y: 2350 }, { x: new Date(2017, 05, 01), y: 2350 } ] }, { type: "spline", name: "Zone 02", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 410 }, { x: new Date(2014, 01, 01), y: 500 }, { x: new Date(2014, 02, 01), y: 600 }, { x: new Date(2014, 03, 01), y: 1180 }, { x: new Date(2014, 04, 01), y: 1000 }, { x: new Date(2014, 05, 01), y: 1270 }, { x: new Date(2014, 06, 01), y: 1300 }, { x: new Date(2014, 07, 01), y: 1300 }, { x: new Date(2014, 08, 01), y: 1358 }, { x: new Date(2014, 09, 01), y: 1410 }, { x: new Date(2014, 10, 01), y: 1480 }, { x: new Date(2014, 11, 01), y: 1400 }, { x: new Date(2015, 00, 01), y: 1400 }, { x: new Date(2015, 01, 01), y: 1300 }, { x: new Date(2015, 02, 01), y: 1300 }, { x: new Date(2015, 03, 01), y: 1999 }, { x: new Date(2015, 04, 01), y: 1999 }, { x: new Date(2015, 05, 01), y: 800 }, { x: new Date(2015, 06, 01), y: 1590 }, { x: new Date(2015, 07, 01), y: 1620 }, { x: new Date(2015, 08, 01), y: 1670 }, { x: new Date(2015, 09, 01), y: 1720 }, { x: new Date(2015, 10, 01), y: 1750 }, { x: new Date(2015, 11, 01), y: 1820 }, { x: new Date(2016, 00, 01), y: 2000 }, { x: new Date(2016, 01, 01), y: 1920 }, { x: new Date(2016, 02, 01), y: 1750 }, { x: new Date(2016, 03, 01), y: 1850 }, { x: new Date(2016, 04, 01), y: 1750 }, { x: new Date(2016, 05, 01), y: 1750 }, { x: new Date(2016, 06, 01), y: 1750 }, { x: new Date(2016, 07, 01), y: 1750 }, { x: new Date(2016, 08, 01), y: 1800 }, { x: new Date(2016, 09, 01), y: 1800 }, { x: new Date(2016, 10, 01), y: 1800 }, { x: new Date(2016, 11, 01), y: 1850 }, { x: new Date(2017, 00, 01), y: 1850 }, { x: new Date(2017, 01, 01), y: 1900 }, { x: new Date(2017, 02, 01), y: 1900 }, { x: new Date(2017, 03, 01), y: 1900 }, { x: new Date(2017, 04, 01), y: 2100 }, { x: new Date(2017, 05, 01), y: 2100 } ] }, { type: "spline", name: "Zone 03", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 409 }, { x: new Date(2014, 01, 01), y: 500 }, { x: new Date(2014, 02, 01), y: 500 }, { x: new Date(2014, 03, 01), y: 500 }, { x: new Date(2014, 04, 01), y: 500 }, { x: new Date(2014, 05, 01), y: 1000}, { x: new Date(2014, 06, 01), y: 1500 }, { x: new Date(2014, 07, 01), y: 1500 }, { x: new Date(2014, 08, 01), y: 1500 }, { x: new Date(2014, 09, 01), y: 1450 }, { x: new Date(2014, 10, 01), y: 1440 }, { x: new Date(2014, 11, 01), y: 1429 }, { x: new Date(2015, 00, 01), y: 1435 }, { x: new Date(2015, 01, 01), y: 1450 }, { x: new Date(2015, 02, 01), y: 900 }, { x: new Date(2015, 03, 01), y: 900}, { x: new Date(2015, 04, 01), y: 900 }, { x: new Date(2015, 05, 01), y: 955 }, { x: new Date(2015, 06, 01), y: 955 }, { x: new Date(2015, 07, 01), y: 1200 }, { x: new Date(2015, 08, 01), y: 1200 }, { x: new Date(2015, 09, 01), y: 1200 }, { x: new Date(2015, 10, 01), y: 1200 }, { x: new Date(2015, 11, 01), y: 1200 }, { x: new Date(2016, 00, 01), y: 1299 }, { x: new Date(2016, 01, 01), y: 1299 }, { x: new Date(2016, 02, 01), y: 1299 }, { x: new Date(2016, 03, 01), y: 1350 }, { x: new Date(2016, 04, 01), y: 1350 }, { x: new Date(2016, 05, 01), y: 1350 }, { x: new Date(2016, 06, 01), y: 1350 }, { x: new Date(2016, 07, 01), y: 1400 }, { x: new Date(2016, 08, 01), y: 1400 }, { x: new Date(2016, 09, 01), y: 1600 }, { x: new Date(2016, 10, 01), y: 1600 }, { x: new Date(2016, 11, 01), y: 1600 }, { x: new Date(2017, 00, 01), y: 1800 }, { x: new Date(2017, 01, 01), y: 1800 }, { x: new Date(2017, 02, 01), y: 1800}, { x: new Date(2017, 03, 01), y: 2000 }, { x: new Date(2017, 04, 01), y: 2000 }, { x: new Date(2017, 05, 01), y: 2000 } ] }, { type: "spline", name: "Zone 04", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 529 }, { x: new Date(2014, 01, 01), y: 100 }, { x: new Date(2014, 02, 01), y: 800}, { x: new Date(2014, 03, 01), y: 800 }, { x: new Date(2014, 04, 01), y: 400 }, { x: new Date(2014, 05, 01), y: 1000 }, { x: new Date(2014, 06, 01), y: 1000}, { x: new Date(2014, 07, 01), y: 1000 }, { x: new Date(2014, 08, 01), y: 1000}, { x: new Date(2014, 09, 01), y: 579 }, { x: new Date(2014, 10, 01), y: 1100 }, { x: new Date(2014, 11, 01), y: 1100 }, { x: new Date(2015, 00, 01), y: 1100 }, { x: new Date(2015, 01, 01), y: 1200 }, { x: new Date(2015, 02, 01), y: 1210 }, { x: new Date(2015, 03, 01), y: 1220 }, { x: new Date(2015, 04, 01), y: 1220 }, { x: new Date(2015, 05, 01), y: 1215}, { x: new Date(2015, 06, 01), y: 1000 }, { x: new Date(2015, 07, 01), y: 1000 }, { x: new Date(2015, 08, 01), y: 1000}, { x: new Date(2015, 09, 01), y: 1000 }, { x: new Date(2015, 10, 01), y: 1100 }, { x: new Date(2015, 11, 01), y: 1100}, { x: new Date(2016, 00, 01), y: 1110}, { x: new Date(2016, 01, 01), y: 1110 }, { x: new Date(2016, 02, 01), y: 1110}, { x: new Date(2016, 03, 01), y: 1200 }, { x: new Date(2016, 04, 01), y: 1300 }, { x: new Date(2016, 05, 01), y: 1300 }, { x: new Date(2016, 06, 01), y: 1300 }, { x: new Date(2016, 07, 01), y: 1300 }, { x: new Date(2016, 08, 01), y: 1300 }, { x: new Date(2016, 09, 01), y: 1300 }, { x: new Date(2016, 10, 01), y: 100}, { x: new Date(2016, 11, 01), y: 100 }, { x: new Date(2017, 00, 01), y: 100 }, { x: new Date(2017, 01, 01), y: 1000 }, { x: new Date(2017, 02, 01), y: 1000 }, { x: new Date(2017, 03, 01), y: 1000 }, { x: new Date(2017, 04, 01), y: 749 }, { x: new Date(2017, 05, 01), y: 740 } ] }, { type:"spline", name: "Zone 05", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 450 }, { x: new Date(2014, 01, 01), y: 450}, { x: new Date(2014, 02, 01), y: 450 }, { x: new Date(2014, 03, 01), y: 300}, { x: new Date(2014, 04, 01), y: 450}, { x: new Date(2014, 05, 01), y: 500}, { x: new Date(2014, 06, 01), y: 500 }, { x: new Date(2014, 07, 01), y: 500 }, { x: new Date(2014, 08, 01), y: 1000 }, { x: new Date(2014, 09, 01), y: 1000}, { x: new Date(2014, 10, 01), y: 1000}, { x: new Date(2014, 11, 01), y: 1250 }, { x: new Date(2015, 00, 01), y: 1250}, { x: new Date(2015, 01, 01), y: 1250}, { x: new Date(2015, 02, 01), y: 450 }, { x: new Date(2015, 03, 01), y: 450}, { x: new Date(2015, 04, 01), y: 150 }, { x: new Date(2015, 05, 01), y: 150}, { x: new Date(2015, 06, 01), y: 160 }, { x: new Date(2015, 07, 01), y: 160 }, { x: new Date(2015, 08, 01), y: 1210 }, { x: new Date(2015, 09, 01), y: 1210 }, { x: new Date(2015, 10, 01), y: 1210 }, { x: new Date(2015, 11, 01), y: 1750 }, { x: new Date(2016, 00, 01), y: 1750}, { x: new Date(2016, 01, 01), y: 1750 }, { x: new Date(2016, 02, 01), y: 1750 }, { x: new Date(2016, 03, 01), y: 1880 }, { x: new Date(2016, 04, 01), y: 1890}, { x: new Date(2016, 05, 01), y: 2000 }, { x: new Date(2016, 06, 01), y: 2000 }, { x: new Date(2016, 07, 01), y: 2100 }, { x: new Date(2016, 08, 01), y: 2100 }, { x: new Date(2016, 09, 01), y: 2100 }, { x: new Date(2016, 10, 01), y: 2100 }, { x: new Date(2016, 11, 01), y: 1300 }, { x: new Date(2017, 00, 01), y: 2300 }, { x: new Date(2017, 01, 01), y: 2300 }, { x: new Date(2017, 02, 01), y: 2350 }, { x: new Date(2017, 03, 01), y: 2350 }, { x: new Date(2017, 04, 01), y: 2500 }, { x: new Date(2017, 05, 01), y: 2500 } ] }, { type:"spline", name: "Zone 06", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 409 }, { x: new Date(2014, 01, 01), y: 420}, { x: new Date(2014, 02, 01), y: 450 }, { x: new Date(2014, 03, 01), y: 300}, { x: new Date(2014, 04, 01), y: 450}, { x: new Date(2014, 05, 01), y: 470}, { x: new Date(2014, 06, 01), y: 500 }, { x: new Date(2014, 07, 01), y: 875 }, { x: new Date(2014, 08, 01), y: 875 }, { x: new Date(2014, 09, 01), y: 875 }, { x: new Date(2014, 10, 01), y: 875 }, { x: new Date(2014, 11, 01), y: 500 }, { x: new Date(2015, 00, 01), y: 500 }, { x: new Date(2015, 01, 01), y: 500 }, { x: new Date(2015, 02, 01), y: 490 }, { x: new Date(2015, 03, 01), y: 580}, { x: new Date(2015, 04, 01), y: 580 }, { x: new Date(2015, 05, 01), y: 1600}, { x: new Date(2015, 06, 01), y: 1600 }, { x: new Date(2015, 07, 01), y: 1600 }, { x: new Date(2015, 08, 01), y: 1210 }, { x: new Date(2015, 09, 01), y: 1210 }, { x: new Date(2015, 10, 01), y: 1210 }, { x: new Date(2015, 11, 01), y: 1750 }, { x: new Date(2016, 00, 01), y: 1750}, { x: new Date(2016, 01, 01), y: 1750 }, { x: new Date(2016, 02, 01), y: 1750 }, { x: new Date(2016, 03, 01), y: 1600 }, { x: new Date(2016, 04, 01), y: 1600}, { x: new Date(2016, 05, 01), y: 1600 }, { x: new Date(2016, 06, 01), y: 2000 }, { x: new Date(2016, 07, 01), y: 2000 }, { x: new Date(2016, 08, 01), y: 2000 }, { x: new Date(2016, 09, 01), y: 2100 }, { x: new Date(2016, 10, 01), y: 2100 }, { x: new Date(2016, 11, 01), y: 1300 }, { x: new Date(2017, 00, 01), y: 2300 }, { x: new Date(2017, 01, 01), y: 2300 }, { x: new Date(2017, 02, 01), y: 2350 }, { x: new Date(2017, 03, 01), y: 2350 }, { x: new Date(2017, 04, 01), y: 2500 }, { x: new Date(2017, 05, 01), y: 2500 } ] }, { type:"spline", name: "Zone 07", showInLegend: true, markerSize: 0, yValueFormatString: "$#,###k", dataPoints: [ { x: new Date(2014, 00, 01), y: 409 }, { x: new Date(2014, 01, 01), y: 420}, { x: new Date(2014, 02, 01), y: 450 }, { x: new Date(2014, 03, 01), y: 300}, { x: new Date(2014, 04, 01), y: 450}, { x: new Date(2014, 05, 01), y: 470}, { x: new Date(2014, 06, 01), y: 500 }, { x: new Date(2014, 07, 01), y: 875 }, { x: new Date(2014, 08, 01), y: 875 }, { x: new Date(2014, 09, 01), y: 875 }, { x: new Date(2014, 10, 01), y: 875 }, { x: new Date(2014, 11, 01), y: 500 }, { x: new Date(2015, 00, 01), y: 500 }, { x: new Date(2015, 01, 01), y: 500 }, { x: new Date(2015, 02, 01), y: 490 }, { x: new Date(2015, 03, 01), y: 580}, { x: new Date(2015, 04, 01), y: 580 }, { x: new Date(2015, 05, 01), y: 1600}, { x: new Date(2015, 06, 01), y: 1600 }, { x: new Date(2015, 07, 01), y: 1600 }, { x: new Date(2015, 08, 01), y: 1210 }, { x: new Date(2015, 09, 01), y: 1210 }, { x: new Date(2015, 10, 01), y: 1210 }, { x: new Date(2015, 11, 01), y: 1750 }, { x: new Date(2016, 00, 01), y: 1750}, { x: new Date(2016, 01, 01), y: 1750 }, { x: new Date(2016, 02, 01), y: 1750 }, { x: new Date(2016, 03, 01), y: 500 }, { x: new Date(2016, 04, 01), y: 500}, { x: new Date(2016, 05, 01), y: 500 }, { x: new Date(2016, 06, 01), y: 400 }, { x: new Date(2016, 07, 01), y: 400 }, { x: new Date(2016, 08, 01), y: 800 }, { x: new Date(2016, 09, 01), y: 800 }, { x: new Date(2016, 10, 01), y: 800 }, { x: new Date(2016, 11, 01), y: 850 }, { x: new Date(2017, 00, 01), y: 850 }, { x: new Date(2017, 01, 01), y: 850 }, { x: new Date(2017, 02, 01), y: 900 }, { x: new Date(2017, 03, 01), y: 900 }, { x: new Date(2017, 04, 01), y: 950 }, { x: new Date(2017, 05, 01), y: 950 } ] }] }); chart.render(); function toogleDataSeries(e){ if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else{ e.dataSeries.visible = true; } chart.render(); } } </script> </body> </html>March 5, 2019 at 1:57 pm #24549You can resize the chart by changing the height of the chart on resizing the panel as shown in this JSFiddle.
For faster response, fork out our template jsfiddle reproducing the issue you are facing. Having a jsfiddle helps us in figuring out the issue and many a times we can just edit your code on jsfiddle to fix the issue right-away. Please refer this thread for more info.
—
Vishwas R
Team CanvasJSMarch 11, 2019 at 11:35 am #24602Thank you very much for your support
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.