Using data from model in Chart.js MVC c#
I am trying to make a Chart with Chart.js but i cant get the data from my model into the chart... can someone help me with this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script >
var ctx = document.getElementById('myChart').getContext('2d');
@{
List<String> listKeys = new List<string>();
List<int> listValues = new List<int>();
foreach(var x in Model.PageViews)
{
listKeys.Add(x.Key + "");
listValues.Add(x.Value);
}
}
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: @listKeys,
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: @listValues
}]
},
options: {}
});
I've tried multiple things but nothing seems to work...
javascript c# asp.net-mvc model chart.js
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
add a comment |
I am trying to make a Chart with Chart.js but i cant get the data from my model into the chart... can someone help me with this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script >
var ctx = document.getElementById('myChart').getContext('2d');
@{
List<String> listKeys = new List<string>();
List<int> listValues = new List<int>();
foreach(var x in Model.PageViews)
{
listKeys.Add(x.Key + "");
listValues.Add(x.Value);
}
}
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: @listKeys,
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: @listValues
}]
},
options: {}
});
I've tried multiple things but nothing seems to work...
javascript c# asp.net-mvc model chart.js
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
1
Your model should contain propertiesIEnumerable<string> LabelsandIEnumerable<int> Valuesand then you usevar labels = @Html.Raw.Json.Encode(Model.Labels))ect to convert the model to a javascript array
– user3559349
Nov 20 '18 at 9:52
add a comment |
I am trying to make a Chart with Chart.js but i cant get the data from my model into the chart... can someone help me with this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script >
var ctx = document.getElementById('myChart').getContext('2d');
@{
List<String> listKeys = new List<string>();
List<int> listValues = new List<int>();
foreach(var x in Model.PageViews)
{
listKeys.Add(x.Key + "");
listValues.Add(x.Value);
}
}
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: @listKeys,
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: @listValues
}]
},
options: {}
});
I've tried multiple things but nothing seems to work...
javascript c# asp.net-mvc model chart.js
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
I am trying to make a Chart with Chart.js but i cant get the data from my model into the chart... can someone help me with this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script >
var ctx = document.getElementById('myChart').getContext('2d');
@{
List<String> listKeys = new List<string>();
List<int> listValues = new List<int>();
foreach(var x in Model.PageViews)
{
listKeys.Add(x.Key + "");
listValues.Add(x.Value);
}
}
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: @listKeys,
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: @listValues
}]
},
options: {}
});
I've tried multiple things but nothing seems to work...
javascript c# asp.net-mvc model chart.js
javascript c# asp.net-mvc model chart.js
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
edited Nov 20 '18 at 9:52
Aram Mutlu
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
asked Nov 20 '18 at 9:46
Aram MutluAram Mutlu
277
277
1
Your model should contain propertiesIEnumerable<string> LabelsandIEnumerable<int> Valuesand then you usevar labels = @Html.Raw.Json.Encode(Model.Labels))ect to convert the model to a javascript array
– user3559349
Nov 20 '18 at 9:52
add a comment |
1
Your model should contain propertiesIEnumerable<string> LabelsandIEnumerable<int> Valuesand then you usevar labels = @Html.Raw.Json.Encode(Model.Labels))ect to convert the model to a javascript array
– user3559349
Nov 20 '18 at 9:52
1
1
Your model should contain properties
IEnumerable<string> Labels and IEnumerable<int> Values and then you use var labels = @Html.Raw.Json.Encode(Model.Labels)) ect to convert the model to a javascript array– user3559349
Nov 20 '18 at 9:52
Your model should contain properties
IEnumerable<string> Labels and IEnumerable<int> Values and then you use var labels = @Html.Raw.Json.Encode(Model.Labels)) ect to convert the model to a javascript array– user3559349
Nov 20 '18 at 9:52
add a comment |
2 Answers
2
active
oldest
votes
The code inside block @{ } is server side.
Other content of the script-tag is client side.
C# runs ToString() method when you use @listKeys/@listValues. It generates string like System.Collections.Generic.List[System.String] instead of content of the lists. You need to generate json objects instead.
Use @Html.Raw(Json.Serialize(listKeys)) instead of @listKeys to get correct json-object with data.
P.S. It's not good practice to use a lot of server-logic inside views. You can remove your @{} block and get json for Model.PageViews.Keys and Model.PageViews.Values
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
add a comment |
It's not good practice to use .NET variables in JavaScript code.
The right way is to create hidden html elements for values who you want to use in js function or use API that returns chart data as Json object.
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390193%2fusing-data-from-model-in-chart-js-mvc-c-sharp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The code inside block @{ } is server side.
Other content of the script-tag is client side.
C# runs ToString() method when you use @listKeys/@listValues. It generates string like System.Collections.Generic.List[System.String] instead of content of the lists. You need to generate json objects instead.
Use @Html.Raw(Json.Serialize(listKeys)) instead of @listKeys to get correct json-object with data.
P.S. It's not good practice to use a lot of server-logic inside views. You can remove your @{} block and get json for Model.PageViews.Keys and Model.PageViews.Values
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
add a comment |
The code inside block @{ } is server side.
Other content of the script-tag is client side.
C# runs ToString() method when you use @listKeys/@listValues. It generates string like System.Collections.Generic.List[System.String] instead of content of the lists. You need to generate json objects instead.
Use @Html.Raw(Json.Serialize(listKeys)) instead of @listKeys to get correct json-object with data.
P.S. It's not good practice to use a lot of server-logic inside views. You can remove your @{} block and get json for Model.PageViews.Keys and Model.PageViews.Values
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
add a comment |
The code inside block @{ } is server side.
Other content of the script-tag is client side.
C# runs ToString() method when you use @listKeys/@listValues. It generates string like System.Collections.Generic.List[System.String] instead of content of the lists. You need to generate json objects instead.
Use @Html.Raw(Json.Serialize(listKeys)) instead of @listKeys to get correct json-object with data.
P.S. It's not good practice to use a lot of server-logic inside views. You can remove your @{} block and get json for Model.PageViews.Keys and Model.PageViews.Values
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
The code inside block @{ } is server side.
Other content of the script-tag is client side.
C# runs ToString() method when you use @listKeys/@listValues. It generates string like System.Collections.Generic.List[System.String] instead of content of the lists. You need to generate json objects instead.
Use @Html.Raw(Json.Serialize(listKeys)) instead of @listKeys to get correct json-object with data.
P.S. It's not good practice to use a lot of server-logic inside views. You can remove your @{} block and get json for Model.PageViews.Keys and Model.PageViews.Values
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
answered Nov 20 '18 at 12:12
Sergey SviridovSergey Sviridov
8613
8613
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
add a comment |
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
Thankyou Sergey, this helped me!
– Aram Mutlu
Nov 21 '18 at 12:08
add a comment |
It's not good practice to use .NET variables in JavaScript code.
The right way is to create hidden html elements for values who you want to use in js function or use API that returns chart data as Json object.
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
add a comment |
It's not good practice to use .NET variables in JavaScript code.
The right way is to create hidden html elements for values who you want to use in js function or use API that returns chart data as Json object.
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
add a comment |
It's not good practice to use .NET variables in JavaScript code.
The right way is to create hidden html elements for values who you want to use in js function or use API that returns chart data as Json object.
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
It's not good practice to use .NET variables in JavaScript code.
The right way is to create hidden html elements for values who you want to use in js function or use API that returns chart data as Json object.
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
edited Nov 20 '18 at 14:04
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
answered Nov 20 '18 at 11:10
Aleksandar AleksandrovAleksandar Aleksandrov
64
64
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390193%2fusing-data-from-model-in-chart-js-mvc-c-sharp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Your model should contain properties
IEnumerable<string> LabelsandIEnumerable<int> Valuesand then you usevar labels = @Html.Raw.Json.Encode(Model.Labels))ect to convert the model to a javascript array– user3559349
Nov 20 '18 at 9:52