JSON and Charting

DrJohnZoidberg · Aug 11, 2016

Highcharts ftw!

For date and time functions I'd highly suggest looking at Moment.js.

For some reference material, I used a lot of Highcharts stuff here:

https://github.com/drzoidberg33/plexpy/blob/master/data/interfaces/default/js/graphs/plays_by_day.js (params and formatting)

https://github.com/drzoidberg33/plexpy/blob/master/data/interfaces/default/graphs.html#L350 (implementation)

_kabal_ · Aug 11, 2016

Javascript:

PHP:

var price = [
            {
                "dateTime": "2016-08-10T21:00:00Z",
                "value": 13.2946
            },
            {
                "dateTime": "2016-08-10T21:05:00Z",
                "value": 13.2947
            },
            {
                "dateTime": "2016-08-10T21:10:00Z",
                "value": 13.2959
            },
            {
                "dateTime": "2016-08-10T21:15:00Z",
                "value": 13.2989
            },
            {
                "dateTime": "2016-08-10T23:00:00Z",
                "value": 13.3006
            }

        ]

var formattedData = price.map(function(item) {
   return [Date.parse(item.dateTime), item.value];
});

console.log(JSON.stringify(formattedData));

//output
[[1470862800000,13.2946],[1470863100000,13.2947],[1470863400000,13.2959],[1470863700000,13.2989],[1470870000000,13.3006]]

Thor · Aug 11, 2016

_kabal_ said:
you can just do the following in javascript

PHP:

let numberOfMilliseconds = Date.parse("2014-12-12 14:18:00");

This is the same as doing

PHP:

let numberOfMilliseconds = Date.UTC(2014, 12, 12, 14, 18);

I need the output to be "Date.UTC(2014, 12, 12)"

Thor · Aug 11, 2016

_kabal_ said:

Javascript:

PHP:

var price = [
            {
                "dateTime": "2016-08-10T21:00:00Z",
                "value": 13.2946
            },
            {
                "dateTime": "2016-08-10T21:05:00Z",
                "value": 13.2947
            },
            {
                "dateTime": "2016-08-10T21:10:00Z",
                "value": 13.2959
            },
            {
                "dateTime": "2016-08-10T21:15:00Z",
                "value": 13.2989
            },
            {
                "dateTime": "2016-08-10T23:00:00Z",
                "value": 13.3006
            }

        ]

var formattedData = price.map(function(item) {
   return [Date.parse(item.dateTime), item.value];
});

console.log(JSON.stringify(formattedData));

//output
[[1470862800000,13.2946],[1470863100000,13.2947],[1470863400000,13.2959],[1470863700000,13.2989],[1470870000000,13.3006]]

the output need to be ?([
[Date.UTC(2013,5,2),0.7695],
[Date.UTC(2013,5,3),0.7648],
[Date.UTC(2013,5,4),0.7645],
[Date.UTC(2013,5,5),0.7638]
])

_kabal_ · Aug 11, 2016

no it doesnt.

PHP:

console.log(Date.UTC(2014, 12, 12, 14, 18));

is exactly the same thing as

PHP:

console.log(1421072280000);

If you had to pass and instance of a function to ChartJS, you would pass `Data.UTC`, and not the results of the function call `Data.UTC` which happens when you add the parenthesis;

I would suggest reading the document of `Date`

ChartJS needs whatever data you give it.

You can pass the following to ChartJS as Data

PHP:

data = [
   ["dogs", 23],
   ["cats", 15],
   ["mice", 40]
];

Assuming you are drawing a single series bar graph (the graph type doesnt matter really)

that would output a bar chart with 3 bars dogs, cats, mice, with Y values 23, 15, 40

that code is identical to

PHP:

data = [
   [getName("dogs"), 23],
   [getName("cats"), 15],
   [getName("mice"), 40]
];

function getName(name) {
   return name;
}

Thor · Aug 11, 2016

_kabal_ said:
no it doesnt.

PHP:

console.log(Date.UTC(2014, 12, 12, 14, 18));

is exactly the same thing as

PHP:

console.log(1421072280000);

If you had to pass and instance of a function to ChartJS, you would pass `Data.UTC`, and not the results of the function call `Data.UTC` which happens when you add the parenthesis;

I would suggest reading the document of `Date`

ChartJS needs whatever data you give it.

You can pass the following to ChartJS as Data

PHP:

data = [ ["dogs", 23], ["cats", 15], ["mice", 40] ];

Assuming you are drawing a single series bar graph (the graph type doesnt matter really)

that would output a bar chart with 3 bars dogs, cats, mice, with Y values 23, 15, 40

that code is identical to

PHP:

data = [ [getName("dogs"), 23], [getName("cats"), 15], [getName("mice"), 40] ]; function getName(name) { return name; }

https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?

_kabal_ · Aug 11, 2016

yes that is jsonp.

read up on that.

with a jsonp response, it actually execute the code in the response.

thats why it says "callback=?"

what happens is that it runs the function ?, which you can see is inside the response

why not just do the following? there is no need to do this with JSONp. I have done 100's of Highcharts, and never used that method

