Chart Data from model RSS

• • Reply
  

  ignatandrei

  All-Star

  134706 Points

  21590 Posts

  Moderator

  MVP

  Re: Chart Data from model

  Jan 24, 2013 08:38 PM|LINK

  Saby2012

  whati need is to get the data from my database :) how i do that ?

  Read tutorials from http://www.asp.net/mvc

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  Saby2012

  Member

  160 Points

  150 Posts

  Re: Chart Data from model

  Jan 24, 2013 08:42 PM|LINK

  I meant in how i pass data into the script ..??

  i know how to pass data from controller to view and from model to view ..my problem to pass into the script 

• • Reply
  

  ignatandrei

  All-Star

  134706 Points

  21590 Posts

  Moderator

  MVP

  Re: Chart Data from model

  Jan 24, 2013 08:51 PM|LINK

  Saby2012

  i know how to pass data from controller to view

  I suppose that your data is on the view on the form

  List<some class>

  Do it with JavaScriptserializer and you will obtain exactly the data in javascript.

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  UstesG

  Contributor

  2098 Points

  449 Posts

  Re: Chart Data from model

  Jan 24, 2013 09:49 PM|LINK

  this is for a pie chart and not mvc but it should work the same I think.  first declare your chart option:

    var chtReq = new Object();
      	        chtReq.ChartName = cname;
      	        chtReq.chartType = ctype;
      	        var aparams = new Array;
      	        aparams.push("start|" + $("[id$='txtStart']").val());
      	        aparams.push("end|" + $("[id$='txtEnd']").val());
      	        aparams.push("programcode|" + $("[id$='ddlPrograms']").val());
      	        chtReq.chartParams = aparams;
  
      	        var DTO = { 'chartrequest': chtReq };

     varoptions={
                  chart:{
                      renderTo:'container-age',
                      defaultSeriesType:'pie',
                      plotShadow:false
                  },
                  legend:{
                      labelFormatter:function(){
                          returnthis.name+'('+this.y+')';
                      }
                  },
                  tooltip:{
                      pointFormat:'{series.name}:{point.y}=<b>{point.percentage}%</b>',
                      percentageDecimals:1
                  },
                  plotOptions:{
                      pie:{
                          allowPointSelect:true,
                          cursor:'pointer',
                          dataLabels:{
                              enabled:true
                          },
                          showInLegend:true
                      }
                  },
                  title:{text:'AgeofClients'},
                  xAxis:{categories:[]},
                  series:[]
              };
  

  Then in a function that calls $.ajax:

   $.ajax({
      	            type: "POST",
      	            dataType: "json",
      	            data: JSON.stringify(DTO),
      	            contentType: "application/json; charset=utf-8",
      	            url: '<%=ResolveUrl("~/services/MfiService.asmx")%>/getStatChartData',
      	            success: function (response) {
      	                try {
      	                    var obj = eval('(' + response.d + ')');
      	                    for (ob in obj) {
      	                        var series = { data: [] };
      	                        if (obj[ob].SeriesName != null) {
      	                            series.name = obj[ob].SeriesName;
      	                            series.type = 'pie';
      	                            var odata = obj[ob].SeriesData.split('|');
      	                            for (od in odata) {
      	                                var cdata = odata[od].split('=');
      	                                chartoptions.xAxis.categories.push(cdata[0]);
  
      	                                series.data.push(new Array(cdata[0], parseFloat(cdata[1])));
      	                            }
      	                        }
      	                        chartoptions.series.push(series);
      	                    }
      	                    chart = new Highcharts.Chart(chartoptions);
      	                }
      	                catch (e) {
      	                    $("#" + chartoptions.chart.renderTo).html('No Data');
      	                }
  
      	            },
      	            cache: false,
      	            error: function (XMLHttpRequest, textStatus, errorThrown) {
      	                alert(errorThrown);
      	            }
      	        });

  I have some code for column charts, if you don't get it fromt this I will search for it.
  
  

   

   

  Please Mark as Answer if You Find Useful!
  But don't expect me to do your job!
  
  • Edited by ustesg on Jan 24, 2013 09:49 PM
• • Reply
  

  Saby2012

  Member

  160 Points

  150 Posts

  Re: Chart Data from model

  Jan 25, 2013 08:48 PM|LINK

  Thank you for your reply ... i could not understad what you did put i tried hard to serch and i think that we have to convert object in the way that the chart expect the data (serlize to JSON ) .is that what you did? i tried to read many JSON tutorial but not get it yet ...

  I think i have to save the data into string and then into JSON ..what do think?

• • Reply
  

  UstesG

  Contributor

  2098 Points

  449 Posts

  Re: Chart Data from model

  Jan 26, 2013 07:23 PM|LINK

  stripped down version:

  http://www.u3tech.com/codussupremus/get-highchart-chart-data-from-pagemethod

  Please Mark as Answer if You Find Useful!
  But don't expect me to do your job!
  
