Graphs in canvas
Canvas in xhtml2pdf have different types of printings, when you have to build graphs you have to set type=”graph”, also it’s important set width and height.
Canvas tag allows create, customize, and add charts to the story context that PDF receive for its creation. It needs to be a graph type canvas, also width and height properties can be changed.
Charts available are:
Vertical Bar verticalbar
Horizontal Bar horizontalbar
Horizontal Line horizontalline
Pie pie
Legend Pie legendedPie
Doughnut doughnut
It’s necessary received a json inside the canvas with the following fields:
Required data:
type
data
labels
Optional data:
title
legend
x position
y position
background
Please read reportlab documentation to know how object need to be created.
Size and position
The width and height of the canvas are the box the chart is given, in
points, and CSS width and height are read too and take precedence over
the attributes. A chart that says nothing about its own geometry fills that
box; one that sets any of x, y, width or height is left exactly
where it puts itself.
Whatever is drawn outside the box – a legend positioned past the right edge, say – still gets its room reserved: the drawing grows to hold it and a warning says so, rather than painting over whatever comes next on the page.
A canvas wider than the frame it lands in is scaled down to fit instead of overflowing it.
There is no background behind a chart unless one is asked for, with the
background key and reportlab’s own property names:
<canvas type="graph" width="350" height="150">
{
"type": "pie",
"data": [[10, 20, 30]],
"labels": ["a", "b", "c"],
"background": {"fillColor": "#f8fce8", "strokeColor": "#868686",
"strokeWidth": 1}
}
</canvas>
<canvas type="graph" width="350" height="180">
Json Object Here
</canvas>
For example:
<canvas type="graph" width="350" height="150">
{
"data": [[10, 20, 30, 40, 50, 60]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Horizontal Bar Chart(1 Group)", "x": 290, "y": 155},
"type": "horizontalbar",
"x": 150, "y": 50,
"barLabelFormat": "%2.0f",
"bars": {"strokeColor": "#f01f34"},
"barLabels": {"nudge": 5},
"categoryAxis": {"strokeColor": "#f01f34"}
}
</canvas>
See more in examples.
Demonstration
Each chart type the canvas understands.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doughnut</title>
</head>
<body>
<canvas type="graph" width="370" height="220">
{
"data": [10, 20, 30, 40, 50, 60],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Doughnut Chart(1 Group)", "x": 290, "y": 210},
"type": "doughnut",
"x": 150, "y": 50,
"legend": {
"alignment": "right",
"boxAnchor": "nw",
"fontSize": 8,
"strokeWidth": 0,
"dy": 6,
"dx": 6,
"dxTextSpace": 4,
"deltay": 6,
"columnMaximum": 99,
"variColumn": 1,
"deltax": 175,
"x": 340,
"y": 125
}
}
</canvas>
<canvas type="graph" width="370" height="220">
{
"data": [[10, 20, 30, 40, 50, 60], [10, 20, 30, 40, 50, 60]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Doughnut Chart(2 Groups)", "x": 290, "y": 210},
"type": "doughnut",
"x": 150, "y": 50,
"legend": {
"alignment": "right",
"boxAnchor": "nw",
"fontSize": 8,
"strokeWidth": 0,
"dy": 6,
"dx": 6,
"dxTextSpace": 4,
"deltay": 6,
"columnMaximum": 99,
"variColumn": 1,
"deltax": 175,
"x": 340,
"y": 170,
"fontName": "Helvetica"
}
}
</canvas>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Bars</title>
</head>
<body>
<canvas type="graph" width="360" height="170">
{
"data": [[10, 20, 30, 40, 50, 60]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Horizontal Bar Chart(1 Group)", "x": 290, "y": 155},
"type": "horizontalbar",
"x": 150, "y": 50,
"barLabelFormat": "%2.0f",
"bars": {"strokeColor": "#f01f34"},
"barLabels": {"nudge": 5},
"categoryAxis": {"strokeColor": "#f01f34"}
}
</canvas>
<canvas type="graph" width="360" height="220">
{ "data": [[13, 5, 20, 22, 37, 45], [14, 6, 21, 23, 38, 46]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Horizontal Bar Chart(2 Groups)", "x": 290, "y": 210},
"type": "horizontalbar",
"x": 150, "y": 50,
"width": 180, "height": 150,
"barLabelFormat": "%2.0f",
"barLabels": {"nudge": 5}
}
</canvas>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line</title>
</head>
<body>
<canvas type="graph" width="360" height="200">
{
"data": [[10, 3, 30, 25, 50, 43]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Horizontal Line Chart(1 Group)", "x": 290, "y": 190},
"type": "horizontalline",
"fillColor": "#f01f34",
"marker": "FilledCircle",
"x": 150, "y": 50,
"lineLabelFormat": "%2.0f"
}
</canvas>
<canvas type="graph" width="360" height="200">
{
"data": [[19, 3, 42, 25, 50, 43], [5, 15, 25, 38, 15, 58]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Horizontal Line Chart(2 Groups)", "x": 290, "y": 190},
"type": "horizontalline",
"marker": "FilledCircle",
"x": 150, "y": 50,
"lineLabelFormat": "%2.0f"
}
</canvas>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pie</title>
</head>
<body>
<canvas type="graph" width="380" height="200">
{
"data": [10, 20, 30, 40, 50, 60],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Pie Chart", "x": 290, "y": 190},
"type": "pie",
"x": 150, "y": 50,
"sideLabels": 1,
"direction": "anticlockwise",
"simpleLabels": 0,
"slices": {"strokeColor": "#f01f34", "strokeWidth": 2},
"legend": {
"alignment": "right",
"boxAnchor": "nw",
"fontSize": 8,
"strokeWidth": 0,
"dy": 6,
"dx": 6,
"dxTextSpace": 4,
"deltay": 6,
"columnMaximum": 99,
"variColumn": 1,
"deltax": 175,
"x": 350,
"y": 125
}
}
</canvas>
<canvas type="graph" width="430" height="200">
{
"type": "legendedPie",
"data": [10, 20, 30, 40, 50, 60],
"title": {"_text": "Legended Pie Chart", "x": 290, "y": 190},
"legend_data": [10, 20, 30, 40, 50, 60],
"labels": ["a", "b", "c", "d", "e", "f"],
"x": 150, "y": 50,
"legend1": {
"x": 350,
"y": 150
}
}
</canvas>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical bars</title>
</head>
<body>
<canvas type="graph" width="350" height="170">
{
"data": [[10, 20, 30, 40, 50, 60]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Vertical Bar Chart(1 Group)", "x": 290, "y": 155},
"x_title": 290, "y_title": 155,
"type": "verticalbar",
"x": 150, "y": 50,
"barLabelFormat": "%2.0f",
"barLabels": {"nudge": 5},
"categoryAxis": {
"strokeColor": "#f01f34",
"labels": {"angle": 0, "boxAnchor": "n", "dy": -6, "fontName": "Helvetica", "fontSize": 8, "textAnchor": "middle"}
}
}
</canvas>
<canvas type="graph" width="350" height="170">
{
"data": [[13, 5, 20, 22, 37, 45], [14, 6, 21, 23, 38, 46]],
"labels": ["a", "b", "c", "d", "e", "f"],
"title": {"_text": "Vertical Bar Chart(2 Groups)", "x": 290, "y": 155},
"type": "verticalbar",
"x": 150, "y": 50,
"barLabelFormat": "%2.0f",
"barLabels": {"nudge": 5},
"categoryAxis": {"strokeColor": "#f01f34"}
}
</canvas>
</body>
</html>