I learn AnyCharts library and i need to create a tick chart (Its specificity is that it shows every change in price. Thanks to this, it is possible to observe the quotations of a given instrument in the most accurate way. If, for example, the transaction price is 1 point higher than the previous transaction, then the tick chart will immediately jump one point higher on the chart, but if the transaction has a price higher than the previous transaction by three points, then the tick chart will also "shoot" three points higher.) in case when i have a date something like this:
var data =[ [new Date(2018, 11, 24, 10, 33, 31, 0),511.53, 514.98, 505.79, 506.40],
[new Date(2018, 11, 24, 10, 33, 31, 1),211.53, 414.98, 405.79, 406.40],
[new Date(2018, 11, 24, 10, 33, 31, 1),512.53, 514.88, 505.69, 207.34],
[new Date(2018, 11, 24, 10, 33, 31, 3),511.22, 515.30, 505.49, 106.47],
[new Date(2018, 11, 24, 10, 33, 31, 4),511.53, 514.98, 505.79, 506.40],
[new Date(2018, 11, 24, 10, 34, 32, 4),111.53, 114.98, 105.79, 106.40],
[new Date(2018, 11, 24, 10, 34, 32, 5),511.53, 514.98, 505.79, 506.40]]
I want to show a every single point - without compression points from the same time (I'm afraid that's all I can do).
My goal is chart like this:
For this purpose, the Stock chart with Step Line series is the best choice. Check the article, it describes how to create and adjust such a chart.
Related
There are plenty of Anychart HTML examples available for download of line charts with a date-time x axis. All the examples I've seen have data spaced at intervals of weeks or months. When I modify the sample code such that the data spans only a few hours, nothing is printed on the x axis.
For instance, I've downloaded the example at https://playground.anychart.com/docs/v8/samples/AGST_DateTime_Axes_02, which uses the following data:
var series = chart.line([
{value: 1.172, x: Date.UTC(2003, 09, 14)},
{value: 1.916, x: Date.UTC(2004, 09, 13)},
{value: 5.57, x: Date.UTC(2005, 09, 13)},
{value: 15.0, x: Date.UTC(2006, 09, 13)},
{value: 144, x: Date.UTC(2007, 09, 13)}
]);
This works fine for me, with Jan 2004, Jul 2004 etc displayed on the x axis.
However, when I change this data to the following:
var series = chart.line([
{value: 1.172, x: Date.UTC(2003, 09, 13, 9, 40, 0)},
{value: 1.916, x: Date.UTC(2003, 09, 13, 10, 41, 0)},
{value: 5.57, x: Date.UTC(2003, 09, 13, 11, 41, 0)},
{value: 15.0, x: Date.UTC(2003, 09, 13, 12, 40, 0)},
{value: 144, x: Date.UTC(2003, 09, 13, 13, 39, 0)}
]);
The chart is displayed, but nothing is displayed on the x axis.
It's a kind of misconfiguration. In the sample you mentioned, line 18 is the following:
dateTimeTicks.interval(0, 6);
It means to show ticks every 6 hours on the xAxis. But in your second case, the whole range of data is less than 6 hours (between 9 and 13 hours), so that's why you see no ticks.
To avoid it, just remove that line or adjust intervals according to your data range. Here is the result.
You can learn more about this function in the API Reference.
I have some time series data with well-defined intervals. Here's what the raw data look like:
[((datetime.datetime(1997, 10, 20, 0, 0),
datetime.datetime(1997, 10, 20, 23, 59, 59)),
1),
((datetime.datetime(1997, 10, 21, 0, 0),
datetime.datetime(1997, 10, 21, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 22, 0, 0),
datetime.datetime(1997, 10, 22, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 23, 0, 0),
datetime.datetime(1997, 10, 23, 23, 59, 59)),
1),
((datetime.datetime(1997, 10, 24, 0, 0),
datetime.datetime(1997, 10, 24, 23, 59, 59)),
3),
((datetime.datetime(1997, 10, 25, 0, 0),
datetime.datetime(1997, 10, 25, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 26, 0, 0),
datetime.datetime(1997, 10, 26, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 27, 0, 0),
datetime.datetime(1997, 10, 27, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 28, 0, 0),
datetime.datetime(1997, 10, 28, 23, 59, 59)),
1),
((datetime.datetime(1997, 10, 29, 0, 0),
datetime.datetime(1997, 10, 29, 23, 59, 59)),
4),
((datetime.datetime(1997, 10, 30, 0, 0),
datetime.datetime(1997, 10, 30, 23, 59, 59)),
6),
((datetime.datetime(1997, 10, 31, 0, 0),
datetime.datetime(1997, 10, 31, 23, 59, 59)),
0),
((datetime.datetime(1997, 11, 1, 0, 0),
datetime.datetime(1997, 11, 1, 23, 59, 59)),
0),
((datetime.datetime(1997, 11, 2, 0, 0),
datetime.datetime(1997, 11, 2, 23, 59, 59)),
0),
((datetime.datetime(1997, 11, 3, 0, 0),
datetime.datetime(1997, 11, 3, 23, 59, 59)),
2),
((datetime.datetime(1997, 11, 4, 0, 0),
datetime.datetime(1997, 11, 4, 23, 59, 59)),
0)]
You can see that there are tuples that define the exact start and end of each interval. I want to draw a Highcharts column chart that exactly mimics the data above. https://jsfiddle.net/kvh4zt2k/ is what I currently have:
The problem is that this doesn't mimic my data exactly. Notice how the columns are centered on each X-axis label. In order to display my intervals exactly, I want the X-axis labels to be exactly on the left edge of each column. Here's a crappy photoshop that illustrates how the columns should be aligned relative to the X-axis labels:
I've scoured the API docs and tried a bunch of things without success. How can I do this?
Set pointPlacement: "between", see: http://jsfiddle.net/kvh4zt2k/1/
API reference.
I have a jsFiddle here to show my problem,
I want my chart to start on xAxis two month before than it has data on it,
how can I show from two month before?
'xAxis': {
'min': Date.UTC(2013, 4, 24, 16, 44, 10),
'startOnTick' : false,
'startOfWeek': 6,
'dateTimeLabelFormats': {
'week': '%a,<br/>%e. %b'
}
},
start the data from the date you want to show in chart.
if there is no data give the y value as null
in your case you want the min for xAxis to be Date.UTC(2012, 1, 24, 16, 44, 10)
so start data from
data: [
[Date.UTC(2012, 1, 24, 16, 44, 10), null],
[Date.UTC(2013, 6, 24, 16, 44, 10), 336000.],
[Date.UTC(2013, 6, 27, 13, 57, 36), 393500.]
]
this will make the xAxis plot from the day you want.
I've updated your fiddle here
I have this very simple code (data provided) in Javascript running Highcharts in order to create a simple graphic with simple configuration. Any ideas on why the last part of the graphic is being painted incorrectly?
Here is the jsfiddle link so you can see what I'm talking about (x axis at 5pm).
http://goo.gl/J5oWuE
The image with the strange graphic generated:
This is because your series is not sorted by time. You have the following:
...
[Date.UTC(2014, 02, 7, 13, 14), 1351],
[Date.UTC(2014, 02, 7, 14, 03), 6391],
[Date.UTC(2014, 02, 7, 20, 02), 5231],
[Date.UTC(2014, 02, 7, 16, 28), 837],
[Date.UTC(2014, 02, 7, 17, 00), 541],
...
Sort all your data with ascending time scale.
So I am trying to map Tide times on a line graph using Google's Chart API.
However, the points plotted on the Graph don't correspond to the correct date and time values.
The data is in the form date time (x-axis) and height of tide (y-axis).
I'm not sure if I am creating the date time value correctly, or it the API is just doing something weird.
For instance, the last date in the tideTimes array is for the 1st of November, but the Graph is showing data points for December, you can see this behaviour in image below. I added the code below to allow you to recreate these errors.
If anyone could tell me what I am doing wrong, it would be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawWeekChart);
function drawWeekChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Wave Height (Meters)');
var tideTimes = [
[new Date(2012, 10, 29, 05, 44, 00, 00), 9.12],
[new Date(2012, 10, 29, 11, 47, 00, 00), 1.62],
[new Date(2012, 10, 29, 18, 01, 00, 00), 9.23],
[new Date(2012, 10, 30, 00, 01, 00, 00), 1.55],
[new Date(2012, 10, 30, 06, 16, 00, 00), 9.20],
[new Date(2012, 10, 30, 12, 16, 00, 00), 1.58],
[new Date(2012, 10, 30, 18, 33, 00, 00), 9.21],
[new Date(2012, 10, 31, 00, 29, 00, 00), 1.54],
[new Date(2012, 10, 31, 06, 46, 00, 00), 9.21],
[new Date(2012, 10, 31, 12, 45, 00, 00), 1.60],
[new Date(2012, 10, 31, 19, 04, 00, 00), 9.12],
[new Date(2012, 11, 01, 00, 58, 00, 00), 1.59]
// new Date( YYYY, MM, DD, HH, MM, SS, MS), height]
];
data.addRows(tideTimes);
var options = {
title: 'Tide Times',
smoothLine: true,
width: 984,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('tide_chart_week'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
</body>
</html>
Month must be a integer b/w 0-11.
Check the Date() constructor docs [0]
month Integer value representing the month, beginning with 0 for
January to 11 for December.
Just change your tideTimes variable accordingly
var tideTimes = [
[new Date(2012, 9, 29, 05, 44, 00, 00), 9.12], // october
//.....
[new Date(2012, 10, 01, 00, 58, 00, 00), 1.59] // november
];
Also, you might want to change your chart's horizontal axis format to show friendlier dates
var options = {
/*.. current options ..*/
hAxis: {format:'MMM d, y'}
};
Here's an example: http://jsfiddle.net/jaimem/F4Gzr/1/
[0] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date
As jm pointed out, in ECMAScript months are zero based so:
new Date(2012, 10, 31, 19, 04, 00, 00)
is 31 November 2012, which creates a date for 1 December 2012 (since November only has 30 days) and:
new Date(2012, 11, 01, 00, 58, 00, 00)
is also 1 December, 2012.
<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
Note the use of stye instead of style !