Canvas

<!
DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var totalVisitors = 883000;
var visitorsData = {
"New vs Returning Visitors": [{

click: visitorsChartDrilldownHandler,
type: "stackedColumn100",
xValueFormatString: "MMM YYYY",

dataPoints: [
{ label: "April", y: 246 , name: "New Visitors"},
{label: "May", y: 2291, name: "New Visitors"},
{ label: "June", y: 1399, name: "Returning Visitors" }
]
},
{
dataPoints: [
{ label: "May", y: 3564, name: "New Visitors"},
{label: "June", y: 3660, name: "Returning Visitors" }
]
},
{
dataPoints: [
{label: "May", y: 254, name: "New Visitors"},
{ label: "June", y: 2129, name: "Returning Visitors" }
]
},
{
dataPoints: [
{ label: "May", y: 1250, name: "New Visitors"},
{ label: "june", y: 24, name: "Returning Visitors" }
]
},
{
type: "line",
axisYType: "secondary",
dataPoints: [
{label: "April", y: 18 },
{label: "May", y: 17},
{label: "June", y: 0,},
{label: "July", y: 0,}
]
}],
"New Visitors": [{
color: "#E7823A",
name: "New Visitors",
type: "column",
dataPoints: [
{ x: new Date("1 Jan 2015"), y: 33000 },
{ x: new Date("1 Feb 2015"), y: 35960 },
{ x: new Date("1 Mar 2015"), y: 42160 },
{ x: new Date("1 Apr 2015"), y: 42240 },
{ x: new Date("1 May 2015"), y: 43200 },
{ x: new Date("1 Jun 2015"), y: 40600 },
{ x: new Date("1 Jul 2015"), y: 42560 },
{ x: new Date("1 Aug 2015"), y: 44280 },
{ x: new Date("1 Sep 2015"), y: 44800 },
{ x: new Date("1 Oct 2015"), y: 48720 },
{ x: new Date("1 Nov 2015"), y: 50840 },
{ x: new Date("1 Dec 2015"), y: 51600 }
]
}],
"Returning Visitors": [{
color: "#546BC1",
name: "Returning Visitors",
type: "column",
dataPoints: [
{ x: new Date("1 Jan 2015"), y: 22000 },
{ x: new Date("1 Feb 2015"), y: 26040 },
{ x: new Date("1 Mar 2015"), y: 25840 },
{ x: new Date("1 Apr 2015"), y: 23760 },
{ x: new Date("1 May 2015"), y: 28800 },
{ x: new Date("1 Jun 2015"), y: 29400 },
{ x: new Date("1 Jul 2015"), y: 33440 },
{ x: new Date("1 Aug 2015"), y: 37720 },
{ x: new Date("1 Sep 2015"), y: 35200 },
{ x: new Date("1 Oct 2015"), y: 35280 },
{ x: new Date("1 Nov 2015"), y: 31160 },
{ x: new Date("1 Dec 2015"), y: 34400 }
]
}]
};
var newVSReturningVisitorsOptions = {
animationEnabled: true,
theme: "light2",
title: {
text: "Conversion Rate Trend"
},
axisX: {
labelFontColor: "#717171",
lineColor: "#a2a2a2",
tickColor: "#a2a2a2",
title: "Months",
},
axisY: {
gridThickness: 0,
lineThickness: 1,
title: "# no of Leads",
},
axisY2: {
gridThickness: 0,
includeZero: false,
lineThickness: 1,
title: "Conversion Rate",
interval: 2,
suffix:"%",
},
subtitles: [{
backgroundColor: "#2eacd1",
fontSize: 16,
fontColor: "white",
padding: 5
}],
legend: {
fontFamily: "calibri",
fontSize: 14,
itemTextFormatter: function (e) {
return e.dataPoint.name + ": " + Math.round(e.dataPoint.y /
totalVisitors * 100) + "%";
}
},
data: []
};
var visitorsDrilldownedChartOptions = {
animationEnabled: true,
theme: "light2",
axisX: {
tickColor: "#a2a2a2"
},
axisY: {
gridThickness: 0,
includeZero: false,
lineThickness: 1
},
data: []
};
newVSReturningVisitorsOptions.data = visitorsData["New vs Returning Visitors"];

$("#chartContainer").CanvasJSChart(newVSReturningVisitorsOptions);
function visitorsChartDrilldownHandler(e) {
e.chart.options = visitorsDrilldownedChartOptions;
e.chart.options.data = visitorsData[e.dataPoint.name];
e.chart.options.title = { text: e.dataPoint.name }
e.chart.render();
$("#backButton").toggleClass("invisible");
}
$("#backButton").click(function() {
$(this).toggleClass("invisible");
newVSReturningVisitorsOptions.data = visitorsData["New vs Returning
Visitors"];
$("#chartContainer").CanvasJSChart(newVSReturningVisitorsOptions);
});
}
</script>
<style>
#backButton {
border-radius: 4px;
padding: 8px;
border: none;
font-size: 16px;
background-color: #2eacd1;
color: white;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.invisible {
display: none;
}
</style>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px

auto;"></div>
<button class="btn invisible" id="backButton">Back</button>
src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>

Canvas

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Canvas

Uploaded by

Copyright:

Available Formats

<!

var totalVisitors = 883000;

"New vs Returning Visitors": [{

xValueFormatString: "MMM YYYY",

newVSReturningVisitorsOptions.data = visitorsData["New vs Returning Visitors"];

<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px

You might also like