I want to achieve like this cycle:
-
Save many datas in List<>
-
Send List<> to WebBrowser Html
-
Convert List<> Json Serialize
-
Use List elements in JavaScript (ChartJs)
I have achieved this cycle in Asp.Net Core. I was sending data @Model in Html and render chart perfectly. Here is example:
<html><head>
@section Scripts{<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script>
var ctx = document.getElementById('myChart').getContext('2d');
var model = @Html.Raw(Json.Serialize(Model));
//If Model is a List<>, model is an array, you need to loop it to get data
var xAxis = [];
var yAxis = [];
$.each(model.data_Axis_X, function (index, item) {
xAxis.push(item.toString());
});
$.each(model.data_Axis_Y, function (index, item) {
yAxis.push(item.toString());
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: xAxis,
datasets: [{
label: '# of Votes',
data: yAxis,
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
}</head><body><div><canvas id="myChart" width="400" height="400"></canvas></div></body></html>
Now, I want to achieve in WPF C# because I want to use ChartJS Please help
me.