Chart in Canvas sized to 100%

Jim Green · Post by **Jim Green** » Fri Jun 27, 2014 6:22 pm

I'm not having any luck drawing a chart in a Canvas sized to 100% width and height. It looks magnified several times and only shows the upper left of the chart (though the title looks centered). I've attached a screen shot of a Chrome session with the developer tools open. (The chart lines are only visible because I had scrolled them into view.) The code to create the chart is:

Code: Select all

   chart.panel.format.fill = "#F0F0F0";
   chart.title.text = "Baseline";
   chart.addSeries(new Tee.Line([5, 3, 2, 7, 1]));
   chart.addSeries(new Tee.Line([4, 4, 8, 2, 9])).visible = true;
   chart.series.items[0].format.stroke.size = 3;
   chart.axes.left.format.stroke.fill = "red";

I've also tried sizing the chart to the canvas:

Code: Select all

  chart.bounds.width = chart.canvas.clientWidth;
  chart.bounds.height = chart.canvas.clientHeight;
  chart.draw();

Makes no difference.

Thanks.

Post by **Yeray** » Mon Jun 30, 2014 2:19 pm

Hello,

How are you creating the chart?
This seems to work fine for me here:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>

<!--[if lt IE 9]>
    <script src="../src/excanvas/excanvas_text.js"></script>
    <script src="../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="../src/teechart.js" type="text/javascript"></script>

<script type="text/javascript">

var three, Chart1;

function draw() {
  Chart1=new Tee.Chart("canvas1");
    
  Chart1.panel.format.fill = "#F0F0F0";
  Chart1.title.text = "Baseline";
  Chart1.addSeries(new Tee.Line([5, 3, 2, 7, 1]));
  Chart1.addSeries(new Tee.Line([4, 4, 8, 2, 9])).visible = true;
  Chart1.series.items[0].format.stroke.size = 3;
  Chart1.axes.left.format.stroke.fill = "red";
  Chart1.bounds.width = Chart1.canvas.clientWidth;
  Chart1.bounds.height = Chart1.canvas.clientHeight;
  
  Chart1.draw();
}
  
</script>
</head>
<body onload="draw()">
<br><canvas id="canvas1" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
<br>
</body>
</html>

However, adding this inside <head></head> gives me cut chart, that could be what you are observing:

Code: Select all

<style type="text/css">
#canvas1, html
{
    width: 80%;
    height: 100%;
}
</style>

Is this what you are doing?

Jim Green · Post by **Jim Green** » Mon Jun 30, 2014 3:38 pm

This seems to work fine for me here:
<canvas id="canvas1" width="600" height="400">

Yes, that works: you're using a fixed-size canvas. I am doing something like "<canvas id="canvas1" style="width: 100%;" height="400">". Is it not possible?

Thanks,
Jim

Post by **Yeray** » Tue Jul 01, 2014 1:38 pm

Hi jim,

Jim Green wrote: I am doing something like "<canvas id="canvas1" style="width: 100%;" height="400">". Is it not possible?

As far as I know not. Take a look at this to see some ways to make the canvas fit its parent width/height.

Jim Green · Post by **Jim Green** » Tue Jul 01, 2014 4:44 pm

I don't see a problem with sizing the canvas. If you use:

Code: Select all

<canvas id="Canvas1" style="height: 100%; width: 100%;">

and inspect the elements, the canvas is correctly sized. It's just that the chart doesn't draw correctly.

FWIW, I have found a workaround. I am starting with the HTML generated by TeeSaveToJavascriptFile (Delphi XE, TeeChart Pro v2012.07.121105) and making the following changes:

Insert the missing <html> element, with style="height: 100%; margin: 0;".
Update the <script> to v2014.04.28.1.6.
Change "Chart1.draw()" to "resize()".
Insert a resize() function (below).
Change body tab to <body onload="draw();" onresize="resize();" style="height: 100%; margin: 0;">.
Remove width & height attributes from the canvas tag.

Code: Select all

function resize() {
  var body = document.body;
  var canvas = Chart1.canvas;
  canvas.width = body.clientWidth;
  canvas.height = body.clientHeight - 4;  // prevents vertical scroll bar on <iframe> - haven't figured out where it comes from yet
  Chart1.bounds.width = canvas.width;
  Chart1.bounds.height = canvas.height;
  Chart1.draw();
}

Post by **Yeray** » Thu Jul 03, 2014 8:16 am

Hello,

I've just realised we actually have a demo doing this since the first version at "Other/Panel/Full page align" in the features demo.
Direct link to the example.

Chart in Canvas sized to 100%

Chart in Canvas sized to 100%

Re: Chart in Canvas sized to 100%

Re: Chart in Canvas sized to 100%

Re: Chart in Canvas sized to 100%

Re: Chart in Canvas sized to 100%

Re: Chart in Canvas sized to 100%

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy