ASP.NET MVC 5 using Morris.js Charts

I was able to replicate Morris.js Charts in the following article

http://www.jqueryscript.net/chart-graph/Morris-Good-looking-Charts-Plugin.html

The charts have static data.  I need to populate the charts with data that is coming from my SQL Sever Database.

Anyone have any idea on what I need to get started with this?

I was using Entity Framework.  I created a context model with my control uses to pass the data to my View.  The data displays fine in my view.  How do I use this data to populate the charts?

Thank you!!
yanci1179Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
as soon as you have the data available, you simply can call the
yourChartVariable.setData(data);

Open in new window

HTH
Rainer
0
yanci1179Author Commented:
I'm new to .net do you mind giving me a sample of where I would put this?

Here's what I have on the view section so far:


              Morris.Donut({
                  element: 'morris-donut-chart',
                  data: [{ label: "Download Sales", value: 12 },
                      { label: "In-Store Sales", value: 30 },
                      { label: "Mail-Order Sales", value: 20 }],
                  resize: true,
                  colors: ['#87d6c6', '#54cdb4', '#1ab394'],
              });
0
Bob LearnedCommented:
The data is an array of label/value pairs, which you could build, and then pass:

http://morrisjs.github.io/morris.js/donuts.html

The data to plot. This is an array of objects, containing label and value attributes corresponding to the labels and sizes of the segments of the donut chart.

Example:

 Morris.Donut({
                  element: 'morris-donut-chart',
                  data: data,
                  resize: true,
                  colors: ['#87d6c6', '#54cdb4', '#1ab394'],
              });

Open in new window


You could use a JQuery call to get the data:

jQuery Ajax GET and POST calls to Controller's Method in MVC
http://www.itorian.com/2013/02/jquery-ajax-get-and-post-calls-to.html

<script type="text/jscript">
    $('#SubmitName').click(function () {
        var url = "/Home/WelcomeMsg";
        var name = $('#Name').val();
        $.get(url, { input: name }, function (data) {
            $("#rData").html(data);
        });
    })
</script>

Open in new window

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

yanci1179Author Commented:
i'm sorry, I'm not following.....I'm pretty new to this so my apologies ahead of time.  I am using this in my controller

  public ActionResult AlignmentSheetsDashboard()
        {

            var model = AlignmentSheetDb.alignmentSheet.ToList();

            var serializer = new JavaScriptSerializer();
            ViewData["JSON"] = serializer.Serialize(model);
            return View(model);
        }

I believe the above converts the data into JSON.  How can I send it to the chart to load it?
0
Bob LearnedCommented:
1) "AlignmentSheetsDashboard" is the action method to show the view

2) You would need to create another method in the controller

Example:

public MorrisDataObject[] GetChartData()
{
    // Get data from the database, and convert each row into a MorrisDataObject array.

    // Return the array of data objects, with "label" and "value" properties.
}

Open in new window


3) Create a class that has the public properties that are needed (label and value)

public class MorrisDataObject
{
     public string label { get; set; }
     public string value { get; set; }
}

Open in new window


4) In the JavaScript, use a get call to get the data as a MorrisDataObject array, and pass that into the morris.js call.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
yanci1179Author Commented:
Thank you so much!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.