Related
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.
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 chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis.
See current code at jsfiddle.
Relevant part of code:
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). This meant it seemed like a better idea to add the columnrange to the spline base.
I'm stuck it seems like highcharts should be able to do this.
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph?
Unfortunatley when you use inverted options then axis are flipped and all series are inverted. It is default behaviour. You cannot combine inverted and not inverted series.
Is there any option available for increasing the line width of line-charts? I have tried to alter the stroke, but that does not seem to have any affect.
Here is how the line-chart is initialized:
paper.linechart(10, 30, 400, 240, [
[5, 10, 15, 20, 25, 30, 35]
], [
[15, 10, 20, 14, 13, 17, 9],
[7, 13, 17, 9, 10, 20, 14],
[5, 4, 14, 12, 20, 3, 16]
]);
Currently your only option would be to specify a higher width value in the options. From the documentation, under the width property of Paper.lineChart's options:
(width) controls the size of the plotted symbol. Also controls the thickness
of the line using a formula stroke-width=width/2.
To only control the line's stroke-width, you should be able to pass an empty symbol and the desired width value to the opts, e.g.:
paper.linechart(10, 30, 400, 240, [
[5, 10, 15, 20, 25, 30, 35]
], [
[15, 10, 20, 14, 13, 17, 9],
[7, 13, 17, 9, 10, 20, 14],
[5, 4, 14, 12, 20, 3, 16]
], {
symbol: '',
width: 5
});
(You can pass circle as a symbol, of course, but its size will be derived from the width value).