http://www.highcharts.com/demo/line-basic

and I will say it again

PHP:

?([
[Date.UTC(2013,5,2),0.7695]
])

is IDENTICAL to

PHP:

?([
[1370131200000,0.7695]
])

Thor · Aug 11, 2016

_kabal_ said:
yes that is jsonp.

read up on that.

with a jsonp response, it actually execute the code in the response.

thats why it says "callback=?"

what happens is that it runs the function ?, which you can see is inside the response

why not just do the following? there is no need to do this with JSONp. I have done 100's of Highcharts, and never used that method

http://www.highcharts.com/demo/line-basic

Did not know that!! Thank you!

Boy I have a long way to go.

right this is the chart I want -> http://www.highcharts.com/demo/line-time-series

This is the data I have via the API:

Code:

	"priceTimeSeries": [
		{
			"id": "USD32244ZAR332",
			"dateTimeRanges": {
				"start": "2016-08-10T21:00:00Z",
				"end": "2016-08-11T20:59:00Z"
			},
			"price": [
				{
					"dateTime": "2016-08-10T21:00:00Z",
					"value": 13.2946
				},
				{
					"dateTime": "2016-08-10T21:05:00Z",
					"value": 13.2947
				},
				{
					"dateTime": "2016-08-10T21:10:00Z",
					"value": 13.2959
				},
				{
					"dateTime": "2016-08-10T21:15:00Z",
					"value": 13.2989
				},
				{
					"dateTime": "2016-08-10T21:20:00Z",
					"value": 13.2976
				},
				{
					"dateTime": "2016-08-10T21:25:00Z",
					"value": 13.2976
				},
				{
					"dateTime": "2016-08-10T21:30:00Z",
					"value": 13.2915
				},
],

I want to make this work with this graph -> http://www.highcharts.com/demo/line-time-series

_kabal_ · Aug 11, 2016

PHP:

var apiResponse = {"priceTimeSeries": [
		{
			"id": "USD32244ZAR332",
			"dateTimeRanges": {
				"start": "2016-08-10T21:00:00Z",
				"end": "2016-08-11T20:59:00Z"
			},
			"price": [
				{
					"dateTime": "2016-08-10T21:00:00Z",
					"value": 13.2946
				},
				{
					"dateTime": "2016-08-10T21:05:00Z",
					"value": 13.2947
				},
				{
					"dateTime": "2016-08-10T21:10:00Z",
					"value": 13.2959
				},
				{
					"dateTime": "2016-08-10T21:15:00Z",
					"value": 13.2989
				},
				{
					"dateTime": "2016-08-10T21:20:00Z",
					"value": 13.2976
				},
				{
					"dateTime": "2016-08-10T21:25:00Z",
					"value": 13.2976
				},
				{
					"dateTime": "2016-08-10T21:30:00Z",
					"value": 13.2915
				},
]};

var chartData= apiReponse.priceTimeSeries[0].price.map(function(item) {
   return [Date.parse(item.dateTime), item.value];
});


$('#container').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'USD to EUR exchange rate over time'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Exchange rate'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'USD to EUR',
                data: chartData
            }]
        });

something like that

Thor · Aug 11, 2016

_kabal_ said:

PHP:

var apiResponse = {"priceTimeSeries": [
		{
			"id": "USD32244ZAR332",
			"dateTimeRanges": {
				"start": "2016-08-10T21:00:00Z",
				"end": "2016-08-11T20:59:00Z"
			},
			"price": [
				{
					"dateTime": "2016-08-10T21:00:00Z",
					"value": 13.2946
				},
				{
					"dateTime": "2016-08-10T21:05:00Z",
					"value": 13.2947
				},
				{
					"dateTime": "2016-08-10T21:10:00Z",
					"value": 13.2959
				},
				{
					"dateTime": "2016-08-10T21:15:00Z",
					"value": 13.2989
				},
				{
					"dateTime": "2016-08-10T21:20:00Z",
					"value": 13.2976
				},
				{
					"dateTime": "2016-08-10T21:25:00Z",
					"value": 13.2976
				},
				{
					"dateTime": "2016-08-10T21:30:00Z",
					"value": 13.2915
				},
]};

var chartData= apiReponse.priceTimeSeries[0].price.map(function(item) {
   return [Date.parse(item.dateTime), item.value];
});


$('#container').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'USD to EUR exchange rate over time'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Exchange rate'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'USD to EUR',
                data: chartData
            }]
        });

something like that

