Our support has moved

Instead of continuing the battle against spammers, we decided to close the forum for new users and topics. But don't worry, there are still plenty of ways to reach us. Most notably, we will move our attention to Stack Overflow, where we will monitor questions under the tags [highcharts], [highstock] and [highslide].

For other ways of getting in touch with us, see Highcharts Support or Highslide Support.

Torstein Hønsi, CTO, 2013-01-29

How Highchart read Json file?

Technical support, bug reports and more.
Post a reply

How Highchart read Json file?

Postby ugo1 » Tue Feb 21, 2012 1:39 am

Hi,

I'm not able to use a json file with Higichart( even if I try many around intertet). so exist a simple example for my json data

Code: Select all
[{"data":1323199800000,"temperatura":5.5000011111111},{"data":1323200100000,"temperatura":5.4444438888889},{"data":1323200400000,"temperatura":5.2777777777778},{"data":1323200700000,"temperatura":5.2222233333333},{"data":1323201000000,"temperatura":5.1666661111111},{"data":1323201300000,"temperatura":5.1666661111111},{"data":1323201600000,"temperatura":5.0555544444444},{"data":1323201900000,"temperatura":5.0555544444444},{"data":1323202200000,"temperatura":5.2777777777778},{"data":1323202500000,"temperatura":5.5000011111111},{"data":1323202800000,"temperatura":5.4444438888889},{"data":1323203100000,"temperatura":5.1111116666667},{"data":1323203400000,"temperatura":4.7777766666667},{"data":1323203700000,"temperatura":4.6666677777778},{"data":1323204000000,"temperatura":4.6666677777778},{"data":1323204300000,"temperatura":4.6111105555556},{"data":1323204600000,"temperatura":4.5555561111111},{"data":1323204900000,"temperatura":4.5555561111111},{"data":1323205200000,"temperatura":4.6666677777778},{"data":1323205500000,"temperatura":4.7222222222222}]


where data stay for date in millesecond

Regards

Ugo Merlini
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby RSud » Tue Feb 21, 2012 7:53 am

Step 1:
Initialize the chart as:

var HCChartName = new Highcharts.Chart({ ... });

Assuming that you are using jQuery, you could fetch the JSON file using a AJAX call like this:

$.ajax({
url: url,
dataType: 'json',
data: parameterData, // parameters for the ajax call
success: function(data){
// At this stage 'data' represents the JSON object returned
// Now all you have to do is
HCChartName.series[0].data = data;
// however for this assignment to work directly, you will need to rename the JSON object properties to 'x' and 'y' as that corresponds to one of the default point implementations provided by highcharts
}
});

That should fix your problem :) Let us know if it doesn't. Also, for future reference, a sample of your code would be pretty useful in determining where exactly the problem is.
Last edited by RSud on Fri Feb 24, 2012 7:56 am, edited 1 time in total.
RSud
 
Posts: 10
Joined: Fri Dec 02, 2011 12:25 pm
Top

Re: How Highchart read Json file?

Postby ugo1 » Tue Feb 21, 2012 10:28 pm

Hi,

i'm sorry to ask but I'm complitely confused (like the new two girls I have to teach my (real) work :mrgreen: )

I have made a php file called new_file.php with this code

Code: Select all
<?php
$username="****";
$password="****";
$database="****";
mysql_connect(localhost,$username,$password)or die ("Could not connect to the database server.");
mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM archive limit 20";
$result=mysql_query($query);
  while($row = mysql_fetch_array($result))
   {
            $rows[] = array(
            "date" =>($row ['dateTime'])*1000,
            "temperature" =>(($row ['outTemp'])-32)*5/9);
        }
echo json_encode($rows);
mysql_close();
?>


which generate this result
Code: Select all
[{"date":1323199800000,"temperature":5.5000011111111},{"date":1323200100000,"temperature":5.4444438888889},{"date":1323200400000,"temperature":5.2777777777778},{"date":1323200700000,"temperature":5.2222233333333},{"date":1323201000000,"temperature":5.1666661111111},{"date":1323201300000,"temperature":5.1666661111111},{"date":1323201600000,"temperature":5.0555544444444},{"date":1323201900000,"temperature":5.0555544444444},{"date":1323202200000,"temperature":5.2777777777778},{"date":1323202500000,"temperature":5.5000011111111},{"date":1323202800000,"temperature":5.4444438888889},{"date":1323203100000,"temperature":5.1111116666667},{"date":1323203400000,"temperature":4.7777766666667},{"date":1323203700000,"temperature":4.6666677777778},{"date":1323204000000,"temperature":4.6666677777778},{"date":1323204300000,"temperature":4.6111105555556},{"date":1323204600000,"temperature":4.5555561111111},{"date":1323204900000,"temperature":4.5555561111111},{"date":1323205200000,"temperature":4.6666677777778},{"date":1323205500000,"temperature":4.7222222222222}]


