Javascript Girl
  1. Javascript Girl
  3. Comment charger des données de JSON vers Highchart?
Intereting Posts
Comment lire le fichier à partir de l'extension chrome? Différences entre l'isotopie et la maçonnerie jQuery plugins Session du navigateurStockage. Partagez-vous entre les onglets? Comment puis-je positionner un élément à côté de la sélection de texte utilisateur? Réagir, babel, webpack ne pas analyser le code jsx Comment puis-je appeler la fonction javascript d'un autre projet dans la même solution? La minuterie de compte à rebours JavaScript la plus simple possible? Grouper les éléments du tableau à l'aide de l'objet Exécuter la fonction sur la page Web? Comment insérer le code jQuery dans le thème Avada? Meteor.loginwithpassword ne fonctionne pas sur iOS Méthode de compression sans perte pour raccourcir la chaîne avant l'encodage de la base 64 pour la rendre plus courte? Comment mettre à jour dynamiquement les tableaux élevés en utilisant les curseurs jQuery UI Pourquoi Javascript === / == l'égalité de chaîne a-t-elle parfois une complexité de temps constant et a parfois une complexité de temps linéaire? AngularJS html5mode page de rechargement

Comment charger des données de JSON vers Highchart?

Mon Json ressemble à ceci: 

 [{"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}]

Et je souhaite afficher ces données dans Highchart, l'axe X étant le format de date,

("1332801000000.0" in JSON) et l'axe Y sont des données (300.0 in JSON) ,

Tout comme un point.

Je remarque qu'il y a une démo dans Highchart.com, et il est exécuté des données en direct. Je le copie, mais je ne veux pas me montrer animé. Il suffit de montrer ces points à la fois, et de constituer un graphique. Toute solution? Je ne suis pas très familier avec JavaScript. Mais je pense que cela peut utiliser la même méthode. 

 <script type="text/javascript"> var chart; // global /** * Request data from the server, add it to the graph and set a timeout to request again */ function requestData() { $.ajax({ url: '/get_data', 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(eval(point), true, shift); // call it again after one second setTimeout(requestData, 5000); }, cache: false }); } $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'test', defaultSeriesType: 'spline', events: { load: requestData } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 150, maxZoom: 20 * 1000 }, yAxis: { minPadding: 0.2, maxPadding: 0.2, title: { text: 'Value', margin: 80 } }, series: [{ name: 'Random data', data: [] }] }); }); </script>

Je ne suis pas sûr d'avoir compris votre question … alors, si j'ai mal compris, corrigez-moi.

Vous pouvez simplement copier your json data dans un fichier dont le nom est example.json et ensuite dans votre requête ajax, procédez comme suit: 

 function requestData() { $.ajax({ url: './example.json', // depending which directory you save your file // the other code }); };

essaye ça 

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

Maintenant le script Highchart 

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

Voici un exemple de travail minimal d'une solution. Vous pouvez analyser votre objet de données en utilisant Object.keys et Array.prototype.map, à la fin vous souhaitez trier votre tableau de données avec 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);

Exemple en direct: https://jsfiddle.net/33hd8jog/

[MODIFIER]

J'ai également créé un exemple en utilisant l'extraction de données à partir du serveur: 

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

Exemple en direct: https://jsfiddle.net/gxb6j2tz/

J'avais fait cela en javascript avec 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}] }); } };