Matheus Batista
Matheus Batista

Reputation: 305

send data as JSON from aspNet controller

So, I'm trying to build a highchartJs using c#. I'm building the chart from some models and methods (not using it's library on the back), and then trying to fetch it's data from the js file, where the highchartJs is being loaded.

I'm trying to send the data from the api as JSON, so I can fetch dinamically (the data will come from DB queries later on), but I can't seem to find a way to pass it as json

this is what I have so far

this is the data I want to pass as json from c#

        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Net;
        using System.Net.Http;
        using System.Web.Http;
        using ItauSolution01.Models;

        namespace ItauSolution01
        {
            public class MCorretivasAXAController : ApiController
            {
                Grafico grafico = new Grafico
                {
                    categories = new string[] {
                        "Média 2016"
                        , "Jan"
                        , "Fev"
                        , "Mar"
                        , "Abril"
                        , "Maio"
                        , "Jun"
                        , "Jul"
                        , "Ago"
                        , "Set"
                        , "Out"
                        , "Nov"
                        , "Dez"
                        , "Média 2017"
                    },

                    series = new Serie[] {
                        new Serie
                        {
                            name = "Abertas"
                            , data = new int[]
                            {
                               3757, 3880, 3588, 4039, 3902, 4082, 3994, 3951, 4279, 3859, 3903, 3986, 3879, 3945
                            }
                        },
                        new Serie
                        {
                            name = "Executadas",
                            data = new int[]
                            { 3757, 3880, 3588, 4039, 3902, 4082, 3994, 3951, 4279, 3859, 3903, 3986, 3879, 3945 }
                        }
                    }

                };

                // GET api/<controller>
                public Grafico Get()
                {
                    return grafico;
                }

                // GET api/<controller>/5
                public string Get(int id)
                {
                    return "value";
                }

                // POST api/<controller>
                public void Post([FromBody]string value)
                {
                }

                // PUT api/<controller>/5
                public void Put(int id, [FromBody]string value)
                {
                }

                // DELETE api/<controller>/5
                public void Delete(int id)
                {
                }
            }
        }

this is the graph that requires this data

        $(document).ready(function () {
            $.getJSON("file:///C:/Users/Simonini%20Software/Desktop/Itau/ItauSolution01/ItauSolution01/Controllers/mcorretivasaxacontroller.cs")
            .done(function (response) {

                var chart = Highcharts.chart('container02', {

                    chart: {
                        type: 'column'
                    },

                    title: {
                        text: 'CORRETIVAS ABERTAS x ACUMULADO'
                    },

                    legend: {
                        align: 'right',
                        verticalAlign: 'middle',
                        layout: 'vertical'
                    },

                    xAxis: {
                        categories: [
                            'Backlog Mês Anterior'
                            , 'Executado'
                            , 'Backlog Automação'
                            , 'Backlog Elétrica','Backlog Mecânica'
                            , 'Backlog Incêndio'
                            , 'Backlog Atual'
                        ],
                        labels: {
                            x: -10
                        }
                    },

                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: ''
                        }
                    },

                    series: [{
                        name: 'DC1',
                        data: [103, 20, 59, 39, 8, 2, 108],
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            y: 10, // 10 pixels down from the top
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    }, {
                        name: 'DC2',
                        data: [181, 39, 122, 38, 25, 1, 186],
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            y: 10, // 10 pixels down from the top
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    }, {
                        name: 'NOC',
                        data: [54, 18, 41, 15, 7, 1, 64],
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            y: 10, // 10 pixels down from the top
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    }],

                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 800
                            },
                            chartOptions: {
                                legend: {
                                    align: 'center',
                                    verticalAlign: 'bottom',
                                    layout: 'horizontal'
                                },
                                yAxis: {
                                    labels: {
                                        align: 'left',
                                        x: 0,
                                        y: -5
                                    },
                                    title: {
                                        text: null
                                    }
                                },
                                subtitle: {
                                    text: null
                                },
                                credits: {
                                    enabled: false
                                }
                            }
                        }]
                    }
                });
            });
        });

Upvotes: 1

Views: 63

Answers (1)

Iskander Raimbaev
Iskander Raimbaev

Reputation: 1362

You need to host you ASP.NET Web API project on IIS server (it is an approach to execute the application) and then you can access your API through URL - replace line

  $.getJSON("file:///C:/Users/Simonini%20Software/Desktop/Itau/ItauSolution01/ItauSolution01/Controllers/mcorretivasaxacontroller.cs")

in your client code with line

$.getJSON('http://localhost:80/api/MCorretivasAXA')

it should work, if you use default 80 port. Generally you should start from reading what is API and WebAPI from MSDN documentation.

Upvotes: 1

Related Questions