does not work in JSFiddle
(http://jsfiddle.net/gh/get/jquery/1...ter/samples/highcharts/demo/line-time-series/)
and brings me back to my other post.

How do I place the price array in a variable in order to store it in the DB

I pull the data in from JSON api via php I want to store it in a db and then send it to the user view in the chart from the DB.

I can't seem to grasp how to store and array.

_kabal_ · Aug 11, 2016

there was a typo, you could have picked that up yourself with a chrome dev tools console inspection

http://jsfiddle.net/n6wne5sw/

havent you solved saving the data to the DB already in your other thread?

Thor · Aug 11, 2016

_kabal_ said:
there was a typo, you could have picked that up yourself with a chrome dev tools console inspection

http://jsfiddle.net/n6wne5sw/

havent you solved saving the data to the DB already in your other thread?

holy shiat _kabal!! ... Thank thee.

Okey wait give me a moment to go read up what you actually did here. Lots of concepts to grasp I am in the deep with this learning scenario of mine.

----

I still need to figure out how to save it to the DB since I want to end up doing this:

PHP:

var apiResponse = {"price": [<?php echo $price_array; ?>]};

rward · Aug 11, 2016

Thor187 said:
All good, we made progress I got this sorted now.

What I am trying to do now is figuring out how to save an array in php?

Repeat after me:

I will start to Read The Documentation!!!
I will start to Read The Documentation!!!
I will start to Read The Documentation!!!
I will start to Read The Documentation!!!

http://php.net/ , type "array" into the search and click the top one - How to create arrays.

http://php.net/manual/en/funcref.php

Skim through all of that to get an idea of where your first 'port of call' should be for in case there is no one else around to ask ..

Thor · Aug 11, 2016

@rward

"http://php.net/ , type "array" into the search and click the top one - How to create arrays."

But I do not want to create and array, I want to save one.

I hope there is a difference otherwise, egg on my face.

Thor · Aug 11, 2016

Oh god.
So JSON is just text?! Like a long string without anything really

I am suppose to decide how I want to encode the string by PHP's versions of the things that can be encoded. for instance I decide what I want out of the string ie:

scalars: strings, ints, floats, and bools
nulls (a special type of its own)
compound types: objects and arrays.

OMG my brain. although I understand now I think.

So I will use php to extract price->datetime and price->value

and then still in the loop I use $datetime and $value to build and array in $price?

no I am rambling, I don't think I understand it yet.

rward · Aug 11, 2016

Thor187 said:
@rward

"http://php.net/ , type "array" into the search and click the top one - How to create arrays."

But I do not want to create and array, I want to save one.

I hope there is a difference otherwise, egg on my face.

That's there the READ THE DOCUMENTATION part come into it.
If you did what I typed above and then botherd to browse around for a bit you would have very easily discovered http://php.net/manual/en/ref.array.php
From there you can read the descriptions next to all the functions and find:
array_push — Push one or more elements onto the end of array

Then you need to insert that into a database.. hmm .. maybe type "mysql" into the search and see what that brings back..

You keep asking for fish instead of learning HOW to fish.

Thor · Aug 11, 2016

rward said:
That's there the READ THE DOCUMENTATION part come into it.
If you did what I typed above and then botherd to browse around for a bit you would have very easily discovered http://php.net/manual/en/ref.array.php
From there you can read the descriptions next to all the functions and find:
array_push — Push one or more elements onto the end of array

Then you need to insert that into a database.. hmm .. maybe type "mysql" into the search and see what that brings back..

You keep asking for fish instead of learning HOW to fish.

I went through http://php.net/manual/en/function.array.php

Was on the phone so did not realize there is a link on the right hand side.

THIS -> http://php.net/manual/en/ref.array.php helps a lot although I can't see how array_push is what I need since I want to get the contents of an existing array?

Thank you so much regardless

My brain hurt so much I am doing silly stuff

PHP:

$currency_history = array($json->priceTimeSeries->price);

$currency_history = $json->priceTimeSeries->price[];

$currency_history = $json->priceTimeSeries[price];

$currency_history = $json->priceTimeSeries->price->array[];

$currency_history = $json->priceTimeSeries->price->array[dateTime,value];

$currency_history = $json->priceTimeSeries->price->array["dateTime","value"];

[)roi(] · Aug 11, 2016

_kabal_ said:

Javascript:

PHP:

var price = [
            {
                "dateTime": "2016-08-10T21:00:00Z",
                "value": 13.2946
            },
            {
                "dateTime": "2016-08-10T21:05:00Z",
                "value": 13.2947
            },
            {
                "dateTime": "2016-08-10T21:10:00Z",
                "value": 13.2959
            },
            {
                "dateTime": "2016-08-10T21:15:00Z",
                "value": 13.2989
            },
            {
                "dateTime": "2016-08-10T23:00:00Z",
                "value": 13.3006
            }

        ]

var formattedData = price.map(function(item) {
   return [Date.parse(item.dateTime), item.value];
});

console.log(JSON.stringify(formattedData));

//output
[[1470862800000,13.2946],[1470863100000,13.2947],[1470863400000,13.2959],[1470863700000,13.2989],[1470870000000,13.3006]]

Higher order functions to the rescue...

Necropolis · Aug 11, 2016

Thor187 said:
Oh god.
So JSON is just text?! Like a long string without anything really

Yes.

What did you think it was?

DA-LION-619 · Aug 11, 2016

This thread just went gold.

JSON and Charting

Honorary Master

Executive Member

Honorary Master

Honorary Master

Executive Member

Honorary Master

Executive Member

Honorary Master

Executive Member

Honorary Master

Executive Member

Honorary Master

Senior Member

Honorary Master

Honorary Master

Senior Member

Honorary Master

Executive Member

Executive Member

Honorary Master