I'm trying to use Area Stacked Highchart, here's an example and jsFiddle demo to play with
Unfortunately the chart itself generates ugly gaps at the beginning and at the end of the x-axis.
This question has been asked all over again, and looks like the answer is "don't use categories for xAxis, remove them and replace with type: 'datetime'. Unfortunately I'm getting categories from back end and I can't do nothing about this. And any other setting like margins, paddings, spacing etc. doesn't seem to work with categories at all.
Does anyone have any clue how to fix that? To be honest it looks more like a serious UI / UX bug to me than something that is supposed to happen. Who needs a chart that starts somewhere else than on its edge?! :)
Need 7 more reputation to post an image, sorry for URL: i.stack.imgur.com/lGxo6.png
In short words: [b]try to remove GAPS from jsFiddles example without deleting categories[/b]. Is it even possible?
You are right, that was asked quite a lot, I should prepare auto response for this.
Then answer is to use datetime axis OR linear axis. You have categories from backend? No problem, just store them in some variable and then edit formatter for labels: http://jsfiddle.net/h7Akd/1/
var categories = ['1750', '1800', '1850', '1900', '1950', '1999', '2050'];
...
xAxis: {
tickmarkPlacement: 'on',
title: {
enabled: false
},
tiickInterval: 1, //force to display categories one by one
labels: {
formatter: function(){
return categories[this.value];
}
}
},
Now you can edit min and max, using or xAxis.min/max or 'xAxis.minPadding/maxPadding`.
Extras:
To be honest it looks more like a serious UI / UX bug to me than something that is supposed to happen. Who needs a chart that starts somewhere else than on its edge?! :)
You will be surprised..
For example use columns and you will see. Rather the question is why can't you update backend to return timestamps (as for dates should be)?
Related
Hello Im trying to plot some data on angularjs using chart.js , but Im getting a weird ordering of my data, which results in a weird chart like this:
This are my options:
vm.options = {
type:'line',
fill: false,
backgroundColor: 'transparent',
scales: {
xAxes: [{
type: 'time',
position: 'bottom'
}]
}
};
I tried ordering the date of my data like this:
vm.data.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b.time) - new Date(a.time);
});
But the result is the image above. Can anyone help me spot the problem?
Though it is an old post but I am answering so that somebody may get benefit from it!
I have faced similar problem with my ionic3 app. I had a problematic graph with wrong order,though my dataset was in right order (I have used a slider to adjust the value) .The problem was solved by applying a loading controller of ionic framework.
You need to give time to complete the response and render before the final display.
Hope it will help you.
Having trouble with Highcharts heat map; trying to somewhat imitate the example large-heatmap with my own data in a slightly different format yet can't manage to get it to draw properly.
Image snip of the problem
Demo here:
https://jsfiddle.net/17jsrxfk/1/
yAxis: {
type: 'datetime',
labels: {
format: '{value:%H:%M}'
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
As can be seen, the tooltip manages to find and respond to the correct data at that point, and even changes colour; along with the colour axis at the bottom responding correctly.
[1456444800000, 2700600000, 54.18855218855219], etc
The data is in milliseconds, the first value being the date of record (d,m,y) and the second value being a date (m,h,d,m,y) with a dummy Day Month Year of 0,0,1970; the third value being the actual reading.
I'm not sure if this is a problem with Highcharts somewhere, or if I've made a rookie mistake as i am fairly new to Highcharts.
I haven't been able to find any reproductions of this problem elsewhere, and have spent a good few hours trying to find a solution.
Hints and Tips appreciated too!
Thanks
It looks like the problem is connected with the plugin you are loading on the beginning, without this plugin everything works fine, if you will set colsize and rowsize of your columns: jsfiddle.net/17jsrxfk/2 – Grzegorz Blachliński
Thanks to this guy for solving my problem!
When I create a stockchart, I noticed by accident that highcharts seems to show or create points that do not actually exist in the data set.
Here is an jsfiddle that illustrates this:
( See added comment for the link, unable to just paste it because of idiotic rules on stackoverflow )
As you can see by hovering over the chart to show the tooltip, some of the data will show as having more than 2 decimals. In the data set there are no such data. All data has a maximum of 2 decimals.
Of course I can do Highcharts.numberFormat(this.y, 2) but to me this highlights a bigger problem since I am interested in the actual reported datapoint, and not approximations.
Is there a way to tell highcharts not to do this?
I've tried to use type:'spline' to show data points as illustrated here:
http://www.highcharts.com/demo/spline-irregular-time
But couldn't get spline and stockchart to coexist. I would like a stockchart but with actual points dotted or similar.
Data is grouped. You can disable data grouping by setting:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
Example: http://jsfiddle.net/3Ld2zmum/17/
Markers can be enabled using:
plotOptions: {
series: {
marker: {
enabled: true
},
Example: http://jsfiddle.net/3Ld2zmum/18/
I want to represent two time series with Highcharts. My problem is that one has large values and the other one low values. When I plot them together, the one with low values appear as a straight line. I want to be able to plot them with two different scales, but find it impossible to do it. I put what I already have here on a jsfiddle, and the code is here:
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [1000,2000,3000,4000]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,0.2,0.3,0.4,0.5]
},
],
legend: {
enabled:true,
},
})
});
I would appreciate if someone could point me how I could give a different scale to each time series - ideally, I will want to plot more than two, each of them having its own scale.
You can use to yAxis, like in the example
yAxis:[{
},{
opposite:true
}],
http://jsfiddle.net/S2uyp/1/
As the difference between high values and low values is very high so the chart is looking like this but if you try with the following values then you will see that the chart looks good
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [10,15,30,40]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,1,5,10]
}],
legend: {
enabled:true
}
})
});
this is exactly what you want I guess.
Since you have an answer telling you how to accomplish specifically what you asked, let me add one that addresses the issue more fundamentally.
This is a classic example of when what you really need is two separate charts (generally, aligned vertically one above the other works best for line charts, where they can work with a common time axis).
That's a concept that seems to shock some people, but it really is the best solution, and there really is no negative aspect to having two charts instead of one.
The problem with plotting 2 series on one chart, with 2 different scales, is that it practically forces the user to make comparisons that are not real. When you plot 2 lines on a chart, the interaction of those 2 lines is generally something of importance, and will be seen as such by the viewer.
When the 2 lines have 2 different scales, the interaction is completely meaningless, and the two lines serve only to clutter the chart and obscure the message of the data.
Essentially, when you plot 2 series with 2 separate scales, you are making 2 charts already anyway - but you're scrunching them into one space where they get in each others way.
FWIW
{{UPDATE:
As an example, here is a fairly typical example of 2 series plotted on separate scales on the same chart:
http://jsfiddle.net/jlbriggs/GYbRY/
It could be cleaned up and improved a bit, but overall it's going to be a bit of a mess no matter what you do to it.
Here is the same data plotted on 2 separate charts, in significantly less space than the original:
http://jsfiddle.net/jlbriggs/m64Ys/
I feel it's hard to support the argument that the first example makes it easier to compare the variation in the two series.
It looks like pointPlacement is not working with a single column...
The point placement can also be numeric, where 0 is on the axis value,
-0.5 is between this value and the previous, and 0.5 is between this value and the next. Unlike the textual options, numeric point
placement options won't affect axis padding.
Like in the example below where i removed this data it doesn't work anymore:
{
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
},{
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
pointPadding: .3,
pointPlacement: 0.2,
yAxis: 1
}
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-pointplacement-numeric/
This jsfiddle shows the usual pointplacement option. If you adjust this fiddle and remove 2 of the 3 data-sets, the pointplacement option is broken, while even in that case it should still be usefull to have and working, even required in my case...
edit
I added this into a fiddle because the only one responding so far didn't get the point from the code example. So here it is: http://jsfiddle.net/dargno/3YMyq/
If anyone knows a possible solution without having to "hack" the source code i'd really appreciate it.
I was able to get rid of this issue myself in my particular instance by adding a negative margin to the graph area, and adding an extra (empty) data point.
chart: {
type: 'column',
marginRight: -400
And
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150,0],
Keep in mind the tooltips might get "lost" if you're not carefull that way though.
An example can be found at http://jsfiddle.net/dargno/wtaaH/
While this is not a proper solution, it certainly circumvents the bug for the time being.
It looks like possibly bug, so I reported to our developers here https://github.com/highslide-software/highcharts.com/issues/2308