Login to Ask a Question or Reply
Forum Replies Created by sivasankari
-
May 16, 2017 at 5:34 pm in reply to: multiple datapoints for the same X-axis bucket has the x-axis values repeating #15144
Hi ,
I am facing a issue… I am having an api from which i get list of x and y values.For repeated x values graph is plotted only once. X-axis is actually in hours. Please help me to solve this with detailed exampleI 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}]Thanks Vishwas for your timely response.. It works for me too. Please guide me for displaying values of hour as label continuously in x-axis. Currently I am getting labels of x-axis based on dynamic data where labels are displaying intermittently . My code is :
axisX:
{
title: “Commit Time”,
titleFontSize: 10,
titleFontColor:”Brown”,
interval:1,
intervalType: “hour”,
valueFormatString: “hh TT”},
in x-axis i am getting only 11,21,10 labels. But I need x-axis labels as 00,01,02,03,04,….,24. Please guide me with example
Hi,
Thanks for your reply. I have checked this jsfiddle and exactly I am getting this type of graph only.Here in y axis labels “Poor”,”Average”,”Good” gets repeated many times. But I need to display it 1 time only. Is it possible to do that.. Please provide detailed example.
