Load Json data with Ajax and Highcharts

Question

Load Json data with Ajax and Highcharts

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have this .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" } ]

And I need the value of price_usd to be added to my highcharts , I have a function that makes the Ajax request that does not if I pick up the value of price_usd and then charge in the event of the highcharts , the code I have is the following:

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

json ajax highcharts

asked by charli 08.05.2018 в 12:34

source

2 answers

Bookshelf.js and Knex.js Delay Connection in MYSQL

score 0 · Answer 1

In requestData () when you get data: data.price_usd that you print it in data: [], so you can go see the data in the graphic
* series: [ { name: 'mentions', data: [] } *

score 0 · Answer 2

I have a working example but I have it implemented in laravel 5, here I leave the code for you to study it, in the part of the view it works in pure php in the controller if you can change something.

in the part of the view

<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>

and in the controller realizor a query

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

    }