|
|
|
@{ |
|
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> |