ASP .Net JSON and Morris.js HELP ME !

Question

0.00/5 (No votes)

See more:

Good morning, I would like to use the library MORRIS.JS with ASP. Net, I know I must be a JSON object, but not how to do it, someone help me? As an example if I do a query on a database and want to send the data in JSON format so the library becomes MORRIS.JS the graph, can someone give me a simple example? Thanks to this community and sorry my English is not very good, I would say that is bad enough, but I will understand!

Linkt to library http://www.oesmith.co.uk/morris.js/index.html[^]

Posted 4-Feb-13 7:17am

Garcia AlfredoS

Add a Solution

4 solutions

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)

Jameel VM · Answer 1 · 2013-02-04T07:41:00

Solution 1

for example you can convert a generic list to json like below

C#

public class Person
{
public string Name{get;set;}
public int Age{get;set;}
}
List<person> person=new List<person>();
person.Add(new Person{Name="Jemi","23"});
person.Add(new Person{Name="Jemi2","23"});

//Converting person list to jSon by using JavaScriptSerializer
JavaScriptSerializer jss = new JavaScriptSerializer(person);

string output = jss.Serialize(person);

Hope this helps

Posted 4-Feb-13 7:41am

Jameel VM

Updated 4-Feb-13 7:46am

v2

Comments

Garcia AlfredoS 4-Feb-13 13:57pm

agree, however I should spend the format is as follows:

/*
* Play with this code and it'll update in the panel opposite.
*
* Why not try some of the options above?
*/
Morris.Donut({
element: 'donut-example',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});

I do not quite understand is how to format the data obtained either from an object in that format, can you give me a clearer example? aspx file including ... cs ..... and js.
Because that's so generic it's hard to understand, can you put the aspx ... cs and js for these three archvios form a whole that can see more clearly?
Thank you very much for your time!

Garcia AlfredoS 4-Feb-13 14:10pm

I have to agree all formatted in json output, but with the example I gave above and must form the json of morris.js, ..... I can you clarify this?

Adil Battal KAYA 6-May-14 9:55am

data: $.parseJSON(dataJson),

after serializing do parseJSON for chart data.

Member 10071661 · Answer 2 · 2013-05-22T16:46:00

JavaScript

I also encountered the same problem with you,just did a project on morris example,I hope to help you.
<body>
    <div>
        Morris
        <div id="myfirstchart" style="height: 250px; "  >
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
     new Morris.Line({
       element: 'myfirstchart',
        data: @ViewBag.jss ,
        xkey: 'year',
        ykeys: ['value','a','b'],
        labels: ['Value','This A','this B']
    });

</script>

      <pre lang="c#"> public ActionResult Morris()
        {
             LineDemo lineDemo1 = new LineDemo();
             lineDemo1.year="2008";
             lineDemo1.value = 20;
             lineDemo1.a=30;
             lineDemo1.b=15;

             LineDemo lineDemo2 = new LineDemo();
             lineDemo2.year = "2009";
             lineDemo2.value = 30;
             lineDemo2.a = 40;
             lineDemo2.b = 20;

             LineDemo lineDemo3 = new LineDemo();
             lineDemo3.year = "2010";
             lineDemo3.value = 40;
             lineDemo3.a = 50;
             lineDemo3.b = 30;

             LineDemo lineDemo4 = new LineDemo();
             lineDemo4.year = "2011";
             lineDemo4.value = 25;
             lineDemo4.a = 35;
             lineDemo4.b = 55;

             List<LineDemo> listLine = new List<LineDemo>();
             listLine.Add(lineDemo1);
             listLine.Add(lineDemo2);
             listLine.Add(lineDemo3);
             listLine.Add(lineDemo4);

             JavaScriptSerializer jss = new JavaScriptSerializer();

             string output = jss.Serialize(listLine);

             string demo = output.Replace("\"", "");

             ViewBag.jss = demo;

             return View();
        }

    }

    public class LineDemo
    {
        public string year{get;set;}
        public int value{get;set;}
        public int a{get;set;}
        public int b{get;set;}
    }

The data transport by Json, It should be noted that Json' Key have quotation ,you must delete it,you can use Regular Expression . this is asp.net MVC. My English is not good.Hope you can understand.

Tapan Kumar · Answer 3 · 2014-04-15T01:32:00

Solution 3

Check this out...

http://www.tapankumar.in/2014/03/creating-graph-in-aspnet-with-ajax-httphandler-and-morris.js-plugin.html[^]

Posted 15-Apr-14 1:32am

Tapan Kumar

Torakami · Answer 4 · 2015-05-28T15:14:00

Solution 4

How to populate data from sql for morris donut chart ?[^]

Posted 28-May-15 15:14pm

Torakami