temperature have an interval of 5 minutes

I tried to put togheter some code for the chart

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title></title>

<script type="text/javascript" src="../file_comuni/javascript/jquery/jquery-1.7.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/highcharts.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/themes/gray.js"></script>

<script type="text/javascript">

   /**
* Request data from the server, add it to the graph and set a timeout to request again
*/
jQuery.ajax({
  url: 'new_file.php',
  dataType: "json",
  type: 'POST',
  data: "{}",
  contentType: "application/json; charset=utf-8",
  success: function (data) {
       var lines = data.split('\n');
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            var data = {};
            $.each(items, function(itemNo, item) {
                if (itemNo === 0) {
                    data.name = item;
                } else {
                    data.y = parseFloat(item);
                }
            });
            options.series[0].data.push(data);
        });


  },
  cache: false
  });

var chartData = data.rows;


var seriesData = [];
for (var i = 0; i < chartData.length; i++)
{
    var x = new Date(chartData[i].Date).getTime();
    var y = chartData[i].Value;
    seriesData.push([x, y]);
}



var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'line'
    },

    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: seriesData       
    }]
});

    // Create the chart
    var chart = new Highcharts.Chart(options);

</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
               
</body>
</html>


Is useless to say that the result is not what I hope :oops:

Regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby haiku » Wed Feb 22, 2012 9:15 am

Hi,
Your Json should output
Code: Select all
[{"name":"temperature","type":"areaspline","data":[[1327213807000,0],[1327214100000,0],[1327214403000,0],[1327214700000,0],[1327215000000,24],[1327215301000,59.8],[1327215603000,95.4],[1327215901000,120.8],[1327216202000,131.6]]}]

Then feed your serie with
Code: Select all
$.getJSON('feed.php', function(data)
{
options.series = data;
chart = new Highcharts.Chart(options);
});
haiku
 
Posts: 135
Joined: Tue Jul 26, 2011 10:22 am
Top

Re: How Highchart read Json file?

Postby ugo1 » Wed Feb 22, 2012 10:47 pm

Hi

I tried to put value in text file the value you wrote but firefox still display a blank page

my web structure is

Code: Select all
root
  prova
    data1.csv
    index1.php
  file_comuni
     javascript
        highchart


data1.csv contain
Code: Select all
[{"name":"temperature","type":"areaspline","data":[[1327213807000,0],[1327214100000,0],[1327214403000,0],[1327214700000,0],[1327215000000,24],[1327215301000,59.8],[1327215603000,95.4],[1327215901000,120.8],[1327216202000,131.6]]}]


index1.php contain
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title></title>

<script type="text/javascript" src="../file_comuni/javascript/jquery/jquery-1.7.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/highcharts.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/themes/gray.js"></script>

<script type="text/javascript">
   /**
* Request data from the server, add it to the graph and set a timeout to request again
*/
$.getJSON('data1.csv', function(data)
{
options.series = data;
chart = new Highcharts.Chart(options);
});

    // Create the chart
   

</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
               
</body>
</html>



Questions
what is the use of : "name":"temperature","type":"areaspline","data" ?

if i'm correct json formats are two:

//objects:
{key:value, key:value, key:value}

which is the one i make and

//arrays:
[value, value, value]

which is the one highcharts needs?

Regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby RSud » Thu Feb 23, 2012 11:07 am

Code: Select all
[{"name":"temperature","type":"areaspline","data":[[1327213807000,0],[1327214100000,0],[1327214403000,0],[1327214700000,0],[1327215000000,24],[1327215301000,59.8],[1327215603000,95.4],[1327215901000,120.8],[1327216202000,131.6]]}]


The above mentioned JSON is a representation of an entire serie for Highcharts. That means that once you have parsed this from JSON into a JS variable, all you have to do to add this serie is :
Code: Select all
chart_variable.series.push(<variable name>)


However, if you use the
Code: Select all
[{1323199800000,5.5000011111111},{1323200100000,5.4444438888889}]
format, you will need to do the following to get it to work

Code: Select all
chart_variable.series[<serie number>].data = <variable name>


Hope that clarifies things for you.

However, if you are comfortable using PHP, I would highly recommend using the PHP wrapper classes for creating highcharts Highroller mentioned here(highcharts.com). The advantage of using wrapper classes is that you don't need to worry about the exact syntax required by Javascript, as that part of the translation is handled by the wrapper itself.
RSud
 
Posts: 10
Joined: Fri Dec 02, 2011 12:25 pm
Top

Re: How Highchart read Json file?

