Forum Replies Created by sivasankari

Viewing 4 posts - 1 through 4 (of 4 total)
  • 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 example

    in reply to: Custom String label in Yaxis #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&gt;
    <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}]

    in reply to: Custom String label in Yaxis #15099

    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

    in reply to: Custom String label in Yaxis #15095

    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.

Viewing 4 posts - 1 through 4 (of 4 total)