Recarregue os dados do gráfico via JSON com HighCharts
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou tentando recarregar os dados de um gráfico HighCharts via JSON com base em um botão Clique em outro lugar da página. Inicialmente, gostaria de exibir um conjunto padrão de dados (gastos por categoria), mas carregue novos dados com base na entrada do usuário (gastos por mês, por exemplo). A maneira mais fácil de pensar em produzir o JSON do servidor é passando uma solicitação GET para a página PHP, por exemplo $ .get ('/massa/inclui/vive-chart.php? mode = mês', recuperando esse valor do atributo ID do botão.
Aqui está o que tenho até agora para recuperar os dados padrão (gastos por categoria). Precisa descobrir como carregar dados completamente diferentes no gráfico de pizza, com base na entrada do usuário, sob demanda:
$(document).ready(function() {
//This is an example of how I would retrieve the value for the button
$(".clickMe").click(function() {
var clickID = $(this).attr("id");
});
var options = {
chart: {
renderTo: 'graph-container',
margin: [10, 175, 40, 40]
},
title: {
text: 'Spending by Category'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: $'+ this.y;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if (this.y > 5) return '$' + this.y;
},
color: 'white',
style: {
font: '13px Trebuchet MS, Verdana, sans-serif'
}
}
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '50px',
top: '100px'
}
},
series: [{
type: 'pie',
name: 'Spending',
data: []
}]
};
$.get('/dough/includes/live-chart.php', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
Qualquer ajuda seria muito apreciada
EDITAR
Aqui está o JavaScript atualizado graças a Robodude. John, você me tem no caminho certo aqui - obrigado! Agora estou ficando preso com como substituir os dados no gráfico da solicitação AJAX. Devo admitir que o código após o $ .get () provavelmente é do código de amostra, não entendo completamente o que está acontecendo quando é executado - talvez exista uma maneira melhor de formatar os dados?
Consegui fazer algum progresso, pois o gráfico agora carrega novos dados, mas ele é adicionado além do que já está lá. Eu suspeito que o culpado seja esta linha:
options.series[0].data.push(data);
Eu tentei opções.Series [0] .SetData (dados); Mas nada acontece. Pelo lado positivo, a solicitação AJAX funciona perfeitamente com base no valor do menu Selecionar e não há erros de JavaScript. Aqui está o código em questão, sem opções de gráfico:
$.get('/dough/includes/live-chart.php?mode=cat', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
$("#loadChart").click(function() {
var loadChartData = $("#chartCat").val();
$.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
});
Editar 2Este é o formato que o gráfico está extraindo - nome e valor muito simples, de categoria com n após cada um.
Coffee, 4.08
Dining Out, 5.05
Dining: ODU, 5.97
Dining: Work, 38.41
Entertainment, 4.14
Gas, 79.65
Groceries, 228.23
Household, 11.21
Misc, 12.20
Snacks, 20.27
Solução
EDIT: A resposta abaixo está mais correta!
https://stackoverflow.com/a/8408466/387285
http://www.highcharts.com/ref/#series-object
Html:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>
<div id="container" style="height: 400px"></div>
JavaScript:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
series: []
};
$("#change").click(function() {
if ($("#list").val() == "A") {
options.series = [{name: 'A', data: [1,2,3,2,1]}]
// $.get('/dough/includes/live-chart.php?mode=month'
} else {
options.series = [{name: 'B', data: [3,2,1,2,3]}]
// $.get('/dough/includes/live-chart.php?mode=newmode'
}
var chart = new Highcharts.Chart(options);
});
Este é um exemplo muito simples, já que não tenho meus arquivos aqui comigo, mas a idéia básica é que toda vez que o usuário seleciona novas opções para as coisas que eles querem ver, você vai substituir o objeto de dados .Series com as novas informações do seu servidor e depois recrie o gráfico usando o novo HighCharts.Chart ();.
Espero que isto ajude! John
EDITAR:
Confira isso, é de algo em que trabalhei no passado:
$("table#tblGeneralInfo2 > tbody > tr").each(function (index) {
if (index != 0) {
var chartnumbervalue = parseInt($(this).find("td:last").text());
var charttextvalue = $(this).find("td:first").text();
chartoptions.series[0].data.push([charttextvalue, chartnumbervalue]);
}
});
Eu tinha uma tabela com informações no primeiro e no último TDS que eu precisava adicionar ao gráfico de pizza. Froo através de cada uma das linhas e pressiono os valores. NOTA: Eu uso o ChoTOptions.Series [0] .Data Como os gráficos de pizza têm apenas 1 série.
Outras dicas
As outras respostas não funcionaram para mim. Eu encontrei a resposta em sua documentação:
http://api.highcharts.com/highcharts#series
Usando este método (Veja JSFiddle Exemplo):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// the button action
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
Você precisa limpar a matriz antiga antes de pressionar os novos dados. Existem muitas maneiras de conseguir isso, mas eu usei este:
options.series[0].data.length = 0;
Portanto, seu código deve ficar assim:
options.series[0].data.length = 0;
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
Agora, quando o botão é clicado, os dados antigos são purgados e apenas os novos dados devem ser exibidos. Espero que ajude.
Na verdade, talvez você deva escolher a função update é melhor.
Aqui está o documento de função update http://api.highcharts.com/highcharts#series.update
Você pode apenas digitar o código como abaixo:
chart.series[0].update({data: [1,2,3,4,5]})
Esses código mesclarão a opção Origin e atualizam os dados alterados.
A resposta correta é:
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
data = {};
});
Você precisa liberar a matriz 'dados'.
data = {};
Se você são usando push para empurrar os dados para a opção.Series dinamicamente .. apenas use
options.series = [];
para limpar.
options.series = [];
$("#change").click(function(){
}
Você sempre pode carregar dados JSON
Aqui eu defini o gráfico como namespace
$.getJSON('data.json', function(data){
Chart.options.series[0].data = data[0].data;
Chart.options.series[1].data = data[1].data;
Chart.options.series[2].data = data[2].data;
var chart = new Highcharts.Chart(Chart.options);
});
data = [150,300]; // data from ajax or any other way
chart.series[0].setData(data, true);
o setData chamará o método Redraw.
Referência: http://api.highcharts.com/highcharts/series.setdata
