http://jsfiddle.net/jJNmV/
Yes I've multiplied my times by 1,000, and as you can see the dots do not appear on the date but rather a little bit to the side of it. Why does this happen?
My data and x-axis looks like:
{data: [[1351483200000, 12],[1351569600000, 1]], label: "Clicks"}, {data: [[1351483200000, 24],[1351569600000, 1]], label: "Opens"}
], {
xaxis: {
mode: 'time',
timeformat: '%y/%m/%d',
minTickSize: [1, 'day']
},
It looks like you're not accounting for your time zone. The 'time series data' section of the API docs goes into more detail, but the basic idea is that you'll need to add/subtract your timezone offset from each timestamp.
Related
I know the ApexCharts can help to display data using timeline chart.
but the example(vue) only shown how to display the date like
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime() ```
how can I change the value to display time? like 08:00-09:00
You can create your own x-axis labels in the dataset using the chart's xaxis categories option.
For example:
options: {
chart: {
id: 'mychart'
},
xaxis: {
categories: ['8:00','9:00','10:00','11:00','12:00','1:00','2:00','3:00']
}
}
Use the formatter on the axis: https://apexcharts.com/docs/options/xaxis/. It isn't exactly the format you asked for, but will set you in the right direction. There are getMinutes() getSeconds() and GetHours() among other functions that can be used to then construct a format you want.
xaxis: {
type: 'datetime',
labels: {
formatter: function (val: number) {
return new Date(val).toLocaleTimeString()
}
}
},
i want to make graph of stock quotes (downloaded from yahoo finance as csv and changed to json array), but date is in standard format(mm/dd/yyyy) but highstocks works only in unix timestamp (i guess). please give me the whole code on how to change the time's format. i know about date.parse() but i don't know how to apply this to whole data.
please help me with the code please
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: [ // Y: [Open, High ,Low, Close]
/* May 2006 */
[Date.parse("8/2/2012"), 602.84, 610.69, 600.25, 607.79, 83039600],
[Date.parse("8/3/2012"), 613.63, 617.98, 611.56, 615.7, 86230200],
[Date.parse("8/6/2012"), 617.29, 624.87, 615.26, 622.55, 75525800],
[Date.parse("8/7/2012"), 622.77, 625, 618.04, 620.91, 72611700]
["8/7/2012", 622.77, 625, 618.04, 620.91, 72611700],
["8/6/2012", 617.29, 624.87, 615.26, 622.55, 75525800],
["8/3/2012", 613.63, 617.98, 611.56, 615.7, 86230200],
["8/2/2012", 602.84, 610.69, 600.25, 607.79, 83039600],
["8/1/2012", 615.91, 616.4, 603, 606.81, 96125400]
],
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
}
}]
});
});
});
i'm inputting the data manually,still i don't know the use of sample data
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {
When you get data from json, you need to use map your dates to timestamps, in the preprocessing. Use any loop / condition to prepare new array with series, including correct values.
I have two arrays full of data. One array is just random integers (e.g. 1.7, 2.8, 3.4, etc.) and the other array is a corresponding list of unix timestamps for that data, (e.g. 1366585199).
At the moment my Highcharts code looks a little something like this:
dataArray = ("2.4","5.6","3.1", ...);
timeArray = ("1366585199","1366585233","1366585355", ...)
function foo(dataArray, timeArray) {
$('#viz_1').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Data Index'
},
xAxis: {
type: 'datetime', // this isn't doing anything??
categories: timeArray
},
yAxis: {
title: {
text: 'Data Value'
},
},
series: [{
name: topicID,
data: JSON.parse("[" + dataArray + "]")
}]
})
};
This works and renders a line graph to the page but the X Axis is obviously full of about 50 Unix timestamps!
I can't seem to figure out how to get the Highcharts API to take the array of Unix timestamps, use it to line up the data points, but only show a human-readable date on the X axis at regular intervals?
You cannot mix 'datetime' and categories.
It is my preference to send in the x/y values as pairs into HighCharts. Like:
data: [
[Date.parse('01/01/2000 00:00:00'), 55205],
[Date.parse('01/01/2003 00:00:00'), 59091],
[Date.parse('01/01/2004 00:00:00'), 64347],
[Date.parse('01/01/2005 00:00:00'), 71067],
[Date.parse('01/01/2006 00:00:00'), 77770],
[Date.parse('01/01/2011 00:00:00'), 81166]
]
If you have javascript timestamps you can send those in as well like:
[31536000000, 456]
I created a simple line chart in Extjs4 for one of my projects, and the chart is not plotting the right data.
The chart uses the same store as the grid, but not showing the same data. Is there any way to trace the source of the problem, if not fixing it altogether?
The following is the code I use to generate the chart.
{
xtype: 'chart',
animate: true,
shadow: true,
store: 'Dataalls',
legend: {
position: 'top'
},
axes: [{
type: 'Numeric',
position: 'left',
title: 'Wind Speed',
fields: ['windspeed'],
grid: true
}, {
type: 'Category',
position: 'bottom',
title: 'Time',
fields: ['time']
}],
series: [{
type: 'line',
axis: 'left',
xField: ['time'],
yField: ['windspeed']
}]
}
(I tried using type: 'Time' for the x axis but gets the error "date.getFullYear is not a function" )
For the date.getFullYear() I suspect your date string is not parsable into a Date object. Could you post your other supporting code, ideally the full code of the Store and Grid? If you'd like to use the Time Axis you'll need to convert your date String into a date object via something along the lines of:
Ext.define('Your.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'dateString', type: 'string'},
{name: 'date',
convert: function(value, record) {
year = value.substring(0,4);
month = value.substring(5,7).replace(/^[0]+/g,"");
day = value.substring(8,10).replace(/^[0]+/g,"");
hour = value.substring(11,13).replace(/^[0]+/g,"");
// etc for min, sec, millis
return new Date(year, (month - 1), day, hour, 0, 0);
}
}
]
});
For debugging the chart not displaying correctly, I'd place assign your chart object to a var and in Firebug breakpoint after that variable assignment to be able to inspect your chart js object and look at the data inside.
I had a similar problem when using Time. Just fixed it by defining my model field types:
fields: [{name: 'date', type: 'Date'}, {name: 'close',type:'float'}]
As for why your chart is plotting like that, I got that before too, I realised that the json was passing it as a string, so I need to to be defined as a float too. I did a fix for that on the php end, by forcing it as a float first before I passed it over as json.
I have a series of data with a single datapoint every month using the OHLC renderer. I am trying to display it with jqplot. It looks fine, except the data points are far too skinny because jqplot is displaying them as if they only apply to that day. When I take out the date, and just specify month and year, jqplot crashes.
My data looks like this:
[
[
"01/01/2008",
8152.9054008104704,
2612.7075024153296,
5382.8064516128998
],
// ...
[
"03/01/2008",
7554.0494491662403,
2086.69248631764,
4820.3709677419401
],
]
Is this configuration possible, or should I hack the code myself? The documentation doesn't make it clear how to do this.
What code should I be modifying? DateAxisRenderer? OHLCRenderer?
You can use tickInterval option with jqplot.DateAxisRenderer plugin to create monthly ticks.
xaxis: {
renderer: jQuery.jqplot.DateAxisRenderer,
tickOptions: {
formatString:'%#d %I:%M %p'
},
rendererOptions: {
daTickInterval: [1, 'month']
}
}
Jagadish's rendererOptions did not work for me. However, this did:
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b/%e/%Y'},
tickInterval:'1 month'
}
},