I am beginer in using mvc4 ..I want to build web application that display data in forum of charts and tables.For this I am using
hichchart.com.
I only need to know instead of writing the chart data (chart title, series name, categories ) for each chart
manually I want to get the data from the database (AgeGroupModel)…..
Here an example of
1.my database(table & Model)
2. chart code (script from highchart.com) which I put it in the view…
[Script demo is >> http://www.highcharts.com/demo/bar-basic]
ID
SoprtType
Age20To25
Age20To25
Age20To25
Datatype
1
Football
10
34
30
Male
2
Football
15
22
20
Female
3
Football
25
56
50
Total
4
Basketball
22
21
12
Male
5
Basketball
31
20
13
Female
6
Basketball
53
41
25
Total
My model (AgeGroupMode)l:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Soprt.Models
{
public class AgeGroupModel
{
public int Id { get; set; }
public double Total { get; set; }
public double Age20To24 { get; set; }
public double Age25To30 { get; set; }
public double Age30To40 { get; set; }
public string SportType { get; set; }
public string DataType { get; set; }//represent the gender or total
public class SportDBContext : DbContext
{
public DbSet<Sport> Sport { get; set; }
}
}
My script (for display the date of first 2 raw which represent football data):
Saby2012
Member
160 Points
150 Posts
Chart Data from model
Jan 21, 2013 06:47 PM|LINK
Hello ./.
I am beginer in using mvc4 ..I want to build web application that display data in forum of charts and tables.For this I am using hichchart.com.
I only need to know instead of writing the chart data (chart title, series name, categories ) for each chart manually I want to get the data from the database (AgeGroupModel)…..
Here an example of
1.my database(table & Model)
2. chart code (script from highchart.com) which I put it in the view…
[Script demo is >> http://www.highcharts.com/demo/bar-basic]
ID
SoprtType
Age20To25
Age20To25
Age20To25
Datatype
1
Football
10
34
30
Male
2
Football
15
22
20
Female
3
Football
25
56
50
Total
4
Basketball
22
21
12
Male
5
Basketball
31
20
13
Female
6
Basketball
53
41
25
Total
My model (AgeGroupMode)l:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Soprt.Models { public class AgeGroupModel { public int Id { get; set; } public double Total { get; set; } public double Age20To24 { get; set; } public double Age25To30 { get; set; } public double Age30To40 { get; set; } public string SportType { get; set; } public string DataType { get; set; }//represent the gender or total public class SportDBContext : DbContext { public DbSet<Sport> Sport { get; set; } } }My script (for display the date of first 2 raw which represent football data):
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' }, title: { text: 'Football data' //sport Type }, subtitle: { text: 'Source: sabysport.org' }, xAxis: { categories: ['Age20To25', 'Age25To30', 'Age30To40'],// Age group coulm title: { text: null } }, yAxis: { min: 0, title: { text: 'Number of people', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { formatter: function () { return '' + this.series.name + ': ' + this.y + 'people'; } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -100, y: 100, floating: true, borderWidth: 1, backgroundColor: '#FFFFFF', shadow: true }, credits: { enabled: false }, series: [{ name: 'Male', data: [10, 34, 30] // data from mala raw }, { name: 'Female', data: [15, 22, 20]//// data from mala raw }] }); }); }); </script> </head> <body> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>The chart should look like this
As you see that I will need to have many chart for each sport and write the data manually.
How can I manage the script to get the data from the model..and how my controller will look like ?
Please help me. Am new to mvc4
Saby2012
Member
160 Points
150 Posts
Re: Chart Data from model
Jan 22, 2013 08:31 PM|LINK
Any help?
ignatandrei
All-Star
134929 Points
21622 Posts
Moderator
MVP
Re: Chart Data from model
Jan 23, 2013 02:54 AM|LINK
you are using a custom component that expects data in his format.
Just put all the data into the Model and serialize the Model in the form that chart expects.
Saby2012
Member
160 Points
150 Posts
Re: Chart Data from model
Jan 23, 2013 09:03 AM|LINK
Thank you for your reply ...
what do you mean by serialize the Model in the form that chart expects.??
i got hint but am not sure if it will work or not ? can i save the data in string and then pass it ? if yes , how ?
ignatandrei
All-Star
134929 Points
21622 Posts
Moderator
MVP
Re: Chart Data from model
Jan 23, 2013 10:54 AM|LINK
Do you have a simple example for the chart that works , in simple html?
If so, replace the data with Model ...
Saby2012
Member
160 Points
150 Posts
Re: Chart Data from model
Jan 24, 2013 07:29 AM|LINK
aha .. uo mean to use another type of chart ?
no .. i would like to use highchart.com charts coz i like them and i am trying to find solution for it ,,
ignatandrei
All-Star
134929 Points
21622 Posts
Moderator
MVP
Re: Chart Data from model
Jan 24, 2013 07:36 AM|LINK
No. JUst see the examples in HTML for
( BTW: I can not see this site- it redirects me to http://www.gft.com/de/de/Feedback/error.html ) and reproduce from model.
Saby2012
Member
160 Points
150 Posts
Re: Chart Data from model
Jan 24, 2013 08:08 AM|LINK
it is
http://www.highcharts.com
and the chart demo I used is
http://www.highcharts.com/demo/bar-basic
ignatandrei
All-Star
134929 Points
21622 Posts
Moderator
MVP
Re: Chart Data from model
Jan 24, 2013 09:20 AM|LINK
it has
series: [{
name:
'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name:
'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name:
'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
This is List<Some class> serialized with JavaScriptSerializer.
Saby2012
Member
160 Points
150 Posts
Re: Chart Data from model
Jan 24, 2013 08:02 PM|LINK
mmm yas that the demo ..i put my own data ...so whati need is to get the data from my database :) how i do that ?