I am using google chart which is working absolutely fine except one thing the issue is when I select custom date filter and choose only single date from it then it will show only 1 record with little dot which is also fine no issue with that but its y axis shows repetitive values in it.
Please check example :
http://awesomescreenshot.com/0f757w8k3a
it shows 0, 1, 1, 2, 2
it should show 0, 1, 2, 3, 4 or just 0, 1, 2
var options = {
vAxis: {
format: '#',
minValue: 0,
gridlines: {
color: 'transparent'
},
viewWindowMode: "explicit",
viewWindow:{ min: 0 }
},
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
colors:[{color:'#A8D1FF', darker:'#97B9D8'}]
};
var chart = new google.visualization.AreaChart(document.getElementById('PostChart'));
chart.draw(PostChartData, options);
That may be cause of small range of values for Y axis. Try using Ticks for vAxis commonly referred as vAxis.ticks
vAxis: { ticks: [5,10,15,20] } //array
vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } // A valid value as V
vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } // Dates
Click Here for Ref.
Edit1: In case your record values belongs to smaller range and and you have set the Max Value of vAxis to a higher value, It can also result in Repeated values in vAxis.
Related
I want to create a column chart with no spaces and no overlapping between the columns based on a datetime x-axis.
Highcharts.chart('container', {
chart: { type: 'column' },
title: {
text: 'Month columns'
},
xAxis: {
type: 'datetime',
},
legend: {
enabled: false
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
grouping: false
}
},
series: [{
pointIntervalUnit: 'month',
pointPadding: 0,
groupPadding: 0,
name: 'Test',
negativeColor: 'rgb(223,83,83)',
data: [{x: Date.UTC(2016,11), y:-1000},{x:Date.UTC(2017,0), y:-500}, {x:Date.UTC(2017,1), y: 500}, {x:Date.UTC(2017,2), y: 300}],
}]
});
The following fiddle shows the problem:
Spaces between columns.
The goal is that there are no spaces in between the columns and they don't overlap. I assume that the space is caused by the changing duration of a month e.g. 30 days, 31 days, 28 days, ... but i thought this is handled by the pointIntervalUnit: month option?
Any ideas on alternative series arrangements with the expected result are highly appreciated.
Many thanks for any help on this.
The problem here is caused by the default pointRange value: https://api.highcharts.com/highcharts/plotOptions.column.pointRange
In this case it equals to 28 days - length of the shortest month - February 2017 (28 days).
There's no possibility in Highcharts to manipulate a single point using pointRange or pointWidth (these options apply only to a series).
The easiest solution for this is simply to change the type of the x axis to 'linear' (default) and use categories.
Live demo: https://jsfiddle.net/kkulig/ua4a14vu/
The easy solution is to set: pointPadding: -0.6, i series: JSFiddel
I would like to display on the y-axis of the data through the categories property. I pass an array as I saw in some examples
initLapChart() {
hcharts.chart(this.div.nativeElement, {
chart: {
...
},
yAxis: {
categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
reversed: true,
tickPixelInterval: 50,
gridLineWidth: 1,
...
},
...
}
but it only shows me the first two values, why?
If you want to show all of your categories, whether you have data for them or not, you just need to set your axis min and max values:
yAxis: {
min: 0,
max: 4,
reversed: true,
tickInterval: 1,
categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
labels: {
step: 1
}
},
Updated fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/1/
Or you can do it programmatically if you define your categories up front:
var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'],
yMax = categories.length -1;
Fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/2/
The elements in categories array are indexed from 0 to categories.length - 1, so the first element from the array represents value 0 on yAxis, the second, value 1, etc. If you want to display them all, you need to set tickInterval and labels.step properties with value 1.
API Reference:
http://api.highcharts.com/highcharts/yAxis.tickInterval
http://api.highcharts.com/highcharts/yAxis.labels.step
Example:
http://jsfiddle.net/6qp0v887/
I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/
crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.
I want to have bar chart start from a specific time (1.Apr)
So I implemented this in below sample:
(jsFiddle) sample with axis right but can the bar disappear
With the code below
yAxis: {
type: 'datetime',
min:Date.UTC(2010, 3, 1)
},
yAxis actually start from 1.Apr, but I can not see the bar itself .
If I remark the min line as below
yAxis: {
type: 'datetime'
//min:Date.UTC(2010, 3, 1)
},
Now I can see the bar appear, but the yAxis default show from 1.Jan.
Can anyone help me make the bar visible and yAxis starting from 1.Apr ?
I think I found what you're searching.
There's an option in yAxis called min, it's used to set the lowest value of your axis. Like that :
yAxis: {
type: 'datetime',
min: Date.UTC(2010, 3, 1)
}
Hope it's what you're searching. Chears from a bear.
Let me explain how datetime axis works. In general, datetime axis is based on number of milliseconds since 1970-01-01 00:00:00. That means, setting y: 3600 * 1000 will render column from 1970-01-01 00:00:00 to 1970-01-01 01:00:00. You want to start chart as 1st of April, but your data doesn't reflect that. In other words, you need provide such info, for example:
series: [{
name: 'UP',
color: 'lime',
data: [{
x: 1,
y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
// or:
// y: 1433120400000
// is the same as above use for Date.UTC()
}]
}]
Live demo: http://jsfiddle.net/v9582phy/4/
Thanks for your replying, it helps. And I had extended the code yours with further enhancement as below
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)
return moment(x).format('MMM/DD HH:mm:ss')
}
}
},
with series data as
series: [{
data: [{
status:'studying',
color: 'lime',
x: 1,
y: 5
}, {
status:'playing guitar',
color: 'yellow',
x: 2,
y: 10
}, {
status:'exam',
color: 'red',
x: 2,
y: 23
}]
}]
And I got stacked bar which each bar present how many minutes for lasting status
Live demo: http://jsfiddle.net/v9582phy/11/
I want to show the gridlines on hAxis in google chart tool AngularJS.
This is my code:
$scope.donneesGraphe = {};
$scope.dataGraphe.type = 'LineChart';
$scope.dataGraphe.data = {
"cols": myCols,
"rows": myRows
};
$scope.dataGraphe.options = {
title: "",
pointSize: 6,
pointShape: 'round',
hAxis: {
title: 'Tiempo (hora)',
gridlines: {
color: '#F00'
}
},
vAxis: {
title: 'Distancia (km)',
gridlines: {
color: '#F00'
}
}
};
I only see the gridlines on vAxis.
I use the version: 0.0.8
Thanks in advance.
I found the answer:
hAxis.gridlines : This option is only supported for a continuous axis.
For a discrete axis, set the data column type to string.
For a continuous axis, set the data column type to one of: number, date, datetime or timeofday.