Postby ugo1 » Fri Feb 24, 2012 12:59 am

Hi,

get the results I want

using this code found on stack overflow

Code: Select all
var chart;

    function requestData() {
        $.getJSON('new_file.php',
            function (data) {
                var series = chart.series[0];
                series.setData(data);
            }
        );
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                marginRight: 130,
                marginBottom: 25,
                events: { load: requestData }
            },
            title: {
                text: 'First 20 temperature from my Davis Vantage Pro 2',
                x: -20 //center
            },
           
            xAxis: {
               type: 'datetime',
               
               
            },
            yAxis: {
                title: {
                text: 'Temperature °C'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
               
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y;
            }
        },
       
            series: [{
                name: 'Temperature',
                data: []
            }]
        });
    });
   

</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
               
</body>
</html>


here the new_file.php result

Code: Select all
[[1323199800000,5.5000011111111],[1323200100000,5.4444438888889],[1323200400000,5.2777777777778],[1323200700000,5.2222233333333],[1323201000000,5.1666661111111],[1323201300000,5.1666661111111],[1323201600000,5.0555544444444],[1323201900000,5.0555544444444],[1323202200000,5.2777777777778],[1323202500000,5.5000011111111],[1323202800000,5.4444438888889],[1323203100000,5.1111116666667],[1323203400000,4.7777766666667],[1323203700000,4.6666677777778],[1323204000000,4.6666677777778],[1323204300000,4.6111105555556],[1323204600000,4.5555561111111],[1323204900000,4.5555561111111],[1323205200000,4.6666677777778],[1323205500000,4.7222222222222]]


last question:
is possible to add a second /third series using this code (clearly the x axis must have the same value)?

regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby Fusher » Fri Feb 24, 2012 5:28 pm

Yes, use chart.addSeries():
Code: Select all
var series = {data:yourDataFromPHP}; // yourDataFromPHP with format [[x,y],[x1,y1],[x2,y3]]
     chart.addSeries(series);
Paweł Fus
Highcharts support team
Fusher
 
Posts: 3758
Joined: Mon Jan 30, 2012 12:16 pm
Top

Re: How Highchart read Json file?

Postby ugo1 » Mon Feb 27, 2012 1:41 am

hi,

I found how make the json file

[[[1323199800000,5.5000011111111],[1323200100000,5.4444438888889],[1323200400000,5.2777777777778],[1323200700000,5.2222233333333],[1323201000000,5.1666661111111],[1323201300000,5.1666661111111],[1323201600000,5.0555544444444],[1323201900000,5.0555544444444],[1323202200000,5.2777777777778],[1323202500000,5.5000011111111],[1323202800000,5.4444438888889],[1323203100000,5.1111116666667],[1323203400000,4.7777766666667],[1323203700000,4.6666677777778],[1323204000000,4.6666677777778],[1323204300000,4.6111105555556],[1323204600000,4.5555561111111],[1323204900000,4.5555561111111],[1323205200000,4.6666677777778],[1323205500000,4.7222222222222]],[[1323199800000,30.014],[1323200100000,30.014],[1323200400000,30.014],[1323200700000,30.014999],[1323201000000,30.014],[1323201300000,30.011999],[1323201600000,30.016001],[1323201900000,30.014],[1323202200000,30.011999],[1323202500000,30.014999],[1323202800000,30.014999],[1323203100000,30.013],[1323203400000,30.011999],[1323203700000,30.011],[1323204000000,30.01],[1323204300000,30.009001],[1323204600000,30.007999],[1323204900000,30.011],[1323205200000,30.007999],[1323205500000,30.009001]]]

I also tried to add the new serie
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title></title>

<script type="text/javascript" src="../file_comuni/javascript/jquery/jquery-1.7.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/highcharts.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/themes/gray.js"></script>

<script type="text/javascript">
   /**
* Request data from the server, add it to the graph and set a timeout to request again
*/
   var chart;

    function requestData() {
        $.getJSON('new_file.php',
            function (data) {
                var series = chart.series[0];
                series.setData(data);
            }
        );
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                marginRight: 130,
                marginBottom: 25,
                events: { load: requestData }
            },
            title: {
                text: 'First 20 temperature from my Davis Vantage Pro 2',
                x: -20 //center
            },
           
            xAxis: {
               type: 'datetime',
               
               
            },
            yAxis: {
                title: {
                text: 'Temperature °C'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
               
                return '<b>'+ this.series.name +'</b><br/>'+
                Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
                this.y;
            }
        },
       
            series: [{
                name: 'Temperature',
                data: []
            }]
        });
       
        chart.addSeries({
             name: 'pressure',
              data: [],
           
        });
    });
   

</script>



</head>
<body>