• • Reply
  

  bretthargrea...

  Member

  10 Points

  8 Posts

  Re: Chart Data from model

  Jan 26, 2013 08:37 PM|LINK

  Does the chart need to be interactive?

  If not why not just use MSCharting? You get all the data and pruduce a png from that data all from the backend.

  http://msdn.microsoft.com/en-us/library/system.web.helpers.chart(v=vs.111).aspx

  and

  http://www.asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart for a full walkthrough

  e.g.

  public ActionResult TestChart()
          {
              Chart chart = new Chart(400, 200, theme:ChartTheme.Blue);
              
              List<int> xvalues = somedata.ToList();
              List<int> yvalues = someotherdata.ToList();
  
  
              chart.AddSeries("Series 1", "Line", null, null, null, 1, xvalues, null, yvalues, null);
  
              WebImage image = chart.ToWebImage();
  
              return File(image.GetBytes(), "image/jpeg");
  
          }

   

   

  If you do want to use this 3rd party control and your only problem is getting the data from the model to your page for the script you coud either write the script on the page as per the data in your model - i.e.  @foreach(var row in model){<script>your script with data here) - this is a bit of a hack and you'd end up with a load of simialir scripts. 

  Or a neater solution would be to edit the script to do JSON posts to get the data you want - your best bet here is to go read up on AJAX and JSON.

• • Reply
  

  Saby2012

  Member

  160 Points

  150 Posts

  Re: Chart Data from model

  Jan 26, 2013 11:02 PM|LINK

  hi .. i have my code like the folowing .. 

  but still is not working ... i save my data in csv file ...could you review my code

  <!DOCTYPE HTML>
  <html>
  	<head>
  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  		<title>Highcharts Example</title>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
         
  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.3.5/jquery.min.js"></script>
  		<script type="text/javascript">
  		    $(document).ready(function () {
  
  		        var options = {
  		            chart: {
  		                renderTo: 'container',
  		                defaultSeriesType: 'column'
  		            },
  		            title: {
  		                text: 'Football'
  		            },
  		            xAxis: {
  		                categories: []
  		            },
  		            yAxis: {
  		                title: {
  		                    text: 'Units'
  		                }
  		            },
  		            series: []
  		        };
  
  		        /*
                  Load the data from the CSV file. This is the contents of the file:
                      
                      Catagroies,Age20To25,Age25To30,Age30To40
                      Male,8,4,6,5
                      Female,3,4,2,3
                      
                      
                  */
  
  
  		        $.get('C:/Users/user/Desktop/data.csv', function(data) {
  		            // Split the lines
  		            var lines = data.split('\n');
  		            $.each(lines, function (lineNo, line) {
  		                var items = line.split(',');
  
  		                // header line containes categories
  		                if (lineNo == 0) {
  		                    $.each(items, function (itemNo, item) {
  		                        if (itemNo > 0) options.xAxis.categories.push(item);
                                  
  		                    });
  		                }
  
  		                    // the rest of the lines contain data with their name in the first position
  		                else {
  		                    var series = {
  		                        data: []
  		                    };
  		                    $.each(items, function (itemNo, item) {
  		                        if (itemNo == 0) {
  		                            series.name = item;
  		                        } else {
  		                            series.data.push(parseFloat(item));
  		                        }
  		                    });
  
  		                    options.series.push(series);
  
  		                }
  		            });
  		            var chart = new Highcharts.Chart(options);
  
  		        });
  		        
  		        
  		        });
              
  		</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>

  
  
  

• • Reply
  

  Saby2012

  Member

  160 Points

  150 Posts

  Re: Chart Data from model

  Jan 27, 2013 09:44 PM|LINK

  thank you for your reply ....

  yah it should be interactive ..and  I want to use highcharts.com

  bretthargreaves

  If you do want to use this 3rd party control and your only problem is getting the data from the model to your page for the script you coud either write the script on the page as per the data in your model - i.e.  @foreach(var row in model){<script>your script with data here) - this is a bit of a hack and you'd end up with a load of simialir scripts.

  bretthargreaves

  yah as u said my problem with getting the data from the model ... I will  try to use..@foreach(var row in model)

  Can you have lokk at my recent post used Jquery as describe in the highcharts.com website ....that i read the data from csv file ..may u have an idea about what geting wrong.?

• • Reply
  

  mgasparel

  Member

  298 Points

  65 Posts

  Re: Chart Data from model

  Jan 28, 2013 02:20 AM|LINK

  If you take a look at section 5 of the following link "Live Charts". It shows you how to fetch your JSON data from an online source.

  http://www.highcharts.com/documentation/how-to-use

  Here is an example of a controller action I use to send JSON encoded search results to a jQuery autocomplete textbox

  public ActionResult QuickSearch(string term)
  {
      var items = db.StoreItems
          .Where(s => s.Name.Contains(term))
          .ToList()
          .Select(i => new { value = i.Name });
  
      return Json(items, JsonRequestBehavior.AllowGet);
  }

  The previous code returns a data set in the following format:

  [{"value":"Scoop Neck T-Shirt"},{"value":"V Neck Tank Top"},{"value":"Crew Neck"},{"value":"Shift Leader Comment Pad"},{"value":"Log Book Sheets"}]

  
  Hope that helps