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'],
};
Related
As the title says, i want to switch the tooltip header with the tootlip body text.
for me it makes no sense why the standard config is this way around...
i know i can create a custom tootlip but thats not my favorite way to do it.
the code im using currently
var options = {
series: [{
name: 'Series',
data: [v0, v1, v2, v3, v4]
}],
colors: ['#3979bd', '#c1a748', '#69b761', '#69b761', '#d54c4c'],
chart: {
type: 'bar',
height: 200
},
plotOptions: {
bar: {
distributed: true,
borderRadius: 0,
horizontal: true,
}
},
tooltip: {
enabled: true,
},
dataLabels: {
enabled: true,
},
xaxis: {
categories: ['open', 'planned', 'done', 'done cloud', 'stopped'],
}
};
var chart = new ApexCharts(document.querySelector("#overview_apex_sc4stats"), options);
chart.render();
and heres a image what i want
I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.
What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);
I'm facing a serious problem. Whenever I try to add any trendline starting from a bit below to the top of the chart (near about 70-85 degree angle), it changes its width. But in case of vertical and horizental line I'm not facing the problem. Is there any way to prevent this?
My code is:
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my JSfiddle.
Please check the images also.
Normal chart
Chart with trendline
This is normal. It is adjusting the height of the chart (not the width) to accommodate the points you are adding. It adds a little buffer to make the chart point a bit more readable.
You can also use min/max parameters or set tickPositions / tickPositioner to keep ticks always in the same postions.
Docs: http://api.highcharts.com/highcharts
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.
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 }
}
});