Search code examples
javascriptc#jqueryjsoncanvasjs

Fill CanvasJS with json

Currently I am trying to create a chart for the first time using javascript. I want to show the data on the screen by using the fill chart json method in the mainpage page.

When I check the url in json format, output looks like below. enter image description here

[
   {
      "CV_STATU":"Reddedildi",
      "MyCount":366
   },
   {
      "CV_STATU":null,
      "MyCount":23
   },
   {
      "CV_STATU":"Görüşmeye Bekleniyor",
      "MyCount":14
   }
]

but when I call the mainpage(localhost:56569/Yonetim/Home/MainPage), nothing is displayed.

     public class HomeController : Controller
            {
          public ActionResult MainPage()
                {
        
                    var model = new CvViewModel();
                    return View(model);
                }
          public JsonResult FillChart()
                {
        
                    using (MULAKATDBEntities1 ent = new MULAKATDBEntities1())
                    {
        
                        var dbStatuList = ent.CV.GroupBy(x => new { x.CV_STATU }).Select(g => new { g.Key.CV_STATU , MyCount = g.Count() }).ToList();
        
                        return Json(JsonConvert.SerializeObject(dbStatuList), JsonRequestBehavior.AllowGet);
                    }
                }
        
        }

my javascript code is as follows :

    <html>
    <head>
        <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    </head>
    
    
    <body>
        <div id="chartContainer" style="height: 300px; width: 100%;"/>
    </body>
    
    </html>
    
    <script type="text/javascript">
        window.onload()=function(){
            var dataPoints = [];
            $.getJSON("Yonetim/Home/FillChart", function (data) {
                for (var i = 0; i <= data.length - 1; i++) {
                    dataPoints.push({ label: data[i].CV_STATU, y: parseInt(data[i].MyCount) });
                }
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "theme2",
                    title: {
                        text: "CanvasJS Charts "
                    },
                    data: [
                        {
                            type: "column",
                            dataPoints: dataPoints
                        }
                    ]
                });
                chart.render();
            });
        }
    </script>

How can I create a chart with cv_statu and mycount information on the screen?

Solution

  • Here is a working solution:

    <html>
<head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;" ></div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("https://79723e01-80d8-4331-ad9f-5ec9b34a6857.mock.pstmn.io/Yonetim/Home/FillChart", function (data) {
            
            const dataPoints = data.map(point => {
                return {
                    label: point.CV_STATU,
                    y: parseInt(point.MyCount),
                }
            })

            const chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                title: {
                    text: "CanvasJS Charts"
                },
                data: [
                    {
                        type: "column",
                        dataPoints: dataPoints
                    }
                ]
            });

            chart.render();
        })
    })
</script>

    You need to change the url in $.getJSON to yours. Mine will work only if you launch your page as a server.