samela.lorenzo
Posts: 5
Joined: Mon Jan 17, 2022 8:49 am

Help with ajax call from an .php JSON data file for display it on the chart

Hi, we are two students that have to load on a highcharts chart some x and y data taken from a .php file that contains the data in JSON format, but after making the AJAX call we do not know how to recall the data on the chart, we have seen a lot of guides but, we can't find anything, if you can help us we will be glad.


I didn't know how to put in there the code format , because it gave me error, so I put the php in the css window in this link:

https://jsfiddle.net/jw8p6fdn /
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Help with ajax call from an .php JSON data file for display it on the chart

Hi samela.lorenzo,

Welcome to our forum and thanks for contacting us with your question!

The fiddle returns 404 error and seems to be broken. Please take a look at it and try to fix. I will also need a sample of your data to show you how to parse it and how to create a chart, JSON format is fine. I need you to provide me with some more details, for example, which series would you like to use. Usually when there are problems with creating a chart, the cause is an incorrect data format. You should always make sure that your data fits format specified in our API.
Example: https://api.highcharts.com/highcharts/s ... olumn.data

Feel free to ask any questions.
Regards!
Mateusz Bernacik
Highcharts Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Help with ajax call from an .php JSON data file for display it on the chart

Hi samela.lorenzo,

Thanks for the demo. As I said before, all you need to do is parse your data to fit format of chosen series and then you can pass it directly to chart config or update your already created chart. Additionally, because your x values are in time stamp format, you want to use xAxis with datetime type.
Demo: https://jsfiddle.net/BlackLabel/xawd1yrs/

Let me know if that was what you were looking for and feel free to ask any further questions.

Regards!
Mateusz Bernacik
Highcharts Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Help with ajax call from an .php JSON data file for display it on the chart

Exactly! Is there anything else that I can help with?
Mateusz Bernacik
Highcharts Developer
samela.lorenzo
Posts: 5
Joined: Mon Jan 17, 2022 8:49 am

Re: Help with ajax call from an .php JSON data file for display it on the chart

Now we need to do these 2 points, if you can at least give us a base, we will appreciate it, let us know if you can / you want to do it:

2.2 Step 2
Create a toolbar to allow the user to:
-choose a start date and an end date for the period in which to request data
-choose which device to perform the analysis on

These additional parameters must be passed to the PHP script from the previous point as parameters:
•unixStart
•unixStop
•device: SSE.plant.subsystem.section.device

To populate the list of available devices make a request to the URL:http://192.168.80.10/Stage/getDevices.phpTo view the list of devices in the toolbar use a plugin called select2Add a spinner during the waiting times to populate the list of available devices and to load data on thegraphic

2.3 Step 3
•Add a button to the toolbar so that you can export the data displayed on the chart to a CSV file.
•Add a button to the toolbar so that you can export the chart to PNG
•Add a button in the toolbar so that you can disable the chart tooltip
•Add the possibility by clicking on the name of the series to modify some of its parameters such as:or series typeo Color of the serieso Line thicknesso Enabling / disabling of single point markers


Yes of course we don't have the php get devices yet, it would be nice if you want to create the toolbar for now or something like that
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Help with ajax call from an .php JSON data file for display it on the chart

With some of these questions I can't really help. On this forum we provide support strictly related to Highcharts and with everything that goes beyond that scope (PHP, custom toolbar, making requests to DB etc.) you need to try somewhere else, for example Stack Overflow.

To show a specific period you don't necessary have to make a requiest like that. You can still fetch full range of your data and use Highcharts range selector or date picker to allow user to choose date range.
Demo: https://www.highcharts.com/demo/stock/basic-line

These tools use setExtremes method under the hood, which can be called programatically and can be really helpful if you want to implement your custom date selector.

When it comes to 2.3, export to CSV and PNG is a part of export module, which is imported in the demo. More about export module and available options you can read here: https://www.highcharts.com/docs/export- ... e-overview

Tooltip and series options can be changed with update() method.

Feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”