1

Tengo este .json:

[
    {
        "id": "bitcoin", 
        "name": "Bitcoin", 
        "symbol": "BTC", 
        "rank": "1", 
        "price_usd": "9433.76", 
        "price_btc": "1.0", 
        "24h_volume_usd": "7381970000.0", 
        "market_cap_usd": "160572613853", 
        "available_supply": "17021062.0", 
        "total_supply": "17021062.0", 
        "max_supply": "21000000.0", 
        "percent_change_1h": "0.46", 
        "percent_change_24h": "-0.6", 
        "percent_change_7d": "3.38", 
        "last_updated": "1525742073"
    }
]

Y necesito que el valor de price_usd se vaya añadiendo a mis highcharts, tengo una función que hace la petición Ajax que no se si recojo bien el valor de price_usd y que luego cargo en el evento de las highcharts, el código que tengo es el siguiente:

Highcharts.chart('btc', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Bitcoin'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'mentions',
        data: []
    }]
});

function requestData() {
    $.ajax({
        url: 'APIcriptomonedas/datosAPI/bitcoin.json',
        type: "GET",
        dataType: "json",
        data : {username : "demo"},
        success: function(data) {
            chart.addSeries({
            name: "mentions",
            data: data.price_usd
        });
    },
    cache: false
});

3 respuestas 3

0

En requestData() cuando cachas data: data.price_usd ese lo imprimas en data: [], para que puedas ir viendo los datos en la gráfica
*series: [ { name: 'mentions', data: [] }*

0

Yo tengo un ejemplo funcionando pero lo tengo implementado en laravel 5, aqui le dejo el codigo para que lo estudie, en la parte de la vista funciona en php puro en en el controlador si puede cambiar algo.

en la parte de la vista

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

<script type="text/javascript">
    $.ajax({
            type: 'get',
            url: 'consulta',
            data: {
              '_token': $('input[name=_token]').val()
            },
            success: function(data) {
              var options = {
              chart: {
                renderTo: 'containersscha',
                type: 'column'
              },
              series: [{}]
              };
              var url =  "consulta";
              $.getJSON(url,  function(data) {
              options.series[0].data = data;
              var chart = new Highcharts.Chart(options);
    }); 

</script>

y en el controlador realizor una consulta

public function consulta(){

        //$id_especies = Input::post('multiples');
        $Arboles = ArbolesModel::select('id','especie_id')->get();
        //$Arboles[] = [4,13];
        foreach ($Arboles as $value) {
        $Arboless[] = [$value->id,$value->especie_id];

        }
        //$Arboles = ArbolesModel::whereIn("especie_id",$id_especies)->get();
        return response()->json($Arboless); 

    }
0

El JSON que recibes es como un array de objetos; por tanto no debes accederlo como data.price_usd pues tienes que indicar que elemento agregaras.

Así mismo, debes revisar si quieres agregar otra seríe o a la ya existente.

El siguiente código fue creado usando como base https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/spline de los ejemplos disponibles.

Te coloco como seria actualizando una serie (en este caso la ultima) o agregando una nueva serie.

var datosIniciales =[
    {
        "id": "bitcoin", 
        "name": "Bitcoin", 
        "symbol": "BTC", 
        "rank": "1", 
        "price_usd": "9433.76", 
        "price_btc": "1.0", 
        "24h_volume_usd": "7381970000.0", 
        "market_cap_usd": "160572613853", 
        "available_supply": "17021062.0", 
        "total_supply": "17021062.0", 
        "max_supply": "21000000.0", 
        "percent_change_1h": "0.46", 
        "percent_change_24h": "-0.6", 
        "percent_change_7d": "3.38", 
        "last_updated": "1525742073"
    }
];

var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline',
        //animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10/*,
        events: {
            load: requestData
        }*/
    },
    title: {
        text: 'Bitcoin'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'mentions',
        data: []
    }]
});

//console.log("Series:", chart.series.length);
// Agrego

function agregarDato() {
   // Generamos un valor aleatorio
  var nvoValor = Math.random();
  // Obtenemos los valores actuales
  var valoresActuales =chart.series[chart.series.length-1].options.data; 
  // Agregamos el nuevo valor
  valoresActuales.push(nvoValor);
  // Actualizamos la ultima serie
  chart.series[chart.series.length-1].setData(valoresActuales);
}

function agregarSerieDato() {
   // Generamos un valor aleatorio
  var nvoValor = Math.random();
  // Creamos un array vacio
  var valoresActuales =[];
  // Agregamos el nuevo valor
  valoresActuales.push(nvoValor);
  // Lo agregamos como nueva serie
  chart.addSeries({data: [nvoValor]});
//chart.update();
}

function mostrarSeries() {
  console.log(chart.series);
}
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


<button onclick="agregarDato()" > Agregar Dato a la última serie</button>
<button onclick="agregarSerieDato()" >Agregar dato en nueva serie</button>
<button onclick="mostrarSeries()" > Mostrar series</button>
<div id="container" style="height: 400px"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.