A Pen by Tahir Fayyaz.

Chart.js-into-PNG-using-phantomjs-casperjs.markdown

Chart.js into PNG using phantomjs/casperjs

Building a prototype so I can turn a chart into a PNG using phantomjs/casperjs to go into monthly client reports sent out by email

A Pen by Tahir Fayyaz on CodePen.

License.

index.html

<div id="container">
  <h1 class="desc">Chart created using chart.js ready for image capture by CasperJS</h1>
  <div id="caspersnap">
  <span class="yaxis-label">Request Loads</br> (million)</span>

<div class="key">
  
  <div class="current-year">Last 12 Months</div>
  <div class="prev-year">Previous 12 Months</div>
</div>
<canvas id="canvas" height="300" width="600"></canvas>
</div>
<div id="caspercapture">
  <h1 class="desc">Image created using CasperJS from this Pen</h1>
  <img src="http://www.reflectionsworld.co.uk/assets/images/chartjs-casperjs.png" />
</div>
</div>

script.js

var featuredMonthName = 'mar';
var featuredMonthIndex = '2';
var today = new Date();

var lastMonth = today.getMonth() + 4;
var months= [], i;
var month = ["Dec","Nov","Oct","Sep","Aug","Jul","Jun","May","Apr","Mar","Feb","Jan"];
// var month = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
for (i=0; i<12; i++) {
 months.push(month[lastMonth]);
 lastMonth--;
 if (lastMonth < 0) {
  lastMonth = 11;
 }
}

console.log(lastMonth)

var previousYear = [200,48,40,19,96,27,200,96,27,200,96,27];
var currentYear = [65,59,90,81,56,55,40,65,59,90,81,56];
var brand = 'apple';

var lineChartData = {
			labels : months,
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
     datasetStroke : true,
					data : previousYear
				},
				{
					fillColor : "rgba(251,87,20,0.5)",
					strokeColor : "rgba(251,127,20,1)",
					pointColor : "rgba(251,127,20,1)",
					pointStrokeColor : "#fff",
					data : currentYear
				}
			]

		}
var options = {
  //Number - Radius of each point dot in pixels
	pointDotRadius : 5,
 datasetStroke : true,
 scaleLabel : "<%=value%>" + location.search
}

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

style.css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: Arial;
  background-color: #333;
  color: #eee;
}

canvas {
 
}

h1 {
font-size: 16px;
margin: 20px 10px;
}

#container {
  position: relative;
  width: 600px;
  margin: 0 auto;
}

.yaxis-label {
  position: absolute;
  left: 30px;
  width: 200px;
  top: 60px;
}

.key {
  width: 200px;
  margin-left: 400px;
}

.current-year {
  display: block;
  width: 200px;
  border-left: 20px solid rgba(251,127,20,1);
  padding: 2px 5px;
  margin-bottom: 5px;
}

.prev-year {
  display: block;
  width: 200px;
  border-left: 20px solid rgba(220,220,220,1);
  padding: 2px 5px;
  margin-bottom: 2px;
}

#caspersnap {
padding: 10px 0px;
margin: 0px;
}