| CanvasJS

May 15, 2017 at 1:59 pm #15118

I will paste my code here as jsfiddle didint wokr for me. Please refer it ..

<html>
<head>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.4.js”></script>
<script type=”text/javascript” src=”canvasjs.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];
var dataPoints4 = [];
var yLabels = [“Bad”, “Average”, “Good”];
var yLabelCounter = 0;
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:
{
text: “Code Quality”,
fontSize: 12,
fontFamily: “tahoma”,
},
tooltip: {
enabled: true,
/*contentFormatter: function (e) {
var content = “”;
for (var i = 0; i < e.entries.length; i++){
content = CanvasJS.formatDate(e.entries[i].dataPoint.x, “HH”);
}
return content;
}*/
},
// animationEnabled: true,
zoomEnabled: true,
dataPointWidth: 10,
axisX:
{
title: “Commit Time”,
titleFontSize: 10,
titleFontColor: “Brown”,
// interlacedColor: “#F0F8FF”,
interval: 1,
intervalType: “HH”,
valueFormatString: “HH:DD”,
labelAngle: -20,
includeZero: false,
//maximum: 24,
labelFontFamily: “Verdana”,
labelFontColor: “Black”,
labelFormatter: function (e) {
return CanvasJS.formatDate(e.value, “HH”);
}
/*labelFormatter: function (e) {
return CanvasJS.formatDate(e.value, “hh:mm TT”);
},*/
},
axisY:
{
title: “Quality”,
titleFontSize: 10,
titleFontColor: “Brown”,
labelAngle: -20,
labelFontFamily: “Verdana”,
labelFontColor: “Black”,
/*labelFormatter: function ( e ) {
var yCats = yLabels[yLabelCounter++];
if(yLabelCounter === yLabels.length)
yLabelCounter = 0;
return yCats;
} */
interval: 50,
labelFormatter: function (e) {
var yCats = yLabels[e.value / 50];
return yCats;
}
},
data: [
{
type: “column”,
cursor: “pointer”,
toolTipContent: “Coverage:{y}%,<br/>Task_id:1001,<br/> no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500”,
// lineDashType: “dot”,
// lineColor: “red”,
// fillOpacity: .3,
xValueType: “date”,
y: “{y}”,
showInLegend: true,
name: “Code Coverage”,
dataPoints: dataPoints1
},
{
type: “column”,
cursor: “pointer”,
toolTipContent: “Smell:{y}%,<br/> Task_id:1001,<br>no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500”,
xValueType: “date”,
showInLegend: true,
name: “Code Smell”,
y: “{y}”,
dataPoints: dataPoints2
},
{
type: “column”,
cursor: “pointer”,
toolTipContent: “Vulnerability:{y}%,<br/> Task_id:1001,<br> no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500”,
xValueType: “date”,
showInLegend: true,
name: “Vulnerability”,
y: “{y}”,
dataPoints: dataPoints3
},
{
type: “column”,
cursor: “pointer”,
toolTipContent: “Bug:{y}%,<br/> Task_id:1001,<br> no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500”,
xValueType: “date”,
showInLegend: true,
name: “Bug”,
y: “{y}”,
dataPoints: dataPoints4
},
]
});

// Ajax request for getting JSON data
//Replace data.php with your JSON API’s url

$.getJSON(“data2.txt”, function (data) {

for (var i = 0; i < data.length; i++) {
var formatted_date = new Date(data[i].date);
var lines = data[i].lines;
//var hours = formatted_date.getHours();
dataPoints1.push({label: formatted_date, y: data[i].coverage,lines:lines});
dataPoints2.push({label: formatted_date, y: data[i].smell,lines:lines});
dataPoints3.push({label: formatted_date, y: data[i].vulnerability,lines:lines});
dataPoints4.push({label: formatted_date, y: data[i].bug,lines:lines});
}

// chart.options.data[0].dataPoints = dataPoints1;

chart.render();
});
});
</script>
</head>
<body>

<div id=”chartContainer” style=”width: 50%; height: 350px;”></div>

</body>
</html>

[{“date”:”2017-05-10 1:14:12″,”coverage”:90,”smell”:30,”vulnerability”:15,”bug”:10,”commit_id”:”09rhggsadj”,”project”:”hvx”,”version”:1,”lines”:70},
{“date”:”2017-05-11 10:34:12″,”coverage”:25,”smell”:60,”vulnerability”:70,”bug”:40,”commit_id”:”09rhjigsj”,”project”:”hvx”,”version”:2,”lines”:90},
{“date”:”2017-05-11 20:34:12″,”coverage”:75,”smell”:60,”vulnerability”:70,”bug”:40,”commit_id”:”09rhjigsj”,”project”:”hvx”,”version”:2,”lines”:100}]