How can I load controller data into javascript array?

Question

0.00/5 (No votes)

See more:

Hello everyone,

I am developing an election app via MVC3(Due to some restrictions). I did everything. It works fine. However, I need some charts to visualize my app.

Found something, working fine with 'static numbers'. I want to load my own data which comes from database. I am not good at Javascript. Here is where I have troubles.

JavaScript

var barChartData = {
                   labels: ["App1", "App2", "App3", "App3", "App4", "App5", "Soru6"],
                   datasets: [
                                       {
                                           fillColor: "rgba(233, 78, 2, 0.9)",
                                           strokeColor: "rgba(233, 78, 2, 0.9)",
                                           highlightFill: "#e94e02",
                                           highlightStroke: "#e94e02",
                                           data: [65, 59, 90, 81, 56, 55, 40]
                                       },
                                       {
                                           fillColor: "rgba(79, 82, 186, 0.9)",
                                           strokeColor: "rgba(79, 82, 186, 0.9)",
                                           highlightFill: "#4F52BA",
                                           highlightStroke: "#4F52BA",
                                           data: [40, 70, 55, 20, 45, 70, 60]
                                       }
                                   ]

               };

First, I want to load some labels into Labels array from db . (Table: User, Column Apps)
Then, I want to load some data into data array. (Table UserQuestion, Column QuestionAnswerRate)

I am able to get both of these data via Model or ViewBag. However can't load into array.

How can I do this?

What I have tried:

I have tried
1- To load via ViewBag
2- To load via Model

Posted 23-Mar-16 22:44pm

FoxRoot

Updated 12-Apr-16 6:16am

Add a Solution

Comments

Patrice T 24-Mar-16 5:04am

The order of things is:
1) Properly learn JS: read documentation, follow tutorials
2) do useful projects.

FoxRoot 24-Mar-16 5:23am

Sure, I will learn. But I have to finish this project.

Sinisa Hajnal 24-Mar-16 8:03am

Create graph object (you have the definition above labels, datasets as arrays of that object)

Get your data and fill the object. Pass that object to barChartData. As to details, you will have to learn how to fill the array, comments are really not place to explain javascript.

2 solutions

Solution 2

Create a class that matches the properties you want to show, ie it will have a property called labels that is List<string>, a property called datasets that is a List of objects that contain properties fillColour etc.

In your controller you create an instance of this class and populate it from your data and pass it to the view, either as the whole model, or as a property of the model if you need to pass other things, so your model will have a "ChartData" property that is an instance of your populated chart data.

In the view do something like

var barChartData = @Json.Encode(Model.ChartData)

you might need;

var barChartData = @Html.Raw(Json.Encode(Model.ChartData))

That will generate html that will set the barChartData js variable to be a json object that should have the correct properties. View the page source to see how well your output matches what you need then tweak as appropriate.

Edit: if Json.Ensode isn't available in MVC3 then use whatever is supported to serialise the data to JSON, google for examples.

Posted 12-Apr-16 6:16am

F-ES Sitecore

Updated 12-Apr-16 6:18am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Grant Weatherston · Accepted Answer · 2016-04-12T06:04:00

Solution 1

May i suggest utilising chart building JS library called HighCharts. It's a great tool, easy to use with plenty of documentation

can be found at Interactive JavaScript charts for your webpage | Highcharts[^]

Posted 12-Apr-16 6:04am

Grant Weatherston

Updated 12-Apr-16 6:10am

Comments

Richard Deeming 12-Apr-16 12:35pm

That's a commercial product; it's only free for non-commercial work.

Grant Weatherston 14-Apr-16 4:50am

sorry, i didn't see in his question it had to be free? Additionally, the election app could have been for non-commercial application.

Richard Deeming 14-Apr-16 7:36am

Unless the OP states that they're willing to pay for a product to solve their problem, or that they're already using a commercial product, you should assume that they're not willing to pay.

And you can't assume that they're working on an open-source application if they don't explicitly say so.

Posting an unsolicited link to a commercial product - particularly when you don't highlight the fact that it's a commercial product - is considered spam.

FoxRoot 17-Apr-16 14:23pm

My project is already non-commercial project.

Grant Weatherston 15-Apr-16 11:38am

cheers colin.

FoxRoot 17-Apr-16 14:23pm

Thank you.