<div id="container" style="width: 1000px; height: 400px; margin: 0 auto"></div>
               
</body>
</html>


but I get displyed only the first serie

any hint'

Regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby RSud » Mon Feb 27, 2012 7:00 am

Hi Ugo,
At the top of the HTML page, I see the below mentioned script
Code: Select all
    function requestData() {
        $.getJSON('new_file.php',
            function (data) {
                var series = chart.series[0];
                series.setData(data);
            }
        );
    }


First off, this script is outside the $(document).ready(function() { ... }); and above the actual creation of the Highchart. Therefore, I'm surprised you even get a serie in place. To fix this, you should put this call inside the $(document).ready(function() { ... }); and below the declaration for the chart

Secondly, 'chart.series[0]' refers to the first serie in the chart, and you seem to be populating data only for this serie. That is probaby why you get data populated in only the first serie in your chart, and not in the second one. Please change your code appropriately, and you should get the second serie to show as well..
RSud
 
Posts: 10
Joined: Fri Dec 02, 2011 12:25 pm
Top

Re: How Highchart read Json file?

Postby ugo1 » Mon Feb 27, 2012 8:41 pm

Hi,

i cleaned the code

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title></title>

<script type="text/javascript" src="../file_comuni/javascript/jquery/jquery-1.7.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/highcharts.js"></script>
<script type="text/javascript" src="../file_comuni/javascript/highchart/js/themes/gray.js"></script>

<script type="text/javascript">
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
 
   
   
  $(document).ready(function() {
    var options = {
      chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline',
        marginRight: 130,
        marginBottom: 25,
        events: { load: requestData }
      },

      title: {
        text: 'First 20 temperature from my Davis Vantage Pro 2'
      },
     
      xAxis: {
          type: 'datetime'
      },
     
      yAxis: {
        text: 'Temperature °C'
      },

      tooltip: {
        formatter: function() {
        return '<b>'+ this.series.name +'</b><br/>'+
        Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
        this.y;
        }
      },

      series: []
    };

    function requestData() {
      $.getJSON('new_file1.php', function (data) {
          var series = chart.series[0];
          series.setData(data);
          }
      );
    },

    // Create the chart
    var chart = new Highcharts.Chart(options);

  });

</script>



</head>
<body>

<div id="container" style="width: 1000px; height: 400px; margin: 0 auto"></div>
               
</body>
</html>


useless to say that I get a blank page...

Doesn't exit a full tutorial on how use highchart and json for rookies?

regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby Fusher » Tue Feb 28, 2012 1:14 pm

http://www.highcharts.com/documentation ... processing - but there's no JSON example. But in the fact processing JSON/XML/CSV/other is not problem with Highcharts. Highcharts gets always the same data for chart series - array/array of arrays/object. You can search forum for JSON examples. Also your code has errors (in console). (Line 60 - additionally coma)

I create example for processing your data from JSON: http://highcharts.com/jsbin/awelen/edit
If you need more options check this: http://www.highcharts.com/ref/#series (setting name for series etc.) or http://www.highcharts.com/ref/#plotOptions-series (allowing point selection etc.)
Paweł Fus
Highcharts support team
Fusher
 
Posts: 3758
Joined: Mon Jan 30, 2012 12:16 pm
Top

Re: How Highchart read Json file?

Postby ugo1 » Thu Mar 01, 2012 12:56 am

Hi,


I'm completaly out with jquery is possibile to have a json working code?

Regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top

Re: How Highchart read Json file?

Postby torstein.honsi » Thu Mar 01, 2012 11:15 am

Fusher's right, loading JSON is a matter of using jQuery, not Highcharts.

The Highstock demo page is full of examples: http://highcharts.com/stock/demo/. The same approach applies to Highcharts.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9150
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway
Top

Re: How Highchart read Json file?

Postby ugo1 » Wed Mar 07, 2012 12:46 am

Hi

1) - Fusher road seem complitely different form torstein.honsi road. :? :?

2) - people who develop javascript must provide a starting base where the user can start as in Highslide here is all missing because in Highschart there is NO univoque example to JSON use and the 700+ topic explain that

3) - usaully people who use javascript is the one that is not able to make a full program because their knowledge is little so they need a reliable working base

4) I don't think that the "working code" is a FBI secret so I think you are jealous for your code. My self give away Ncl script to people who ask me (generally are 200 rows code for each script) with no problem...

So my request is: is possible to have a full working code with Json data input where I can add from 1 to "n" series one chart?

I'm pretty sure that most of new user in future will appreciate this effort

Regards

Ugo
ugo1
 
Posts: 21
Joined: Sat Feb 11, 2012 8:56 pm
Top
Next
Post a reply

Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 10 guests

Powered by phpBB® Forum Software © phpBB Group