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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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
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'],
              });
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

JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

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?
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.

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!!
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.