Documentation
- Getting Started
- Installation
- Key Concepts
- Integrations
- Account & Billing
- Security & Privacy
- PDF Generation
- Reference
- Tutorials
- Troubleshooting
- Excel Generation
- Reference
- Troubleshooting
Code Example: ChartJS
DocRaptor does not directly support canvas-based charting. However, you can dump your chart data to an image tag using javascript. We recommend choosing one of charting libraries we fully support. However, if you are already using ChartJS in your document and want to continue, this is an example of how to do that
<!doctype html>
<html>
<head>
<title>Line Chart Multiple Axes</title>
<style>
@page {
size: A4 Landscape;
}
</style>
<script src="http://www.chartjs.org/dist/2.6.0/Chart.bundle.js"></script>
<script>
docraptorJavaScriptFinished = function() {
var chartCanvas = document.getElementById("canvas");
// do not do anything unless the chart is finished rendering
if (chartCanvas == null || chartCanvas.style.length < 1) {
return false;
}
// dump the canvas to an img tag
var imageElement = document.createElement("img");
imageElement.style = "width: 100%;";
imageElement.src = chartCanvas.toDataURL("image/png", 0);
chartCanvas.remove();
document.body.appendChild(imageElement);
return true;
}
</script>
<script>
/* global Chart */
/* Based on chartjs.org example at http://www.chartjs.org/samples/latest/charts/line/multi-axis.html */
'use strict';
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.random() * 100;
};
(function(global) {
var Months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
var Samples = global.Samples || (global.Samples = {});
Samples.utils = {
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
srand: function(seed) {
this._seed = seed;
},
rand: function(min, max) {
var seed = this._seed;
min = min === undefined ? 0 : min;
max = max === undefined ? 1 : max;
this._seed = (seed * 9301 + 49297) % 233280;
return min + (this._seed / 233280) * (max - min);
},
numbers: function(config) {
var cfg = config || {};
var min = cfg.min || 0;
var max = cfg.max || 1;
var from = cfg.from || [];
var count = cfg.count || 8;
var decimals = cfg.decimals || 8;
var continuity = cfg.continuity || 1;
var dfactor = Math.pow(10, decimals) || 0;
var data = [];
var i, value;
for (i = 0; i < count; ++i) {
value = (from[i] || 0) + this.rand(min, max);
if (this.rand() <= continuity) {
data.push(Math.round(dfactor * value) / dfactor);
} else {
data.push(null);
}
}
return data;
},
labels: function(config) {
var cfg = config || {};
var min = cfg.min || 0;
var max = cfg.max || 100;
var count = cfg.count || 8;
var step = (max - min) / count;
var decimals = cfg.decimals || 8;
var dfactor = Math.pow(10, decimals) || 0;
var prefix = cfg.prefix || '';
var values = [];
var i;
for (i = min; i < max; i += step) {
values.push(prefix + Math.round(dfactor * i) / dfactor);
}
return values;
},
months: function(config) {
var cfg = config || {};
var count = cfg.count || 12;
var section = cfg.section;
var values = [];
var i, value;
for (i = 0; i < count; ++i) {
value = Months[Math.ceil(i) % 12];
values.push(value.substring(0, section));
}
return values;
},
transparentize: function(color, opacity) {
var alpha = opacity === undefined ? 0.5 : 1 - opacity;
return Chart.helpers.color(color).alpha(alpha).rgbString();
},
merge: Chart.helpers.configMerge
};
Samples.utils.srand(Date.now());
}(this));
</script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:100%;">
<canvas id="canvas"></canvas>
</div>
<script>
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
yAxisID: "y-axis-1",
}, {
label: "My Second dataset",
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
yAxisID: "y-axis-2"
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart.js Line Chart - Multi Axis'
},
scales: {
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
};
</script>
<h3> DocRaptor.com chartjs example </h3>
</body>
</html>