Criando gráfico HighCharts com conteúdo dinâmico

Você consegue criar um array (PHP) com essa estrutura?

Os dados eu tenho, não sei como criar esse tipo de array. Seria um array dentro do outro?

Exatamente, depois você o transforma em JSON.

Lucas, teria como postar um exemplo do array? tenho a mesma dúvida e não consigo fazer funcionar.

@@D.Wise, veja bem...

Esse array:

array(

 'series' => array(
 array(
 'type' => 'pie'
 )
 )
)

É a mesma coisa que esse JSON:

{
"series": [
{
"type": "pie"
}
]
}

Basta montar o restante.

Ah, entendi. Era bem o que eu estava fazendo então. Obrigado Lucas

Boa noite a todos passei por esta situação faz pouco tempo vou postar meu código talvez ajude vcs.

meu php onde cria o array json

nome do arquivo = lan-1-tx.php

**<?php**

$postrx = trim($_POST['inputrx']);

$posttx = trim($_POST['inputtx']);

// converte o cabeçario para json

header("Content-type: text/json");

// gera um tempo rand

$x = time() * 1000;

// faz uma requisição para o server

$txgreen = "cat /sys/class/net/lan-1/statistics/tx_bytes";

$greentx = shell_exec($txgreen);

$rxgreen = "cat /sys/class/net/lan-1/statistics/rx_bytes" ;
$greenrx = shell_exec($rxgreen);

// remove caracteres especiais

$hrx = trim(preg_replace('/(?![ ])\s+/', ' ', $greenrx));

$htx = trim(preg_replace('/(?![ ])\s+/', ' ', $greentx));

#pega o valor do campo hidden menos "-" o valor do servidor

$rx = $postrx == 0 ? 0 :$hrx - $postrx;

$tx = $posttx == 0 ? 0 :$htx - $posttx;

$rx = ($rx * 8) / 1000;

$tx = ($tx * 8) / 1000;

// cria o json JSON

if($_POST['inputrx'] == 0 && $_POST['inputtx']){
$ret = array($x, 0 , 0, 0, $hrx, $htx);

$ret = array($x, round($tx,2) , round($rx,2), round($tx+$rx,2), $hrx, $htx);
}
echo json_encode($ret);

**?>**

Agora meu html e javascript

<style>
body {

font-family: Arial, sans-serif;
margin:0;
padding:0;
left:0;

}

</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<div style="clear:both"></div>
<div style="min-width:431px; width:95%; height:145px; display: block ">

<div class="cxconteiner">
<span style="margin-left:5px; font-size:12px;">Out : </span>
<b id="tx" style="font-size:12px; color:rgba(24,146,5,1.00)">0</b> <span style="margin-left:5px; font-size:10px;">Kbps</span>

<div id="container" style ="width: 100%; height: 145px; display: block;
 border: 1px solid #E8E8E8; padding: 5px; margin-left:6px;" > </div>
</div>

<div class="cxconteiner" style="margin-left:20px; ">
<span style="margin-left:5px; font-size:12px;">In : </span>
<b id="rx" style="font-size:12px; color:rgba(24,146,5,1.00)">0</b> <span style="margin-left:5px; font-size:9px;">Kbps</span>
 <div id="container2" style ="width: 100%; height: 145px; display: block;
 border: 1px solid #E8E8E8; padding: 5px; margin-left:6px;" ></div>
</div>

<span style="; font-size:11px; font-weight:normal; float:left; display:block; margin-top:4px;">Total : <b id="total" style="font-size:11px; color:#676767">0</b> </span><span style="; font-size:10px; float:left; display:block; margin-top:6px"> Kbps</span>

</div>
<input type="hidden" value="0" name="inputrx" id="inputrx" />
<input type="hidden" value="0" name="inputtx" id="inputtx" />
<script>

function requestData() {
var inputrx = $("#inputrx").val();
var inputtx = $("#inputtx").val();
 $.ajax({
 url: 'php/lan-1-tx.php',

 success: function(point) {
//console.log(point)
var series = chart.series[0];
 shift = series.data.length > 20;
 chart.series[0].addPoint([point[0],point[1]], true, shift);
graf.series[0].addPoint([point[0],point[2]], true, shift);
$("#tx").html(point[1]);
$("#rx").html(point[2]);

$("#total").html(point[3]);
$("#inputrx").val(point[4]);
$("#inputtx").val(point[5]);
 setTimeout(requestData, 1000); // faz o request a cada 1 segundo
 },
 cache: false
 });
}

$(document).ready(function() {

//-------------------------------------------------------------- TX
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000,
categories: [''],
title: {
text: null
},
labels: {
enabled:false,//default is true
y : 0,
x: -10,
rotation: -45,
align: 'right' }
},
credits: {
enabled: false
},
yAxis: {
min:0,
tickInterval: 2,
title: {
text: '',
margin: 0
}
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 1.5,
y1: 2.6,
x2: 1.8,
y2: 1.5
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 1
},
color: 'rgb(0,0,205)', // aqui você altera a cor da linha do grafico azul
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'TX',
data: [],
showInLegend: false,
labels: {
enabled:false,
}
}]
});

//-------------------------------------------------------------- RX
graf = new Highcharts.Chart({
chart: {
renderTo: 'container2',
defaultSeriesType: 'spline',
events: {
//load: requestData
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000,
categories: [''],
title: {
text: null
},
labels: {
enabled:false,//default is true
y : 20, rotation: -45, align: 'right' }
},
credits: {
enabled: false
},
yAxis: {
min:0,
tickInterval: 2,
title: {
text: '',
margin: 0
}
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 1.5,
y1: 2.6,
x2: 1.8,
y2: 1.5
},
stops: [
[0, Highcharts.getOptions().colors[5]],
[1, Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 1
},
color: 'rgb(255,140,0)', // aqui você altera a cor do grafico laranja
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: "RX",
data: [],
showInLegend: false
}]

 });
});
</script>
<script type="text/javascript" src="js/highcharts.js"></script>