chart.js irregular time series produces incorrect tooltip - javascript

I'm using chart.js and have a chart with 2 line series and 2 bar series. The series can have irregular times, aka, there may be a missing interval or two in a series.
As far as plotting, it actually looks fine. But the tooltip will display the data for the next point that is populated, even if its missing for that period.
In other words, 3 of the series have a point for Jan, but the fourth series' first point is for February. It'll show the first 3 correct for January, and the fourth point on the January tooltip will be for February. Then on February, it'll show all four series February data correctly. I would expect the Jan tooltip to only show the 3 series that it has data for.
tooltips: {
mode: 'index',
intersect: false
}
I am working on a fiddle, but unfortunately I'm having trouble getting that to work (like, display at all). I will update the question once its working.
I've also tried mode being x, and label.
Here is the fiddle. Hover over the first data point and you will see the values for the two "you" series:
https://jsfiddle.net/kqofb5m2/3/

Related

HighCharts - start drawing from the left most in a combined chart

I'm currently trying to combine an area chart with a column chart using HighCharts. However, when I select different ranges for the chart, the column chart cannot start from the leftmost and end on the rightmost. Please see the below pics.
It looks like we have some similar questions here, but none of them works for my case.
current_correct for 6 months
need_wrong for 7 days
The closest solution I can find is
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
with above
But this one only makes points without changing the coordinates on the x-axis. For example, the leftmost column in the above pic is 14.Sep but it does not at the right position.
Thanks for any help!
EDIT: It is very weird since I found that it has a smaller gap in each Monday and a larger gap in others weekday.... As the below pic.
weird case

Gapped data issues in highcharts

I'm having an issue with Highcharts which is not actually the framework's fault, but rather mine. The data I want to plot may have gaps sometimes in the middle of it, and when trying to plot the points the framework doesn't consider the density of the points and link the gaps when, in my case, it's not supposed to. As you can see in the image below the purple serie wasn't supposed to be linked, but rather leave a gap around 16:00 and 08:00.
One other problem that I face because of the gaps I have is that my chart is many times unproportional like in the image shown below where November takes 1/4 of the chart area, while the other months take the rest of the space. Also between August and September the space is larger than the other monthly intervals.
Last but not least there's finally the issue that I set my chart's X Axis accordingly to a date picker I have on my webpage and I'd love it to start and end at the dates picked, but it instead starts and ends at where the points start and end. I'm setting my limits like this:
xAxis: {
type: 'datetime',
min: min,
max: max,
minRange: $scope.minRange || Time.MINUTE,
events: {
afterSetExtremes: onLazyLoad
}
}
You can see the gap linking points problem over here
The unproportional chart problem here

Area/Line chart not working as expected with stacking : percent and negative values

I'm trying to make a population pyramid type of chart with both bars and lines at the same time.
I also need to place a checkbox to allow the user to switch to percent values.
The problem i'm facing is that the line series are not behaving the same as the bar series when i set stacking:percent
The values of the two line series are copied with just a minus in front so i'd expect to see all the values to 50% when switching to percent. But for some reason the blue line is always at 0%.
jsFiddle
EDIT:
As Bobby Orndorff explained in the comment:
When stacking line/area series, you add the values of the second series to the values of the first series. If the values of the second series have the same magnitude but different sign then the sum will be zero (i.e. the second series will be plotted at zero). When stacking bar series, positive values are stacked above the zero and negative values are stacked below zero.
So now my question is:
How do i achieve the same effect as the bar series but using the line/area series? Is it possible without manually editing the dataseries (doing the percentages myself)?

Highchart.js X-axis labels - values are NaN

I'm trying to use Highchart to show a graph. Data is given as a data attribute of the figure. Everything renders as I want to, except aht I can't get the X-axis labels (dates) to show up. I've been debugging and within the Highchart's xAxis.labels.formatter function, but this.value is always "NaN", whereas the dates renders fine in the Tooltip.
Here's a JSFiddle page replicating my issue.
http://jsfiddle.net/xlory/nKhuA/
<figure id="seo-demand-figure" data-filename="SEODemand"
data-graph="[
{"name":"Agents of SHIELD
cast","label_suffix":"","data":
[[1397286000000,0.09533],[1397890800000,0.08988],[1398495600000,0.06456],
[1399100400000,0.06224],[1399705200000,0.0594],[1400310000000,0.05941],
[1400914800000,0.02861],[1401519600000,0.0307],[1402124400000,0.02971],
[1402729200000,0.0],[1403334000000,0.03265],[1403938800000,0.0],
[1404543600000,0.0]]},
{"name":"Alec
Baldwin","label_suffix":"","data":
[[1397286000000,0.2916],[1397890800000,0.2832],[1398495600000,0.2396],
[1399100400000,0.2397],[1399705200000,0.2377],[1400310000000,1.099],
[1400914800000,0.3148],[1401519600000,0.2763],[1402124400000,0.2674],
[1402729200000,0.2286],[1403334000000,0.2612],[1403938800000,0.3079],
[1404543600000,0.318]]},
{"name":"Kim Kardashian
divorce","label_suffix":"","data":
[[1397286000000,0.02179],[1397890800000,0.02179],[1398495600000,0.02179],
[1399100400000,0.02179],[1399705200000,0.02971],[1400310000000,0.02971],
[1400914800000,0.05942],[1401519600000,0.08913],[1402124400000,0.05942],
[1402729200000,0.03265],[1403334000000,0.03265],[1403938800000,0.03367],
[1404543600000,0.03593]]}
]"
data-decimal-point="." data-thousandssep="," class="figure">
</figure>
(JS code in the JSFiddle page.. too long to post here...)
How can I get the labels to show correctly?

The issue was I had a wrong value for startOfWeek. I put 'Sunday' but it should have been a number corresponding to the day of week, so like '0'. That messed up with the tick, and tick labels.

How to show full date to my labels and each x axis in different colour in highcharts?

I am just trying to achieve few things in my chart(Highcharts).
1). I want to show the full date always even its the same year. Currently its shows only day and Month.
2). How can i pass the colour to each one of the y axis labels.
(E.g.)
xAxis: {
categories: [[0],['Contract Period', 'blue'], ['Pre Contract Period', 'green'], ['Tender Period', 'red']]
}
3). I want to show the date for each point of the xaxis. Currently its shows just the starting date wherever i hover it.
4). My charts colors are depends upon Y axis labels. Not the X axis labels. I dont want to show any colors for the labels inside the legend. I just want to show the text Original Date and Actual Date. No colors. So only when i click the Original Date, its just display the Original Dates.
Moreover, I am just trying to get this chart like Gantt. Thanks.
What I got so far,
CHART SO FAR

1) You can use dateTimeLabelFormats and place %Y for day/month
2) You need to use labelFormatter and return value i.e as span with color.
3) Do you mean that on entire bar, toolip should display dates for each "part" of bar? If yes it is not possible.
4) So how it should look like?

Categories

Resources