From an external service I am receiving a date already converted to UTC. The Highcharts tooltip is displaying Jan 01, 1970 I am not sure why it is not interpreting the date correctly. If I manually convert the UTC times to strings then user the Date.UTC JavaScript method, it works fine. I not sure why the UTC formatted date does not work.
var weightChart;
var weightData = [];
var minWeight;
var maxWeight;
$(function () {
var json = {"ibw":175,"max_weight":300,
"min_weight":175,
"weights":[{"date":1232521200,"weight":300},
{"date":1245218400,"weight":300},
{"date":1313042400,"weight":290},
{"date":1319522400,"weight":270},
{"date":1330498800,"weight":200},
{"date":1342591200,"weight":250},
{"date":1365141600,"weight":235}]};
minWeight = json.min_weight;
maxWeight = json.max_weight;
$.each(json.weights, function(i, item) {
weightData.push([item.date, item.weight]);
});
displayGraph();
});
function displayGraph() {
//graph
weightChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
height: 113
},
credits: {
enabled: false
},
title: {
text: ''
},
tooltip: {
xDateFormat: '%b %d, %Y',
headerFormat: 'Date: <b>{point.key}</b><br />',
pointFormat: 'Weight: <b>{point.y}</b>'
},
xAxis: {
type: 'datetime',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: ''
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 125
}],
min: minWeight,
max: maxWeight
},
series: [{
name: ['Weight'],
data: weightData
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
colorByPoint: false,
pointWidth: 12,
shadow: true
}
}
});
}
Here is the fiddle for it
It looks like your data is coming from your back-end in a UNIX time stamp. Highcharts is expecting a javascript time which is UNIX time in milliseconds. It is showing Jan 01, 1970 be cause that is what "1232521200" is the date for. Multiply your datestamp by 1000 and you will get the appropriate time. Live demo.
var json = {
"ibw": 175,
"max_weight": 300,
"min_weight": 175,
"weights": [{
"date": 1232521200000,
"weight": 300
}, {
"date": 1245218400000,
"weight": 300
}, {
"date": 1313042400000,
"weight": 290
}, {
"date": 1319522400000,
"weight": 270
}, {
"date": 1330498800000,
"weight": 200
}, {
"date": 1342591200000,
"weight": 250
}, {
"date": 1365141600000,
"weight": 235
}]
};
I would recommend you to convert the date on the server side in string and supply the correct date format and then return the data as string and the highchart will display it in correct format.
For instance on the server side I have DateTime object
DateTime date=DateTime.Now
I convert the date in the correct format and return it as string date.ToString("dd.MM.yyyy")
Related
I'm attempting to create a highchart populated by dynamic data that looks something similar to the following image:
Where the y-axis (technically just the x-axis with the inverted: true tag) is a list of people grouped by location. However, I'm having trouble displaying the data grouped by their locations with the locations being displayed also. The actual view isn't important, just that it neatly groups the data and displays the location.
All I've managed to do so far is simply sort the data and tag the location name to the end of the person, but that's not quite what I want:
I'm aware that this is a relatively easy thing to do with categories and data series, but the only examples of this i could find didn't involve dynamic data. Here is some of my code so far:
function loadChart() {
//calculate height based on number of users displayed, and width based on the panel body width
var chartHeight = users.length * 20 + 75;
var chartWidth = $('#InOutPanelViewId').width();
chart = Highcharts.chart('ChartViewId', {
chart: {
width: chartWidth,
height: chartHeight,
type: 'columnrange',
inverted: true,
spacingLeft: 0
},
title: {
text: null
},
xAxis: {
showEmpty: false,
title: null,
type: 'category',
labels: {
align: 'right',
format: '{value.User}',
style: {
color: 'black',
fontSize: '12pt'
}
}
},
yAxis: {
showEmpty: false,
title: '',
type: 'datetime',
dateTimeLabelFormats: {
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
min: startTime.valueOf(),
max: endTime.valueOf(),
plotLines: [{
color: 'grey',
value: time,
width: 1.5
}]
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [
{ name: "Data", borderWidth: 0, data: chartData }
],
tooltip: {
formatter: function () {
return '<b>' + this.point.jobcode + '</b><br>' + this.point.timespan + '<br>';
}
}
});
}
Where chartData currently looks like this:
chartData[chartData.length] = { name: user, low: displayStart.valueOf(), high: displayEnd.valueOf(), timespan: timeSpan, jobcode: value.JobCodeName, color: colour };
And is populated with dynamic data it pulls from an endpoint. The endpoint does also send back the location, so I'm wondering how I can use this structure and the location i'm sending back to group the data and display it nicely.
Any help is appreciated, thanks!
I have data that is returned in an integer format that is based on time, but isn't a measurement of time that we normally use.
The integers are not evenly spaced, so I'm trying reflect that in the chart.
Is there any way to do this without the time in milliseconds?
Here's what I've got so far:
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
categories: xCategories(),
title: {
text: 'Time'
},
ordinal: true
},
series: [{
data: getInterestRates()
}]
});
ordinal: true doesn't seem to work because this isn't a formal time format.
Thanks in advance for your help.
Example Data:
{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
},
{
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
},
{
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
},
This can be done using a x-axis of type linear (this is the default type), and passing an array of [x,y] pairs as data of your series. Given your example data format you'll have to convert it into this format.
A simple Highcharts example would be (JSFiddle):
$('#container').highcharts({
xAxis: {
type: 'linear'
},
series: [{
data: [[1024,0],[2048,5],[4096,5]]
}]
});
The format conversion could be done like this (JSFiddle):
var json = [{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
}, {
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
}, {
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
}];
var data = [];
$.each(json, function(i, v) {
data.push([v.integerOfTime, v.thingMeasuredOverTime]);
});
I made a graph with Highcharts which series is loaded from JSON.
I am bit new to handle JSON file though...
I want Highcharts to show date (in formart: YYYY/MM/DD ie.2013/04/01) on label of xAxis.
As far as I know, since I cannot write something like this in JSON,
"pointStart": [Date.UTC(2013, 4, 1)]
I wrote milliseconds instead.
My JSON:
[
{
"yAxis": 0,
"type": "column",
"name": "Y label",
"data": [0,0,153,179,122,126,120,101,110,95,142,88,82,92,115,101,141,162,0,0,0,0,0,7,6,0,10,0,9,4,56,86,66,61,87,72,74,60,83,74,50,73,61,56,90,78],
"pointStart": 1364774400000,
"pointInterval": 86400000
},{
"yAxis": 1,
"type": "line",
"name": "Y label 2",
"color": "#AA4643",
"data": [4980,4572,5554,6147,5268,5221,5263,5084,4906,5000,5198,4777,4790,4549,4158,4294,4891,4689,4432,3925,3708,3723,3623,3831,3787,4353,4809,5046,4989,4815,4315,4556,4502,4725,4537,4540,4654,4367,4589,4874,4837,5032,5046,4633,4561,4576],
"pointStart": 1364774400000,
"pointInterval": 86400000
}
]
And my javascript:
var options = {
chart: {
renderTo: 'container'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y/%m/%d'
},
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%Y/%m/%d', this.x); //this returns invalid date.
}
},
title: {
text: ''
}
},
...
$.getJSON('test.json', function(data) {
options.series = data;
chart = new Highcharts.Chart(options);
});
This results invalid date on xAxis label.
But if I remove this part
formatter: function() {
return Highcharts.dateFormat('%Y/%m/%d', this.x);
}
returns no error but results like 1. Apr which I do not desire to show :(
Any solution to this?
Thank you.
I came up with solution as follows:
dateTimeLabelFormats: {
day: '%Y/%m/%d'
},
labels: {
rotation: -45,
align: 'right',
formatter: function() {
var _date = new Date(this.value),
_y = _date.getFullYear();
_m = _date.getMonth() + 1,
_d = _date.getDate(),
_result = _y + '/' + (_m < 10 ? "0"+_m : _m) + '/' + (_d < 10 ? "0"+_d : _d);
return _result;
}
},
...
put milliseconds value to Date object in which I was able to handle value w/ such methods as getFullYear(), getDate().
Thanks.
You have the date/time format wrong. It's not day: '%Y/%m/%d', it needs to be day: '%Y/%y/%e' see dateTimeLabelFormats Highcharts API reference.
You can use http://api.highcharts.com/highcharts#xAxis.labels.formatter and Highcharts.dateFormat() http://api.highcharts.com/highcharts#Highcharts.dateFormat()
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y/%m/%d',this.value);
}
I am breaking my head over this one.
i have an highchart with Json data. now would like to split the Json data in to 2 data points.
json data;
[1340283205000,5,32]
Explanation
time, number, number
The current chart works with time, number. Now i have added another datapoint but that dows not work.
function requestData() {
$.ajax({
url: 'php/hits_json.php',
success: function(point) {
var series = chart1.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart1.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
$(document).ready(function() {
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'areaspline',
events: {
load: requestData
}
},
title: {
text: 'Hits per 5 sec'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
maxZoom: 10 * 10000
},
yAxis: {
min: 0,
minPadding: 0.25,
maxPadding: 0.1,
title: {
text: 'Hits',
margin: 40
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
marker: {
enabled: true
},
}
},
credits: {
enabled: false
},
series:
[{
name: 'Hits',
data: [0],lineWidth: 1
},{
name: 'Requests',
data: [0],lineWidth: 1
}]
});
});
Can someone point me in the right direction to solve my issue :)
Thnx in advance
You do not have the data labeled in your json. So the first two values are treated as x and y and the third is ignored. To properly format your data do something like the following:
var json = [
{
"x":1340283205000,
"y":5
},
{
"x":1340283205000,
"y":32
}];
i'm trying to display a date field in flot:
Data:
var data = [
[parseInt(1309150800.0)*1000, 220],
[parseInt(1309064400.0)*1000, 230],
];
Flot creation:
$.plot($("#graph"), [ data ], {
grid: {
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d.%m.%y"
},
yaxis: {
mode: "number",
tickSize: 2
},
series: {
lines: { show: true },
points: { show: true }
}
});
According to this site http://tools.semsym.com/index.php?tool=timestamp×tamp=1309150800 the timestamp is Jun 26, 2011 10:00:00 PM.
But the graph looks like: http://i.stack.imgur.com/NUayx.png
The dots are a bit off. The first one should be at 26, but is at 25,5. I played a bit with timestamp formatting but wasn't able to get it to the specific point.
What am i missing?
Also it shows "26.06.2011" about 6 times. What config is needed to keep it at 1?
Make sure you set a minTickSize. Here is an example at http://jsfiddle.net/hAXHq/ where I have set minTickSize to 1 day and set the min/max values explicitly. You should be able to set your own min/max programmatically depending on your data.
Here is the code:
var data = [
[parseInt(1309150800.0)*1000, 220],
[parseInt(1309064400.0)*1000, 230]
];
$.plot($("#placeholder"), [ data ], {
grid: {
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d.%m.%y",
minTickSize: [1,"day"],
min: (new Date(2011,5,25)).getTime(),
max: (new Date(2011, 5, 28)).getTime()
},
yaxis: {
mode: "number",
tickSize: 2
},
series: {
lines: { show: true },
points: { show: true }
}
});