We Keep Coding

Sort JSON by names and not values

I'm running a query in java to get the quantity of calls in a time interval, the result of this query is:
Date(dd/mm/yyyy) | calls
_____________________|___________
17/05/18 | 30
16/05/18 | 36
10/05/18 | 14
27/04/18 | 12
26/04/18 | 90
But when I plot the result using chart js, data is displayed in the order as belows
Date(dd/mm/yyyy) | calls
_____________________|___________
10/05/18 | 14
26/04/18 | 90
27/04/18 | 12
16/05/18 | 36
17/05/18 | 30
¿How do I sort this JSON by date using javascript?
{2018-05-10: "14", 2018-04-26: "90", 2018-04-27: "12", 2018-05-16: "36", 2018-05-17: "30"}

First of all, your JSON is not valid. Those property names (the dates) must be quoted as strings for it to be valid.
Now, the best way to approach this is to actually change the JSON you're producing to an array:
data = [
{ "date": "2018-05-10", "hits": "14" },
{ "date": "2018-04-26", "hits": "90" },
// etc
];
If you produce this on the server, which should be easy to change, then processing it in the client should be a lot easier. In fact, if you can format your dates on the server as YYYY-MM-DD then, given the above, Chart.js should automatically understand it as a date and you can simply map it to the x axis with something like...
let data = ... // The array above
let chartData = data.map(function(p) {
return { x: p.date, y: p.hits };
});
var chart = new Chart(ctx, {
type: '...',
data: chartData,
// etc
});
If for whatever reason you cannot change the format of the JSON produced (but, of course, you still quote the dates to make the JSON valid), then you could try something like this:
let data = ... // Your JSON corrected to be valid
let chartData = Object.keys(data).map(function(k) {
let date = k.split('/').reverse().join('-');
return { x: date, y: data[k] };
});
var chart = new Chart({
type: '...',
data: chartData,
// etc
});

Highstock - Pulling data from JSON file

I understand there are many similar questions related to this topic on SO however, I was unsuccessful at implementing what I am trying to do so I am writing a question here. Please understand that I am very new.
So, basically, using the Highstock - the basic graph which can be found here http://www.highcharts.com/stock/demo/basic-line, I want to import the data from an JSON file named Json1.json. How would I do this? http://jsfiddle.net/x0g8hL0e/1/
In the JavaScript, I have written
$(function () {
$.getJSON('Json1.json', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Pressure'
},
});
});
});
Also, is it possible to just see the 24 hour format instead of a year-long?
P.S, Json data is formatted in this way
[
{"Pressure": 1},
{"Pressure": 5},
{"Pressure": 3},
{"Pressure": 2},
{"Pressure": 4}
}]

You should process your data, so it will be in a format that is accepted by Highcharts. It can be (as described in API reference):
An array of numerical values.
An array of arrays with 2 values.
An array of objects with named values.
Other option is to use an array with keys defined.
If you want to use e.g. 1st data fromat, then you could go through your JSON and create an array of numerical values with values taken out of each object, from Pressure property.
$(function () {
//$.getJSON('Json1.json', function (data) {
// simulate JSON data
var data = [{
"Pressure": 1
}, {
"Pressure": 5
}, {
"Pressure": 3
}, {
"Pressure": 2
}, {
"Pressure": 4
}],
processedData = [];
// process the data to match one of formats required by Highcharts - an array of numberical values
// see: http://api.highcharts.com/highstock#series<line>.data
Highcharts.each(data, function(d) {
processedData.push(d.Pressure);
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'Pressure'
},
series: [{
data: processedData
}]
});
//});
});
JSFiddle
For basic information about Highcharts you could see General Documentation

Converting JS array UNIX date integers into JS Date objects

Is there a way to convert UNIX epoch integers (1402079444, etc) in an array into JavaScript Date objects (Date.UTC(2014, 9, 14), etc) using jQuery?
I'm trying to pass a large JSON array generated by PHP to Highmaps.JS, which almost works great however Highmaps expects a Date object and Date objects aren't valid JSON, so I can't generate them with PHP.
jsFiddle of my current setup here: http://jsfiddle.net/dwgLtscm/2/
(The x-axis isn't displaying dates properly because the data isn't in the proper date format).
[{
"name": "Dissolved Oxygen",
"data": [
[1402079444,9]
]
},
{
"name": "Temperature (Water)",
"data": [
[1401291099,9],
[1401862547,12]
]
},
{
"name": "Temperature (Air)",
"data": [
[1401291099,13],
[1401862547,19]
]
},
]

Given the Json object above, I'd try:
array.forEach(function (val) {
val.data = val.data.map(function (datum) {
return [ new Date(datum[0] * 1000), datum[1] ];
}
}
Unless I'm reading it wrong (I'm assuming data[0] is the UTC value).
(Edited based on feedback below, thanks all!)

Data Structure for "Date" based data

NOTE: Language i am using is Javascript
I have a an array of objects. Each object has three properties: year, date, title.
For example:
[
{
year: 2013, date: "23/10/2013", title: "Title1"
},
{
year: 2012, date: "4/2/2012", title: "Title2"
}
]
I need to make an efficient data structure from this array such that:
All objects with same year are grouped together, and groups are sorted on the basis of "year"
All objects with same date and title are grouped together. Objects with different dates are sorted.
The data structure should be efficient for reading and traversing (i need to present them in some sort of timeline).

So, you probably want something like this:
var objects = {
"2012":{
"4/2/2012":{
"title1":[
//array of objects
],
"title2":[
//array of objects
],
// etc
},
"5/9/2012":[
"title3":[/*objects*/],
],
},
"2013":{
// etc
}
}
Then you can just access the array of objects them like this:
objects["2012"]["5/9/2012"]["title1"]
So:
objects["year"]["date"]["title"];

Plot the json array using jquery flot

var data =[ { label: "Foo", data: [ ["2012-09-01", 1], ["2012-10-01", -14], ["2012-11-01", 5] ] },
{ label: "Bar", data: [ ["2012-09-01", 13], ["2012-10-01", 11], ["2012-11-01", -7] ] }
];
var options = {
series: {
lines: { show: true },
points: { show: true }
}
};
<div id="placeholder"></div>
<script>
$.plot($('#placeholder'), data, options);
</script>
I am confused why the graph is not getting plotted with the data. Ignore my novice knowledge on flot. Can anyone give me an idea how i should be able to do it.

Are you sure flot can handle values formatted as strings? You should probably convert the strings to real dates or milliseconds...
You can use the moment.js library:
var data =[ { label: "Foo", data: [ [moment("2012-09-01","YYYY-MM-DD").toDate(), 1], ...

Flot does not automatically parse dates. If you want those to be used as-is then you should include the categories plugin. If you actually want to treat them as dates then you should convert them to dates as Nikos suggested and then take a look at the time plugin.