Home › Forums › Chart Support › Custom String label in Yaxis › Reply To: Custom String label in Yaxis
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}]