I am using canvas.js java script library to visualise my data.Here i am using rangeSplineArea chart to differentiate low and high performers data.
Now when i click each node i need a another chart for that particular data(drill down chart).
I checked canvas.js documentation but couldn't understand that one.
$(document).ready(function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Commonality Of Emotions",
fontFamily: "DIN-Light",
fontColor: "white",
},
backgroundColor: "rgba(255,255,255,0.0)",
responsive:true,
axisY: {
includeZero: false,
labelFontColor: "white",
maximum: 40,
gridThickness: 0
},
axisX: {
labelFontColor: "white",
},
toolTip: {
shared: true,
content: "{name} </br> <strong>Emotion: </strong> </br> L: {y[0]} , H: {y[1]} "
},
data: [{
type: "rangeSplineArea",
fillOpacity: 0.2,
color: "#ff1000",
indexLabelFormatter: formatter,
indexLabelFontColor: "white",
dataPoints: [
{ label: "hostility", y: [15, 26], name: "hostility", color: "white" },
{ label: "anger", y: [15, 27], name: "anger" },
{ label: "disliking", y: [13, 27], name: "disliking" },
{ label: "egoism", y: [14, 27], name: "egoism" },
{ label: "dominance", y: [15, 26], name: "dominance" },
{ label: "unhappiness", y: [17, 26], name: "unhappiness" },
{ label: "loneliness", y: [16, 27], name: "loneliness" }
]
}]
});
chart.render();
var images = [];
addImages(chart);
function addImages(chart) {
for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
var dpsName = chart.data[0].dataPoints[i].name;
if (dpsName == "hostility") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/67155-200.png"));
} else if (dpsName == "anger") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/024-business-cliparts.png"));
} else if (dpsName == "disliking") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/e-7-new.png"));
}
else if (dpsName == "egoism") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/e-8.png"));
}
else if (dpsName == "dominance") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/neutral-d007-512.png"));
}
else if (dpsName == "unhappiness") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/882181-200.png"));
}
else if (dpsName == "loneliness") {
images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/734983-200.png"));
}
images[i].attr("class", dpsName).appendTo($("#chartContainer>.canvasjs-chart-container"));
positionImage(images[i], i);
}
}
function positionImage(image, index) {
var imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[index].x);
var imageTop = chart.axisY[0].convertValueToPixel(chart.axisY[0].maximum);
image.width("40px")
.css({
"left": imageCenter - 20 + "px",
"position": "absolute", "top": imageTop + "px",
"position": "absolute"
});
}
function formatter(e) {
if (e.index === 0 && e.dataPoint.x === 0) {
return "LowPerformer " + e.dataPoint.y[e.index];
} else if (e.index == 1 && e.dataPoint.x === 0) {
return " HighPerformer " + e.dataPoint.y[e.index];
} else {
return e.dataPoint.y[e.index];
}
}
});
Using Drilldown Example shown in CanvasJS Gallery, you can modify according to your requirements.
var totalVisitors = 883000;
var chartData = {
"BaseChart": [{
click: baseChartDrilldownHandler,
cursor: "pointer",
explodeOnClick: false,
innerRadius: "75%",
legendMarkerType: "square",
name: "BaseChart",
type: "rangeSplineArea",
fillOpacity: 0.2,
color: "#ff1000",
indexLabelFormatter: formatter,
indexLabelFontColor: "white",
dataPoints: [
{ label: "hostility", y: [15, 26], name: "hostility" },
{ label: "anger", y: [15, 27], name: "anger" },
{ label: "disliking", y: [13, 27], name: "disliking" },
{ label: "egoism", y: [14, 27], name: "egoism" },
{ label: "dominance", y: [15, 26], name: "dominance" },
{ label: "unhappiness", y: [17, 26], name: "unhappiness" },
{ label: "loneliness", y: [16, 27], name: "loneliness" }
]
}],
"hostility": [{
color: "#E7823A",
name: "hostility",
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 }
]
}],
"anger": [{
color: "#546BC1",
name: "anger",
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 }
]
}],
"disliking": [{
color: "#E7823A",
name: "disliking",
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 }
]
}],
"egoism": [{
color: "#546BC1",
name: "egoism",
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 }
]
}],
"dominance": [{
color: "#546BC1",
name: "dominance",
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 }
]
}],
"unhappiness": [{
color: "#E7823A",
name: "unhappiness",
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 }
]
}],
"loneliness": [{
color: "#546BC1",
name: "loneliness",
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 baseChartOptions = {
animationEnabled: true,
theme: "light2",
title: {
text: "New VS Returning Visitors"
},
subtitles: [{
text: "Click on Any Data-Point to Drilldown",
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 drillDownChartOptions = {
animationEnabled: true,
theme: "light2",
axisX: {
labelFontColor: "#717171",
lineColor: "#a2a2a2",
tickColor: "#a2a2a2"
},
axisY: {
gridThickness: 0,
includeZero: false,
labelFontColor: "#717171",
lineColor: "#a2a2a2",
tickColor: "#a2a2a2",
lineThickness: 1
},
data: []
};
var chart = new CanvasJS.Chart("chartContainer", baseChartOptions);
chart.options.data = chartData["BaseChart"];
chart.render();
function baseChartDrilldownHandler(e) {
chart = new CanvasJS.Chart("chartContainer", drillDownChartOptions);
chart.options.data = chartData[e.dataPoint.name];
chart.options.title = { text: e.dataPoint.name }
chart.render();
$("#backButton").toggleClass("invisible");
}
$("#backButton").click(function() {
$(this).toggleClass("invisible");
chart = new CanvasJS.Chart("chartContainer", baseChartOptions);
chart.options.data = chartData["BaseChart"];
chart.render();
});
function formatter(e) {
if (e.index === 0 && e.dataPoint.x === 0) {
return "LowPerformer " + e.dataPoint.y[e.index];
} else if (e.index == 1 && e.dataPoint.x === 0) {
return " HighPerformer " + e.dataPoint.y[e.index];
} else {
return e.dataPoint.y[e.index];
}
} #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;
}<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<button class="btn invisible" id="backButton"><- Back</button>