Ui Plot Code

Index.cshtml

@{
    ViewBag.Title = "Plot";
}

<h3>Time Based Plot </h3>

<div>
    <cpanel class="plotControls">
        <input class="btn btn-default" id="btnGetData" type="button" value="Plot" />
        <label for="tbTime" class="plotControls">Time Start</label>
        <input class="tb" type="text" name="time" id="tbTime" />
        <label for="tbSpan" class="plotControls">Num Samples</label>
        <input class="tb" type="text" name="samples" id="tbSamples" />
        <label for="tbId">Record Id</label>
        <input class="tb" type="text" name="recordId" id="tbId" />
        @*.DropDownListFor(p => p.SelectedCountryID,
        Model.CountryIEnum,
        "Select property",
        new
        {
            @id = "Country-DropdownID",
            @class = "Country-DropdownCls"
        })*@
    </cpanel>
</div>

<canvas class="plot" id="myChart" width="900" height="400"></canvas>

<script>

    $(document).ready(function () {

        $('#btnGetData').click(function () {
            var urlString = getUrl();

            $.ajax({
                type: 'GET',
                url: urlString,
                success: function (data) {
                    plotFunction(data);
                },
                dataType: "json"
            });
        });
    });

    // create url for my web api route
    function getUrl()
    {
        var idStr = document.getElementById("tbId").value;
        var start = document.getElementById("tbTime").value;
        var samples = document.getElementById("tbSamples").value;

        var urlString = urlString = "@ViewData["serviceUrl"]" + "//api" + "//temp" + "//get";

        if (!isBlank(idStr)) {
            urlString += '//' + idStr;
            console.log(urlString);
        } else if (!isBlank(start) & !isBlank(samples)) {
            urlString += '//' + start.toString() + '//' + samples.toString();
            console.log(urlString);
        }
        return urlString;
    }

    function isBlank(str) {
        return (!str || /^\s*$/.test(str));
    }

    var propName = "TempC";
    var myLineChart = null;

    function plotFunction(jsonObj) {

        // clear old data/chart
        if (myLineChart != null) {
            myLineChart.destroy();
        }

        var ctx = document.getElementById("myChart").getContext("2d");
        var tempData = jsonObj.Data.Data;

        // select data by property name
        var toPlot = tempData.map(function (v) {
            return v[propName];
        });

        var x = tempData.map(function (v) {
            return v.DateTime;
        });

        var options = Chart.defaults.global = {
            // Boolean - Whether to animate the chart
            animation: true,
            // Number - Number of animation steps
            animationSteps: 60,
            // String - Animation easing effect
            animationEasing: "easeOutQuart",
            // Boolean - If we should show the scale at all
            showScale: true,
            // Boolean - If we want to override with a hard coded scale
            scaleOverride: false,
            // ** Required if scaleOverride is true **
            // Number - The number of steps in a hard coded scale
            scaleSteps: null,
            // Number - The value jump in the hard coded scale
            scaleStepWidth: null,
            // Number - The scale starting value
            scaleStartValue: null,
            // String - Colour of the scale line
            scaleLineColor: "rgba(0,0,0,.1)",
            // Number - Pixel width of the scale line
            scaleLineWidth: 1,
            // Boolean - Whether to show labels on the scale
            scaleShowLabels: true,
            // Interpolated JS string - can access value
            scaleLabel: "<%=value%>",
            // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
            scaleIntegersOnly: true,
            // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero: false,
            // String - Scale label font declaration for the scale label
            scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            // Number - Scale label font size in pixels
            scaleFontSize: 12,
            // String - Scale label font weight style
            scaleFontStyle: "normal",
            // String - Scale label font colour
            scaleFontColor: "#666",
            // Boolean - whether or not the chart should be responsive.
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive
            maintainAspectRatio: true,
            // Boolean - Determines whether to draw tooltips on the canvas or not
            showTooltips: true,
            // Function - Determines whether to execute the customTooltips function instead
            customTooltips: false,
            // Array - Array of string names to attach tooltip events
            tooltipEvents: ["mousemove", "touchstart", "touchmove"],
            // String - Tooltip background colour
            tooltipFillColor: "rgba(0,0,0,0.8)",
            // String - Tooltip label font declaration for the scale label
            tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            // Number - Tooltip label font size in pixels
            tooltipFontSize: 14,
            // String - Tooltip font weight style
            tooltipFontStyle: "normal",
            // String - Tooltip label font colour
            tooltipFontColor: "#fff",
            // String - Tooltip title font declaration for the scale label
            tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            // Number - Tooltip title font size in pixels
            tooltipTitleFontSize: 14,
            // String - Tooltip title font weight style
            tooltipTitleFontStyle: "bold",
            // String - Tooltip title font colour
            tooltipTitleFontColor: "#fff",
            // Number - pixel width of padding around tooltip text
            tooltipYPadding: 6,
            // Number - pixel width of padding around tooltip text
            tooltipXPadding: 6,
            // Number - Size of the caret on the tooltip
            tooltipCaretSize: 8,
            // Number - Pixel radius of the tooltip border
            tooltipCornerRadius: 6,
            // Number - Pixel offset from point x to tooltip edge
            tooltipXOffset: 10,
            // String - Template string for single tooltips
            tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= value %>",

            // Function - Will fire on animation progression.
            onAnimationProgress: function () { },
            // Function - Will fire on animation completion.
            onAnimationComplete: function () { },
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,

            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: false,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,
            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius: 4,

            //Boolean - Whether to show a stroke for datasets
            datasetStroke: true,
            //Number - Pixel width of dataset stroke
            datasetStrokeWidth: 2,
            //Boolean - Whether to fill the dataset with a colour
            datasetFill: true,
            //String - A legend template
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

        };

        var data = {
            labels: x,
            datasets: [
                {
                    label: "Temperature (C)",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: toPlot
                }
            ]
        };

        myLineChart = new Chart(ctx).Line(data, options);
    };

</script>