发表新帖
发表新帖

How to load data from JSON to Highchart?

后端 未结
关注
4 2248
-上瘾入骨i
-上瘾入骨i 2021-01-15 07:09

my Json looks like this:

[{\"1332879360000.0\": 300.0, \"1332797760000.0\": 353.0,

\"1332799320000.0\": 358.0, \"1332
相关标签:
4条回答
  • 失恋的感觉
    2021-01-15 07:20

    Here is a minimal working example of a solution. You can parse your data object using Object.keys and Array.prototype.map, at the end you want to sort your array of data with Array.prototype.sort.

    const json = [{
  "1332879360000.0": 300.0,
  "1332797760000.0": 353.0,
  "1332799320000.0": 358.0,
  "1332879780000.0": 302.0,
  "1332800160000.0": 359.0,
  "1332880200000.0": 299.0,
  "1332880620000.0": 298.0,
  "1332881040000.0": 301.0,
  "1332881460000.0": 402.0,
  "1332880020000.0": 330.0,
  "1332882300000.0": 466.0,
  "1332796620000.0": 519.0,
  "1332800520000.0": 447.0,
  "1332797460000.0": 359.0,
  "1332801000000.0": 442.0
}]

const options = {
  xAxis: { type: 'datetime' },
  series: [{
    // Get array of keys from your json object
    data: Object.keys(json[0])
      // Map your keys to arrays with x and y values
      .map((key) => [Number(key), json[0][key]])
      // Sort your data
      .sort((a, b) => a[0] - b[0]),
  }]
}

const chart = Highcharts.chart('container', options);

    Live example: https://jsfiddle.net/33hd8jog/

    [EDIT]

    I also created an example using data fetching from server:

    const url = 'https://rawgit.com/stpoa/7d44ff0db61515dae80ad021b7c6c01a/raw/800735764d6596512a5fbc69acad019ed0416d8f/data.json'

window.fetch(url).then(response => response.json()).then(json => {
  const options = {
    xAxis: { type: 'datetime' },
    series: [{
      // Get array of keys from your json object
      data: Object.keys(json[0])
        // Map your keys to arrays with x and y values
        .map((key) => [Number(key), json[0][key]])
        // Sort your data
        .sort((a, b) => a[0] - b[0]),
    }]
  }

  const chart = Highcharts.chart('container', options)
})

    Live example: https://jsfiddle.net/gxb6j2tz/

    0 讨论(0)
  • 说谎
    2021-01-15 07:22

    I am not sure to have understood your question.... so if I misunderstood, please correct me.

    You can just copy your json data in a file which name is example.json and then in your ajax request make the following:

    function requestData() {
    $.ajax({
        url: './example.json',  // depending which directory you save your file
        // the other code
  });
};
    0 讨论(0)
  • 情书的邮戳
    2021-01-15 07:38

    try this 

    }
// Set the JSON header
header("Content-type: text/json");

// The x value is the current JavaScript time, which is the Unix time multiplied by       1000.
$x = time() * 1000;
$y = rand(0,100) ; 
mysql_query("INSERT INTO `apak`.`mach_1` (`id`, `temp`, `date_time`) VALUES           (NULL,'".$y."', CURRENT_TIMESTAMP);") ; 


// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

    now the the highchart script 

    <script>
 /**
 * Request data from the server, add it to the graph and set a timeout to request again
 */
var chart; // global
function requestData() {
$.ajax({
    url: 'http://localhost:8080/test.php',
    success: function(point) {
        var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is longer than 20

        // add the point
        chart.series[0].addPoint(point, true, shift);

        // call it again after one second
        setTimeout(requestData, 1000);    
    },
    cache: false
   });
 }
 $(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline',
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 100,
        maxZoom: 20 * 1000
    },

    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: [{
        name: 'Random data',
        data: []
     }]
   });        
});
  </script>
  <  /head>
<body>


    </div>
</body>
</html>
    0 讨论(0)
  • 暗喜
    2021-01-15 07:43

    I had done that in javascript with JSON..

    "onResultHttpService": function (result, properties) {

            var json_str = Sys.Serialization.JavaScriptSerializer.deserialize(result);
            var data = [];
            var cat = [];

            var categoryField = properties.PodAttributes.categoryField;
            var valueField = properties.PodAttributes.valueField;
            for (var i in json_str) {
                var serie = new Array(json_str[i][categoryField], json_str[i][valueField]);
                var tmpCat = new Array(json_str[i][categoryField]);
                data.push(serie);
                cat.push(tmpCat);
            }
            //cat = 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: properties.id,
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: cat
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: 70,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                    this.x + ': ' + this.y + ' mm';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{ data: data}]
            });


        }

    };
    0 讨论(0)
 看不清?
提交回复
热议问题