Home › Forums › Chart Support › chart wont render › Reply To: chart wont render
Aviran,
We checked your issue, we tried debugging it locally. Kindly make few changes to get it work. Instead of using window.onload, use $(document).ready. And before loading jquery.canvasjs (js file), load jquery file.
Here is the working code-snippet:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="http://ticket-compare.com/wp-content/themes/ticket-compare/js/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Price History, In Pounds"
},
animationEnabled: true,
axisY:{
titleFontFamily: "arial",
titleFontSize: 12,
includeZero: false
},
toolTip: {
shared: true
},
data: [
{
type: "spline",
name: "ticketbis",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 254.02},
{label: "7-02-16", y: 264.99},
{label: "8-02-16", y: 264.99},
{label: "9-02-16", y: 290.00},
{label: "10-02-16", y: 285.00},
{label: "11-02-16", y: 369.00},
{label: "12-02-16", y: 329.30}
]
},
{
type: "spline",
name: "livefootball",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 237.50},
{label: "7-02-16", y: 237.50},
{label: "8-02-16", y: 237.50},
{label: "9-02-16", y: 237.50},
{label: "10-02-16", y: 237.50},
{label: "11-02-16", y: 0},
{label: "12-02-16", y: 469.25}
]
},
{
type: "spline",
name: "Kix",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 220},
{label: "7-02-16", y: 220},
{label: "8-02-16", y: 220},
{label: "9-02-16", y: 320},
{label: "10-02-16", y: 320},
{label: "11-02-16", y: 320},
{label: "12-02-16", y: 320}
]
},
{
type: "spline",
name: "Sports Events 365",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 357},
{label: "7-02-16", y: 356},
{label: "8-02-16", y: 356},
{label: "9-02-16", y: 357},
{label: "10-02-16", y: 363},
{label: "11-02-16", y: 404},
{label: "12-02-16", y: 410}
]
},
{
type: "spline",
name: "FootballTicketpad",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 823.53},
{label: "7-02-16", y: 823.53},
{label: "8-02-16", y: 823.53},
{label: "9-02-16", y: 823.53},
{label: "10-02-16", y: 941.18},
{label: "11-02-16", y: 0},
{label: "12-02-16", y: 47.07}
]
},
{
type: "spline",
name: "HotFootballTickets",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 290},
{label: "7-02-16", y: 324},
{label: "8-02-16", y: 314},
{label: "9-02-16", y: 330},
{label: "10-02-16", y: 330},
{label: "11-02-16", y: 402},
{label: "12-02-16", y: 402}
]
},
{
type: "spline",
name: "guaranteetickets",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 299.71},
{label: "7-02-16", y: 299.71},
{label: "8-02-16", y: 300.10},
{label: "9-02-16", y: 300.88},
{label: "10-02-16", y: 308.65},
{label: "11-02-16", y: 305.72},
{label: "12-02-16", y: 305.72}
]
},
{
type: "spline",
name: "ticket2",
showInLegend: true,
dataPoints: [
{label:"6-02-16", y: 465.34},
{label: "7-02-16", y: 463.92},
{label: "8-02-16", y: 463.92},
{label: "9-02-16", y: 464.01},
{label: "10-02-16", y: 464.01},
{label: "11-02-16", y: 503.68},
{label: "12-02-16", y: 503.57}
]
},
],
legend:{
cursor:"pointer",
itemclick:function(e){
if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</div>
<div id="chartContainer" style="height: 100%; width: 100%; padding-bottom: 45%;"></div>
</div>