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
}
}
}]
}
});
});
});
1 Answer 1
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.