We Keep Coding

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

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.

How to localize exported files from Highcharts?

I have charts localized into non-English language such as Thai (example text : ภาษาไทย).
Everything seems to work fine, all texts can be displayed in that specific language.
But when I tried to export charts to files, these are list of what happened:
-Download to PNG image ---> Result : All non-English characters became squares.
-Download to JPEG image ---> Result : Same as downloading to PNG
-Download to PDF document ---> Result : Same as downloading to PNG
-Download to SVG vector image ---> Result : Displayed correctly
To know how it looks like, just replace English Label there with Thai example text (example text : ภาษาไทย).
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin-top: 1em"></div>
and
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'xy'
},
title: {
text: 'ข้อมูลเข้านะจ๊ะ'
},
subtitle: {
text: 'สิบวันที่แล้วนะจ๊ะ'
},
xAxis: [{
categories: ['2012-08-01', '2012-08-02', '2012-08-03', '2012-08-04', '2012-08-05', '2012-08-06', '2012-08-07', '2012-08-08', '2012-08-09', '2012-08-10', '2012-08-11', '2012-08-12']
}],
exporting: {
buttons: {
exportButton: {
menuItems: [{},
{},
{},
{}, /* leave standard buttons */
{
text: 'Download as xls',
onclick: function() {
location.href="getXLS.php?param1=param&param2=para2";}
}
]
}
}
},
yAxis: [{
min: 0,
max: 100,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // High wind
from: 90,
to: 100,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'AR to get',
style: {
color: '#606060'
}
}
}],
title: {
text: 'AR'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
min: 0,
max: 8000,
gridLineWidth: 1,
title: {
text: 'Inbound',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
var unit = {
'AR': '% ',
'1': '1',
'2': '2',
'3': '3'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
yAxis: 1,
name: '1',
data: [2000, 1000, 3000, 2000, 1000]
}, {
yAxis: 1,
name: '2',
data: [4000, 7000, 4000, 6000, 5000]
}, {
name: '3',
type: 'spline',
color: '#F7801F',
yAxis: 0,
data: [90, 80, 70, 90, 85],
}]
});
});
});

I had the exact same problem. If you are sure the problem has no relation with encoding, then try the following depending on how you export
If you are exporting via your own server, make sure you added the required fonts
If you are exporting locally, add this one as well
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>

Remove axis line from highchart graphic

I have this graph. I have a grid and I want to insert in each row this graph.
The problem is that as you can see there is a small line in the left, it seems that this line is the graph axis. I need to remove it not only because of the visual aspect but because the axis increases the grid cell height.
Thanks in advance!
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div>
​
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
backgroundColor: null,
renderTo: 'container',
type: 'bar',
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
enabled: false,
categories: [''],
labels: {
enabled: false
}
},
yAxis: {
enabled: false,
gridLineWidth: 0,
lineWidth: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
legend: {
enabled: false,
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
credits:
{
enabled: false,
position:
{
align: 'left',
x: 10
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [ {
name: 'Clicks',
data: [2]
}, {
name: 'Distributed Points',
data: [3]
}],
exporting:
{
enabled: false
}
});
});
​
​

Is this what you are after?
I set the xAxis lineWidth: 0 and then after the plot is drawn:
$('.highcharts-axis').css('display','none');
EDIT:
If you also set tickWidth: 0, you can remove all traces of the axis lines without using the CSS call.
Revved fiddle here.

Remove the categories text under the bars on Highcharts chart

I have a chart that looks like this:
I want to remove the text that is under the bars, "ödmjukhet", "engagemang" etc.. but I still want to display the categorie names on the labels when a user hover over the bars. How can I do this?
This is my code in C#
Highcharts chart1 = new Highcharts("Chart")
.SetXAxis(new XAxis { Categories = averageGrades.Select(averageGrade => averageGrade.CoreValue.Name).ToArray(), })
.SetYAxis(new YAxis { Min = 0, Max = 10, TickInterval = 1, Title = new YAxisTitle { Text = "Betygskalan" } })
.SetSeries(new Series { Data = data, Name = "Snittbetyg" })
.SetLegend(new Legend { Enabled = false, Layout = Layouts.Horizontal})
.SetTitle(new Title { Text = "" })
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 300, Width = 200});
And this is the code by javascript output code:
var Chart;
$(document).ready(function() {
Chart = new Highcharts.Chart({
chart: { renderTo:'Chart_container', defaultSeriesType: 'column', height: 300, width: 200 },
legend: { enabled: false, layout: 'horizontal' },
title: { text: '' },
xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] },
yAxis: { max: 10, min: 0, tickInterval: 1, title: { text: 'Betygskalan' } },
series: [{ data: [{ color: '#FF9980', y: 4 }, { color: '#A6FF80', y: 8 }, { color: '#FF9980', y: 3 }, { color: '#A6FF80', y: 9 }], name: 'Snittbetyg' }]
});
});
Thanks in advance!

remove
xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] },
from your code
OR
add class into your style, if you want to keep on hover see DEMO
.highcharts-axis{
display: none;
}​

The best way of doing this is probably witht he built in label objecton the xaxis.
http://www.highcharts.com/ref/#xAxis-labels--enabled
The following should do the trick without relying on overriding their styles as in Rab's answer. This is obviously preferred since the API is a lot more fixed than their HTML format.
xAxis: {
categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'],
labels: {enabled: false}
},

How To Pass Arguments In Jquery Function C# Web Application?

i am drawing chart using High Chart JS in my web app in which data values are hardcoded as shown below,
function Drawgraph(){
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Power to USD '
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Power rate'
},
min: 0.6,
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.theme.colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'Power to USD',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2011, 0, 01),
data: [
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.7095
]
}]
});
});
};
How would i pass values to the data [] ?? from array [] term ...
Hopes for your reply
Regards,

From your CS code:
Page.ClientScript.RegisterArrayDeclaration("DataArray", "0.8, 0.5, 1.6");