I have designed a page to create a chart with responsive support.The canvas with and height is calculated based on parent's div width and height and drawn the chart. But the problem is that graph is not displayed clearly .
I have attached my sample code here
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript DOM Tooltips Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Example, use an optional <style> .teetip {...} to customize tooltip: -->
<style type="text/css">
.teetip {
margin-left: 15px !important;
background: yellow !important;
color: navy !important;
font-family: Tahoma !important;
}
.box-header1 {
width: auto;
height: auto;
color: #444;
display: block;
padding: 10px;
position: relative;
background-color: rebeccapurple;
}
</style>
<!--[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 Chart1; //drawTestChart
var Chart1, tip, scaling = 0, poindex = -1;
function drawTestChart() {
Chart1 = new Tee.Chart("canvas");
Chart1.addSeries(new Tee.Line([5, 3, 2, 7, 1, 6, 4, 5, 1, 0, 10])).format.stroke.size = 4;
Chart1.axes.left.format.stroke.fill = "green";
Chart1.axes.left.title.text = "Left Axis";
Chart1.axes.bottom.title.text = "Bottom Axis";
Chart1.title.text = "Mouse-over Tooltips";
Chart1.title.format.font.style = "18px Verdana";
Chart1.series.items[0].format.stroke.fill = "darkorange";
Chart1.series.items[0].pointer.visible = true;
Chart1.panel.format.stroke.fill = "";
Chart1.panel.format.shadow.visible = true;
tip = new Tee.ToolTip(Chart1);
tip.format.font.style = "16px Tahoma";
tip.render = "canvas";
Chart1.tools.add(tip);
Chart1.series.items[0].hover.line = false;
Chart1.series.items[0].pointer.transform = function (x, y, index) {
var p = Chart1.series.items[0].pointer;
if ((scaling != 0) && (poindex == index)) {
Chart1.ctx.translate(-x, -y);
Chart1.ctx.scale(scaling, scaling);
p.format.fill = "red";
}
else
p.format.fill = Chart1.series.items[0].format.fill;
}
tip.onshow = function (tool, series, index) { scaling = 2; poindex = index; }
tip.onhide = function () { scaling = 0; poindex = -1; }
tip.ongettext = function (tool, text) { return "Text:\n" + text; }
//changeTheme(Chart1, "minimal");
// Chart1.draw();
resize();
}
function resize() {
var body = document.body, canvas = Chart1.canvas;
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.width;
canvas.height = canvas.height;
Chart1.bounds.width = canvas.width;
Chart1.bounds.height = canvas.height;
Chart1.draw();
}
function resize1() {
var body = document.body, canvas = Chart1.canvas;
var width = 90, height = 50; // <--- % PERCENT
canvas.width = width * body.clientWidth / 100;
canvas.height = height * body.clientHeight / 100;
Chart1.bounds.width = canvas.width;
Chart1.bounds.height = canvas.height;
console.log("-----canvas width * height", canvas.width, canvas.height)
Chart1.draw();
}
</script>
</head>
<body onload="drawTestChart()" >
<div class="box-body">
<div class="row">
<div class="col-md-9" style="padding-left:30px;">
<span class="box-title">Demo report summary</span>
<p> </p>
<br>
<div class="box-header1">
<div style="margin:0; padding:0; min-height:100%; height:80%; ">
<canvas id="canvas" style="padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
display: block;"></canvas>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
