Examples
Horizontal Bars
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Bars</title>
</head>
<body>
<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>
<canvas type="graph" width="350" height="200">
{ "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>
Vertical bars
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical bars</title>
</head>
<body>
<canvas type="graph" width="350" height="150">
{
"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="150">
{
"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>
Doughnut
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doughnut</title>
</head>
<body>
<canvas type="graph" width="350" height="200">
{
"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="350" height="200">
{
"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>
Watermarks example
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Watermarks example</title>
<style type="text/css">
@page {
size: a3;
background-image: url('img/denker.png');
background-object-position: 500px 300px; /* left bottom */
background-height: 150px;
background-width: 50px;
@frame content_frame {
left: 50pt;
width: 512pt;
top: 50pt;
height: 692pt;
-pdf-frame-border: 1; /* for debugging the layout */
}
}
@page pg1 {
size: a4;
background-image: url('pdf/test-invoice-bg.pdf');
@frame content_frame {
left: 50pt;
width: 512pt;
top: 50pt;
height: 692pt;
-pdf-frame-border: 1; /* for debugging the layout */
}
}
@page pg2 {
size: a4;
background-image: url('img/beach.jpg');
background-page-step: 2;
background-opacity: 0.5;
@frame content_frame {
left: 50pt;
width: 512pt;
top: 50pt;
height: 692pt;
-pdf-frame-border: 1; /* for debugging the layout */
}
}
</style>
</head>
<body>
<body>
<h1>Resume Page</h1>
<p>This is a resume page with in a3 pagesize.</p>
<pdf:nextpage name="pg1" />
<h1>Title Page</h1>
<p> This is a title page with a large 5cm margin.</p>
<p> Warning: Your pdf need to have transparent page.</p>
<pdf:nextpage name="pg2" />
<h1>Chapter 1</h1>
<p>This is a regular page with a regular 2cm margin.</p>
</body>
</body>
</html>
Horizontal Line
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line</title>
</head>
<body>
<canvas type="graph" width="350" height="180">
{
"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="350" 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>
Pie
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pie</title>
</head>
<body>
<canvas type="graph" width="350" height="180">
{
"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="350" height="180">
{
"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>