How to limit the data points to get display in highchart - javascript

I have a requirement to limit the data points in highchart when it displayed due to space issue. Let's say if I have 100 data points in one series. I just want to display first 5 and when clicking on the expand button(I need to add a expand button in the chart) the highchart will display with all 100 points. (The expanded view will be in a modal window and the modal window will have the full hight).
I know the series are complex like, I can have multiple series in the to chart like this
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
and I can have complex data model like this
1.data: [1052, 954, 4250, 740, 38]
2.data: [[5, 2], [6, 3], [8, 2]]
3.
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
Note: Am not setting the series, am creating a widget in JavaScript which includes Highchart inside it. I can override the Highchart code for this.

Related

Chart.js: Sort the stacked bars by value

I have the following stacked bar chart with the sample data. I want that per year (label) the individual stacked bars are sorted by the value. E.g. for 2019 the bar should be (form top to bottom) red (50), blue (20) and black (10).
https://jsfiddle.net/7rna08dm/2/
How can I achieve this? Is there the possibility to do this with the datasets property? Or is there any bar sorting property?
Currenctly I'm using the following data structure and didn't find a solution to achieve the expected behaviour with sorting the data:
data: {
labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
datasets: [
{
label: 'Max',
data: [0, 0, 50, 10, 0, 70],
backgroundColor: 'red',
},
{
label: 'Peter',
data: [10, 0, 20, 30, 0, 0],
backgroundColor: 'blue',
},
{
label: 'Dave',
data: [0, 0, 10, 20, 0, 30],
backgroundColor: 'black',
},
],
},

Using Highcharts with Rails 6

