Develop Reference

how to do tickamount in apex chart using angular 12

How to minminum the labels of xaxis in apex chart using angular ?
intializationChartoption(series: number[]):void {
this.lineChartOptions = true
this.title ={
text: 'linechart'
};
this.xaxis= {
type: 'datetime',
labels: {
format: 'MM yyyy'
},
};
this.yaxis ={
show: false,
showAlways: false
}
console.log(this.yaxis)
this.series = [{
name: 'java',
data: series
}]
console.log(this.series)
this.dataLabels ={
enabled: false
}
this.markers ={
size: 0
}
this.chart = {
type: "area",
stacked: false,
height: 250,
animations: {
enabled: false},
zoom: {
type: "x",
enabled: false,
autoScaleYaxis: true
},
toolbar: {
show: false
},
};
}
I have given type date time for x axis but it is not working and in that line chart , values having 8000 data i.e coming from api .
kindly help me to format the data in line chart

As stated in the documentation, the tickAmount does not apply with type = 'datetime'. In my experience does not play good with type = 'category' either.
The solution I've found is to use type = 'numeric', but then you can override the numbers with your own labels. Like this:
xaxis: ApexXAxis = {
type: 'numeric',
tickPlacement: 'between',
tickAmount: 4,
decimalsInFloat: 0,
overwriteCategories: ['0am ', '7am', '3pm', '11pm'],
};

Highcharts Initialize Zoom & Grouping [duplicate]

I am using the lazy loading method to load OHLC data. On the server side I use Python + MySQL and have 4 tables with OHLC data and time intervals of 5min, 1hour, 1day, 1month. Actually it works well, but unfortunately Highcharts displays the candlesticks in a strange way. Especially at the initial loading and when I switch between the zooms. Here are some examples:
1. Grouping on chart initialization
On initial Loading 6h, 24h & 3d is disabled and the candlesticks are wide apart.
Only after clicking then the first time 1w the chart displays as follows, which is correct and also the zoom buttons 6h, 24h & 3d are enabled now.
2. Grouping when clicking between the rangeSelector buttons
If I click then All inside the Range Selector I get the following display (this is wrong):
Only after clicking 1m and then back on AllI get the right display:
Does anybody know whats going on? Many thanks in advance! Here is the code:
<script>
$(function () {
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
$.getJSON('http://ipaddress/data3?start=' + Math.round(e.min / 1000) +
'&end=' + Math.round(e.max / 1000), function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
//Initially load the biggest data range
$.getJSON('http://ipaddress/data3?start=1481897400&end=1486910100', function (data) {
// Add a null value for the end date
//data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 6,
text: '6h',
dataGrouping: {
forced: false,
units: [['minute', [15]]]
}
}, {
type: 'hour',
count: 24,
text: '24h',
dataGrouping: {
forced: false,
units: [['minute', [30]]]
}
}, {
type: 'day',
count: 3,
text: '3d',
dataGrouping: {
forced: false,
units: [['hour', [2]]]
}
}, {
type: 'day',
count: 7,
text: '1w',
dataGrouping: {
forced: false,
units: [['hour', [4]]]
}
}, {
type: 'day',
count: 30,
text: '1m',
dataGrouping: {
forced: false,
units: [['day', [1]]]
}
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3 // Init loading button
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes
},
//minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series: [{
data: data,
dataGrouping: {
enabled: true
}
}]
});
});
});

Here is the solution:
1. No grouping on chart init
To solve the grouping problem at the initialization stage, use the following lines:
Highcharts.stockChart('container', {
//.... your code ...
}, function(chart){
chart.rangeSelector.clickButton(1);
});
The problem here was that the selected button from chart options was not triggering afterSetExtremes event for xAxis.
1. No grouping when clicking the rangeSelector
To avoid Highcharts grouping the data when clicking between the rangeSelector buttons, set the chart as follows:
rangeSelector: {
buttons: [{
dataGrouping: {
forced: false }
}] }

Highcharts strange grouping behaviour

I am using the lazy loading method to load OHLC data. On the server side I use Python + MySQL and have 4 tables with OHLC data and time intervals of 5min, 1hour, 1day, 1month. Actually it works well, but unfortunately Highcharts displays the candlesticks in a strange way. Especially at the initial loading and when I switch between the zooms. Here are some examples:
1. Grouping on chart initialization
On initial Loading 6h, 24h & 3d is disabled and the candlesticks are wide apart.
Only after clicking then the first time 1w the chart displays as follows, which is correct and also the zoom buttons 6h, 24h & 3d are enabled now.
2. Grouping when clicking between the rangeSelector buttons
If I click then All inside the Range Selector I get the following display (this is wrong):
Only after clicking 1m and then back on AllI get the right display:
Does anybody know whats going on? Many thanks in advance! Here is the code:
<script>
$(function () {
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
$.getJSON('http://ipaddress/data3?start=' + Math.round(e.min / 1000) +
'&end=' + Math.round(e.max / 1000), function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
//Initially load the biggest data range
$.getJSON('http://ipaddress/data3?start=1481897400&end=1486910100', function (data) {
// Add a null value for the end date
//data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 6,
text: '6h',
dataGrouping: {
forced: false,
units: [['minute', [15]]]
}
}, {
type: 'hour',
count: 24,
text: '24h',
dataGrouping: {
forced: false,
units: [['minute', [30]]]
}
}, {
type: 'day',
count: 3,
text: '3d',
dataGrouping: {
forced: false,
units: [['hour', [2]]]
}
}, {
type: 'day',
count: 7,
text: '1w',
dataGrouping: {
forced: false,
units: [['hour', [4]]]
}
}, {
type: 'day',
count: 30,
text: '1m',
dataGrouping: {
forced: false,
units: [['day', [1]]]
}
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3 // Init loading button
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes
},
//minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series: [{
data: data,
dataGrouping: {
enabled: true
}
}]
});
});
});

Here is the solution:
1. No grouping on chart init
To solve the grouping problem at the initialization stage, use the following lines:
Highcharts.stockChart('container', {
//.... your code ...
}, function(chart){
chart.rangeSelector.clickButton(1);
});
The problem here was that the selected button from chart options was not triggering afterSetExtremes event for xAxis.
1. No grouping when clicking the rangeSelector
To avoid Highcharts grouping the data when clicking between the rangeSelector buttons, set the chart as follows:
rangeSelector: {
buttons: [{
dataGrouping: {
forced: false }
}] }

Highchart UTC date always set to January, 1 1970

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")

Flot chart multiple axes are not configured properly

I am expecting pretty weird problem with flot v.0.7. I have multiple axes, configured like that:
var plotData = [
{ data: data1 },
{ data: data2, yaxis: 2 }];
var options = {
selection: { mode: "x" },
xaxis: { mode: "time" },
yaxis: [
{ min: 0 },
{
min: 0,
position: "right",
zoomRange: false,
alignTicksWithAxis: 1,
tickFormatter: formatter,
}
],
grid: { markings: weekendAreas },
zoom: { interactive: true },
grid: {
clickable: true,
hoverable: true,
borderWidth: 1,
},
legend: { show: false },
};
var plot = $jq.plot(container, plotData, options);
But what I get is that both Y series are located on the right (not only second Y series). There is no formatter for my second series tick. Y values can be less then zero, if zooming. If I don't use array type for yaxis and define it as it would only be one series, then everything works fine. What am I doing wrong?

Instead of yaxis: [ ... ], use yaxes: [ ... ].
See the section of the docs entitled Multiple Axes for more info.