function LineChart()

in AzureCT/ServerSide/DisplayAvailability.js [318:369]


function LineChart(con) {

    // user defined properties
    this.canvas = document.getElementById(con.canvasId);
    this.minX = con.minX;
    this.minY = con.minY;
    this.maxX = con.maxX;
    this.maxY = con.maxY;
    this.unitsPerTickX = con.unitsPerTickX;
    this.unitsPerTickY = con.unitsPerTickY;

    // constants
    this.padding = 10;
    this.tickSize = 5;
    this.axisColor = "#555";
    this.pointRadius = 3;
    this.font = "12pt Calibri";
    this.fontHeight = 12;
    this.xAxisAdjustment = 15;
    this.yAxisAdjustment = 11;

    // relationships
    this.context = this.canvas.getContext("2d");
    this.rangeX = this.maxX - this.minX;
    this.rangeY = this.maxY - this.minY;
    this.numXTicks = Math.round(this.rangeX / this.unitsPerTickX);
    this.numYTicks = Math.round(this.rangeY / this.unitsPerTickY);
    this.x = this.getLongestValueWidth() + this.padding * 2;
    this.y = this.padding * 2;
    this.width = (this.canvas.width - this.x - this.padding * 2) - this.yAxisAdjustment;
    this.height = this.canvas.height - this.y - this.padding - this.fontHeight - this.xAxisAdjustment;
    this.scaleX = this.width / this.rangeX;
    this.scaleY = this.height / this.rangeY;

    // draw title and axis labels
    this.context.textAlign = 'center';
    var ChartLabel = 'Graph of Call Response Time';
    this.context.fillText(ChartLabel, (this.width / 2) + 50, 20);

    var xLabel = 'Time (duration of this data set)';
    this.context.fillText(xLabel, (this.width / 2) + 50, 285);

    var yLabel = 'Response Time (ms)';
    this.context.save();
    this.context.rotate(-Math.PI / 2);
    this.context.fillText(yLabel, -150, 18);
    this.context.restore();

    // draw x y axis and tick marks
    this.drawXAxis();
    this.drawYAxis();
};