I have a Rails 6 app in which I am using Highcharts. I'm using plain JavaScript at the moment, then I'll transition to the highchart gem when I have the chart exactly how I want it. I have the chart almost exactly how I want it to render except for two things:
How can I use two different colors for a scatter chart?
How can I have just two lines bisecting my chart?
My data, at the moment is just a hard-coded array of arrays, something like this: [[3, 5], [7, 3], [22, 10], [35, 35], [10, 5], [10, 7]]. I would like to split the array in two and use two different colors for the points on the scatter chart.
For the lines, I would only like to show a line on the 'y' axis at point 50 (my y axis goes from 0 to 100) and one line on the 'x' axis at point 100 (my x axis goes from 0 to 200). Currently, I have both the lines on point 0.
Split your data into two series and set individual color for them.
Set gridLineWidth to 0 for both axes and add the lines by plotLines.
chart: {
type: 'scatter',
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
plotLines: [{
value: 50
}]
},
xAxis: {
min: 0,
max: 200,
gridLineWidth: 0,
plotLines: [{
value: 100
}]
},
series: [{
color: 'red',
data: [
[3, 5],
[7, 3],
[22, 10]
]
}, {
color: 'blue',
data: [
[35, 35],
[10, 5],
[10, 7]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/vm9Lrgds/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines

How to set the x axis of HighCharts to intake DateRange

I am trying to display a series of data for a specific set of Dates, say for 15 or 30 Days. Now, I don't want to display all these dates on x-axis instead, because that will be too many and it will be difficult to understand, instead want to plot it on intervals so that y-axis data can fit correctly.
Below is how I was displaying everything which is looking clumsy and difficult to read
"xAxis": {
categories: [
'10 June',
'12 June',
'14 June',
'16 June',
'18 June',
'20 June',
'22 June'
]
},
"series": [
{
name: 'Total Students',
data: [1, 2, 1, 4, 3, 60]
}
]
Is there a way to make the x-axis populate dynamically to display a large range of dates? Kindly suggest.
You can use 'datetime' axis type and set x and y data in this way:
xAxis: {
type: 'datetime'
},
series: [{
name: 'Total Students',
data: [
[Date.UTC(2013, 8, 16), 0.7500],
[Date.UTC(2013, 8, 17), 0.7486],
[Date.UTC(2013, 8, 18), 0.7396],
[Date.UTC(2013, 8, 19), 0.7391],
[Date.UTC(2013, 8, 20), 0.7394],
]
}]
Live demo: http://jsfiddle.net/BlackLabel/xq52vagL/
API Reference: https://api.highcharts.com/highcharts/xAxis.type

ECharts- How to show horizontal scroll bar with 3 lines of legend, and after that scroll if items doesn't fit in 3 lines

I am using ECharts to show the trend data in line chart. I have 50 series to show in the line chart. Every series has a legend to show. I want to show the legends on top of the chart. But, I want to show the legends in maximum 3 lines. And if legends doesn't fit in the 3 lines then I want to show the vertical scroll. But, I am not able to show the vertical scroll with maximum of 3 lines of legends. Every line should show more than one legend in it.
I tried with vertical and horizontal scroll. In vertical scroll, it shows only one legend in one line. this is the problem. Actually, ECharts should show the what ever possible legends in one line. If there is enough space to have 2 legends in one line, it should show 2 legends in one line. It should show 3 lines and if all legends doesn't fit in three lines, then should add vertical scroll. But, currently legends overlap to chart.
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: [{
left: 'left',width:'50%',
type:'scroll',
orient:'vertical',
height:'100',
selectedMode:'multiple',
//pageButtonPosition:'end',
//formatter:'legend {name} ',
data: ['saaaaaaaaaaaaaaa0', 'saaaaaaaaaaaaaaa1','saaaaaaaaaaaaaaa2','saaaaaaaaaaaaaaa3'
,'saaaaaaaaaaaaaaa4','saaaaaaaaaaaaaaa8'
, 'saaaaaaaaaaaaaaa9','saaaaaaaaaa10','saaaaaaaaaa13','saaaaaaaaaa14','saaaaaaaaaa11'
, 'saaaaaaaaaa12','saaaaaaaaaa15','saaaaaaaaaa16'
,'saaaaaaaaaa17'],
},
{
left: 'right',width:'50%',height:'auto',
data: ['saaaaaaaaaaaaaaa5','saaaaaaaaaaaaaaa6','saaaaaaaaaaaaaaa7'],
}
],
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
},
grid: {
height:'auto'
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: 'saaaaaaaaaaaaaaa0',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa1',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa2',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa3',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa4',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa5',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa6',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa7',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa8',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa9',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa10',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa11',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaa12',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa13',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa14',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa15',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
}
]
};
I'm pretty sure that you are trying to do something that is not supported by ECharts yet.
Programmatically speaking:
You cannot get how many items are fit in one single line.
For the reason above, you can't know how many lines you have in the legend block.
There is no max-line or max-items-per-line control yet.
I guess the best you can do is to make 3 legend blocks that you place vertically with legend.left and legend.top pixel configurations, and put parts of your whole legend data into those blocks. The first legend.data would contain the first 3 items of your base array, the second legend.data would contain the 3 next ones... And control the contents externally by adding/removing items from each legend.data.
This is clearly not a good solution anyway. The scroll would look buggy.
I suggest you to post a clear example and use case of your idea on their official feature request form, this is the best way for you to get this functionality without coding a huge and unscalable workaround.

Highcharts fill bar background

Hi guys I have a highcharts graph that is a stacked bar and I am trying to give my chart the effect that it is being filled, almost like a thermometer. Currently when the chart draws the red and gray bars push everything to the right. Is there a way that I can set the gray bar so that it shows right away on page load, and then the red bar fills into the gray bar? Thanks
http://jsfiddle.net/jimbob25/L974T/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderRadius: 5,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderRadius: 5
}]
Update, I would like it to look like the first bar in the following link
http://jsfiddle.net/L974T/3/
You can see that the first bar is grey, i can make the rest gray and it would be fine, but the bars would not scale based off of resolution
Here is what you can do:
add one more series, with different stack (as background) - animation for that series should be disabled (duplicated of gray one)
change color for right-hand series to transparent
And here is working code: http://jsfiddle.net/L974T/4/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderWidth: 0,
borderRadius: 5
}]

Categories