Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: jQuery JSON MVC3
i am working on mvc3 now i need to get data in to x-axis of line-charts from controllers means i need show the x-axis of line chart data from controllers could u plz help me how should i do this work plz help Here
this is my models
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace JqueryCharts.Models
    public class PiechartModel:DbContext
    public class Details
            public string Title { get; set; }
            public int counts { get; set; }

this is my controllers
  namespace JqueryCharts.Controllers
    public class PiechartsController : Controller
    // GET: /Piecharts/
  public BugtrackerNewEntities1 db = new BugtrackerNewEntities1();
    public ActionResult Index()
        return View();
    public JsonResult GetData()
        int Param1;
        Param1 = 3;
        var reports = db.ExecuteStoreQuery<JqueryCharts.Models.PiechartModel.Details>("Sp_CountBugs @ProjectId", new SqlParameter("@ProjectId", Param1)).ToList();
        return Json(reports, JsonRequestBehavior.AllowGet);

and this is my view

<script type="text/javascript">
       $(function () {
           $.getJSON('<%= Url.Action("GetData","Piecharts") %>', {}, function (data) {
               var json = data;
               var jsondata = [];
               for (var i in json) {
                   jsondata.push([json[i].Title], json[i].counts);
               var chart;
               $(document).ready(function () {
                   chart = new Highcharts.Chart({
                       chart: {
                           renderTo: 'container',
                           type: 'line',
                           marginRight: 130,
                           marginBottom: 25
                       title: {
                           text: 'Monthly Average Temperature',
                           x: -20 //center
                       subtitle: {
                           text: 'Source:',
                           x: -20
                       xAxis: {
                           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                       yAxis: {
                           title: {
                               text: 'Days For Display(day)'
                           plotLines: [{
                               value: 0,
                               width: 1,
                               color: '#808080'
                       tooltip: {
                           shared: true
                 legend: {
                           layout: 'vertical',
                           align: 'right',
                           verticalAlign: 'top',
                           x: -10,
                           y: 100,
                           borderWidth: 0
                       series: [{
                           type: 'area',
                           data: jsondata
   <div id='container' style="min-width: 400px; height: 400px; margin: 0 auto"></div>

here i need display x axis of line-chart data from controlles plz help how could i do this work i dont have any idea plz help me to do this work thank in advance
Posted 28-Aug-12 4:10am
Edited 28-Aug-12 5:33am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Your chart is hard coded here. Therefore, you know what the values are. So, I'm not sure I see the issue. The data is not even coming through your AJAX call, it's right there.
You should move your script to a js file. Apart from anything else, the browser can then cache it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Advertise | Privacy | Mobile
Web03 | 2.8.150326.1 | Last Updated 28 Aug 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100