We Keep Coding

Mixed chart scatter plot with chart.js

I'm trying to create a scatter-plot chart in chart.js mixing a line chart and a bubble chart to graph the dispersion of some data vs the "ideal" of a predictive math model.
I'm using the scales to scatter the xAxes and make a straight line (which represents the "ideal"). The problem is in the bubble chart, the data of bubble can't be exactly over the line, is technically impossible (in theory), but they are exactly over the "ideal" line.
Here is my example code for the chart:
var chart = new Chart(ctx, {
type: 'bubble',
data: {
labels: makeLabels().labels,
datasets: [
{
type: 'line',
label: 'Data',
data: makeLabels().labels,
fill: false,
backgroundColor: "rgba(218,83,79, .7)",
borderColor: "rgba(218,83,79, .7)",
pointRadius: 0
},
{
type: 'bubble',
label: 'Data2',
data: makeBubbles(),
backgroundColor: "rgba(76,78,80, .7)",
borderColor: "transparent"
}
]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: 0,
max: Math.max(...makeLabels().array)
}
}]
}
}
});
And here is the complete code with the dummie data and the playground in codepen.
Anyway, this is the actual result:
And this is the expected result:
The position of the line is irrelevant (the charts in the captures aren't plotted with the same data), but what i want is to cause the bubbles to disperse.
¿Any idea how to achieve it?

The reason your points are coming out linearly is because you are setting each data point's x and y value to be the same in makeBubbles(). This results in points that are positioned linearly.
To get the points to scatter just use point that don't fall into a linear pattern. To demonstrate what I mean, I have modified your makeBubbles() function so that your x and y values aren't equal. Now you get a very broad scatter.
arr = arr.map(function(item, i) {
return {x: item, y:arr[i - 1]}
});
Here is an example.

How to set HighCharts dataGroup to a range/timeframe?

http://www.highcharts.com/docs/advanced-chart-features/data-grouping
I can easily apply the dataGrouping of a stacked column chart in HighCharts/Stocks. I'm curious what the approach should be to apply the grouping to only certain years.
For instance, I have time series data and would like the data to be grouped by month, except for all the years in the 1980's which I would like to be grouped annually.
If I have time I will try and create a sample dataset, I'm currently lost in the weeds of the approach and can't find help in the documentation.
For instance, should the data be split in multiple series, if so how can it be injected in the middle of the other data points (still want the 80's to appear between the 70's monthly and 90's monthly data)? This is further complicated by the fact that the columns are stacked.
Cheers if you could follow this. A round if you could help me out ;)

Possible solutions:
Group the data outside of Highstock. Demo: http://jsfiddle.net/qsr1qzht/
Create another series so you could force two different data groupings. Demo: http://jsfiddle.net/w7sasofr/
plotOptions: {
column: {
grouping: false
}
},
series: [{
type: 'column',
data: getData(1970, 1979).concat(getData(1990, 1999)),
dataGrouping: {
forced: true,
units: [
['month', [1]]
]
},
color: '#66f'
}, {
type: 'column',
data: getData(1980, 1989),
dataGrouping: {
forced: true,
units: [
['year', [1]]
]
},
color: '#f66'
}]

Highstock area chart renders a gap, but there is data

My highstock chart isn't rendering properly. It shows some gap when my 2nd series start in the area chart. Even when zoomed in it's not showing properly. The timestamps are in UTC and have a value.
To clarify it a bit here some screenshots:
Normally not zoomed in:
Zoomed in a bit, and showing mouseover. Has only 1 series:
Zoomed in more, showing bigger gap, but has only 1 series:
Zoomed in more, showing bigger gap, but has only 1 series on same date:
I have the following options enabled on the graph:
chart: {
zoomType: 'x',
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal'
},
series: {
turboThreshold: 0,
dataGrouping: {
approximation: "high",
smoothed: true,
groupPixelWidth: 10,
units: [['day', [1]], ['week', [1]], ['month', [1]]]
}
}
}
Any suggestions how to resolve this?
Thanks!

Seems that disabling
plotOptions.series.dataGrouping.smoothed
does the trick.
So then a bug-report:
When
plotOptions.series.dataGrouping.smoothed = true
the graph renders gaps, where I would expect a line.

HighCharts - HighStock - Show Date for Candlestick & Volume

I'm using the HighCharts graphing software and am trying to show the date labels on the x axis below the stock graph; it currently shows below the volume graph only.
How can I do this?
Here are the chart options I am using (removed irrelevant ones to save space)
JSFiddle link below
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
JSFille Link

You can use two xAxis, like in the example: http://jsfiddle.net/sbochan/phtd7r1t/2/
xAxis: [{
offset: 15
},{
linkedTo:0,
offset: -76
}],

You could use some of the positioning options to achieve this. If the height is dynamic it might be a bit difficult, but for static height charts this approach should work fine.
First edit the yAxis[1].top to be '73%' (moving the "Volume" chart further down to create a gap).
Then offset your x-axis with xAxis: { offset: -81 } to move it in between the two charts.
See this JSFiddle demonstration of the result.

Highstock Column Chart - data grouping causes data to scroll independently of axis

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).