squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

Getting Javascript charts working in Squarespace

This is an example of a realtime chart created using canvasjs in javascript. 

The following notes show how to adapt the code example to work inside Squarespace.

Firstly, you'd need to upload the canvasjs.min.js script to your site.  See for instructions. 

When you upload the files they go to a /s/ folder and also, all but the last dot will be stripped from the filename. 

This means canvasjs.min.js will be uploaded to /s/canvasjsmin.js

Now insert the following code into the header injection point of the page you want the chart to appear

<script type="text/javascript">
window.onload = function () {

var dps = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Live Random Data"
data: [{
type: "line",
dataPoints: dps 

var xVal = 0;
var yVal = 100;
var updateInterval = 20;
var dataLength = 500; // number of dataPoints visible at any point

var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.

for (var j = 0; j < count; j++) {
yVal = yVal +Math.round(5 + Math.random() *(-5-5));
x: xVal,
y: yVal
if (dps.length > dataLength)



// generates first set of dataPoints

// update chart after specified time. 
setInterval(function(){updateChart()}, updateInterval); 

<script type="text/javascript" src="/s/canvasjsmin.js"></script>

Finally, in the main page body insert the following code into a code block, replacing the default content that is there. 

 <div id="chartContainer" style="height: 300px; width:100%;">

It *should* now all work.