Passar DataTable ou Array para funcao Js

26/07/2013

0

Bom dia, boa tarde, boa noite!

Primeiramente como sou novo no forum, gostaria de agradecer a todos pelos bons posts e pelo conhecimento que obtive atraves dos mesmos. Obrigado!

Bom vamos a duvida hehe!

Preciso fazer um grafico com um plugin chamado highcharts!

tenho exemplos retirados do proprio site!

so que meu conhecimento em JS e limitado!

gostaria de passar valores para a função JS vindos do C#

ex:

Codigo JS -

<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

}]
});
});

na parte final quando ele preenche o DATA das series, e que eu gostaria de passar valores de um DataTable ou array, que possuo no CodeBehind do C#


protected void Page_Load(object sender, EventArgs e)
{
double[] aa = new double[] { 42.4, 33.2 };
}

bom é isso se alguem puder me ajudar fico grato!


-- o codigo de exemplo JS foi desenvolvido pelo highcharts como exemplo de utilização

http://www.highcharts.com/demo/column-basic



Anderson Souza

Anderson Souza

Responder

Posts

26/07/2013

Anderson Souza

Pesquisando muito encontrei esse blog que explica como fazer isso!

http://deebujacob.blogspot.com.br/2011/05/aspnet-and-highcharts.html

Asp Codbehind ->

public partial class WebForm1 : System.Web.UI.Page
{
public string Series1 { get; set; }
public string Xaxis { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
/*X axis coordinates*/
List<int> lstXaxis = new List<int>();
lstXaxis.Add(2007);
lstXaxis.Add(2008);
lstXaxis.Add(2009);
lstXaxis.Add(2010);

JavaScriptSerializer oSerializer = new JavaScriptSerializer();
Xaxis = oSerializer.Serialize(lstXaxis);

/*Series1 - Yaxis*/
ChartEx oEx = new ChartEx();
oEx.data = new List<int>();

oEx.name = "Revenue";
oEx.data.Add(350);
oEx.data.Add(410);
oEx.data.Add(220);
oEx.data.Add(421);

JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
Series1 = oSerializer1.Serialize(oEx);

}
}

public class ChartEx
{
public string name { get; set; }
public List<int> data { get; set; }
}
}

HTML ->

<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: <%=Xaxis %>
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [<%=Series1 %>]
});
});
</script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


Duvida solucionada!
Responder

26/07/2013

Joel Rodrigues

Esse é dos bons. Ele pergunta e ele mesmo responde he he
Obrigado, amigo, por compartilhar conosco a solução encontrada, certamente ajudará outras pessoas.
Estou concluindo o tópico.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar