I am struggling with how to connect my jquery call for data to a live chart.
This is the code I have so far. I am trying to make a live pie chart which updates using setinterval(). I am using a library from Github called knockout.chart.js
This is my index.cshtml page
<script src="~/ViewModels/pi-chart.js"></script>
<script src="~/Scripts/chart.js"></script>
<script src="~/Scripts/knockout-3.2.0.min.js"></script>
<script src="~/Scripts/knockout.chart.js"></script>
<div class="container">
<h1>Global Machine Status</h1>
<div>
<canvas id="chart2" data-bind="chart: { type: 'doughnut', data: DynamicDoughnutData, options: { observeChanges: true, throttle: 1000 } }">
</canvas>
</div>
</div>
<script>
function DummyViewModel() {
this.RedValue = pieChartDataModel(notRunning); //I know this doesn't work.
this.GreenValue = pieChartDataModel(numRunning);
this.YellowValue = pieChartDataModel(totalOn);
this.DynamicDoughnutData = {
labels: ["Not Running", "Running", "Total"],
datasets: [
{
data: [this.RedValue, this.GreenValue, this.YellowValue],
backgroundColor: [
"#FF6384",
"#36A200",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A200",
"#FFCE56"
]
}]
};
}
ko.applyBindings(new DummyViewModel());
</script>
This is pi-chart.js actually getting my data from my WCF service.
$(document).ready(function() {
var pieChartViewModel = {
fruits: ko.observableArray([]),
loadPieChart: function () {
$.getJSON("http://localhost/Json/Service1.svc/GetCharts", function (data) {
pieChartViewModel.fruits.removeAll();
$.each(data.GetChartResults, function (index, item) {
pieChartViewModel.fruits.psuh(new pieChartDataModel(item));
console.log(pieChartViewModel.fruits(pieChartDataModel(numRunning)));
});
});
}
};
ko.applyBindings(pieChartViewModel);
pieChartViewModel.loadPieChart();
setInterval(pieChartViewModel.loadPieChart, 30000)
});
function pieChartDataModel(item) {
this.notRunning = ko.observable(item.notRunning),
this.numRunning = ko.observable(item.numRunning),
this.totalOn = ko.observable(item.totalOn)
};
My data comes in looking like this from my WCF service. The values are all integers.
{
fruitsResult: [
{
notRunning: 4,
numRunning: 0,
totalOn: 4}
]
}
Using Entity framework my data anytime it comes in from my machine will automatically update my dB and EF will push it through my WCF service. Then my setInterval method updates into to my observable array. I am trying to get the data into DummyView Model but am completely lost. Any help would be appreciated.
Aucun commentaire:
Enregistrer un commentaire