Using Highcharts with Rails 6 - javascript

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

Related

Boxplot in highcharts displaying incorrect values for high, and median

I am creating a box plot from a simple series of data:
var box_plot = Highcharts.chart(container, {
chart: {
type: 'boxplot'
},
title: {
text: chart_title
},
legend: {
enabled: false
},
series: [{
name: 'Observations',
data: [
[1,2,3,4,5,6,7,8,9,10,11,12,13]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}]
});
return box_plot;
But when the box plot is generated, the high is shown as 6 and median as 4. In the data the high is 13 and median is 6.
Please inform what I am doing wrong. Screenshot of code and box plot attached.
Thank You
You can provide data to boxplot series in two ways:
An array of arrays with 6 or 5 values. In this case, the values correspond to x,low,q1,median,q3,high. If the first value is a string, it is applied as the name of the point, and the x value is inferred. The x value can also be omitted, in which case the inner arrays should be of length 5. Then the x value is automatically calculated, either starting at 0 and incremented by 1, or from pointStart and pointInterval given in the series options.
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
An array of objects with named values. The following snippet shows only a few settings, see the complete options set below. If the total number of data points exceeds the series' turboThreshold, this option is not available.
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"
}]
Highcharts doesn't have any auto data calculation procedure in this case. You need to prepare the required data structure by yourself. For example:
const data = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
];
const processedData = data.map((dataEl, index) => ({
x: index,
low: Math.min(...dataEl),
median: dataEl[(dataEl.length - 1) / 2],
high: Math.max(...dataEl),
...
}));
Live demo: http://jsfiddle.net/BlackLabel/eqz4851x/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.data

Looking for customized Scatter plot Graph in High chart

In he picture we have values on X-Axis ass F1, F2, F3, and so on.
for example red dots denote value for F1.
For each X axis category the color for dots will be different.
We tried Highcharts Scatter graph but have no luck.
how can this be achieved.
You can use multiple scatter series with defined x and y values. Example:
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
series: [{
data: [
[0.9, 40],
[1, 15],
[1.05, 25],
[1.1, 10],
[2.9, 35],
[3, 35],
[3.1, 35]
]
}, {
data: [
[1.9, 25],
[1.95, 10],
[2, 35],
[2.1, 35]
]
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/4eszoy30/
API Reference: https://api.highcharts.com/highcharts/series.scatter.data

How to limit the data points to get display in highchart

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.

HighCharts - X axis labels spanning a range pending values

JS Fiddle: http://jsfiddle.net/yondaimehokage/nbxka08u/5/
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
},
yAxis: {
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [1, 0, 19], [2,0, 8], [3, 0, 24], [4, 0, 67], [5, 0, 2], [6, 0, 16], [7, 0, 10], [8, 0, 5], [9, 0, 50]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Is there a way to have an X axis label span a region of the x axis that is dependent on the values?
In short, I have a heat map graph using HighCharts. I want to try to achieve something like this (sorry for the Windows Paint rendering):
So depending on the values, the X axis color would vary and the centering of the label would be relative to the span of the values that correspond to that data label.
Any thoughts how this could be done? Tick marks won't do, and this is not a regular interval that I would need to labels to appear either.
Edit: Based on a comment, I guess I need to figure out a way to calculate the pixel width that a range of X value "bars" take up. So how many pixels do the "bars" that the points that have X values of 1 to 10 take up, how many pixels do the "bars" that the points that have X values of 11 to 25 take up, and so on.

How to use an array inside a multidimensional array?

If I have an array like so:
var phpintojsArray = [["1","20"]];
and... I also have a multid-array:
var data = [[1,20], [4, 20], [7, 55], [9, 10], [9, 10]];
how to add the phpintojsArray into the data array? I want:
var data = [[phpintojsArray], [1,20], [4, 20], [7, 55], [9, 10], [9, 10]];
What is one way to accomplish this?
Clarification -- Trying to manipulate the data in a chart
This works:
/* Bar Chart */
var data = [[1, 10],[3, 60], [5, 20], [7, 50], [9, 10]];
// Initialize Bars Chart
$.plot(BarChart, [
{ data: data, bars: { show: true, fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] } }, label: 'Example label' } ],
{
legend: {
backgroundColor: '#f6f6f6',
backgroundOpacity: 0.8
},
colors: ['#39d5db'],
grid: {
borderColor: '#cccccc',
color: '#999999',
labelMargin: 10
},
yaxis: {
ticks: 5
},
xaxis: {
tickSize: 1
}
}
);
This does Not work:
var phpintojsArray = <?= json_encode($sales); ?>;
var two = [3, 60];
var three = [5, 20];
var four = [7, 50];
var five = [9, 10];
/* Bars Chart */
var data = [[phpintojsArray], [two], [three], [four], [five]];
// Initialize Bars Chart
$.plot(BarChart, [
{ data: data, bars: { show: true, fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] } }, label: 'Example label' } ],
{
legend: {
backgroundColor: '#f6f6f6',
backgroundOpacity: 0.8
},
colors: ['#39d5db'],
grid: {
borderColor: '#cccccc',
color: '#999999',
labelMargin: 10
},
yaxis: {
ticks: 5
},
xaxis: {
tickSize: 1
}
}
);
Why?
You can use splice to insert the elements:
data.splice(0, 0, phpintojsArray);
This works:
/* Bar Chart */
var data = [[1, 10],[3, 60], [5, 20], [7, 50], [9, 10]];
This does Not work:
/* Bars Chart */
var data = [[phpintojsArray], [two], [three], [four], [five]];
Why?
Because the two expressions yield different structures. In the first one you have two levels of nested arrays (small arrays inside a big one). In the second you have three levels of nested arrays.
A simple console.log will show you the difference.
Make sure that your data is in the correct structure. Change it to:
var data = [two, three, four, five];
(In case it's still not clear, the brackets [] define a new array)
Regarding your question on how to prepend phpintojsArray, you could do:
Array.prototype.unshift.apply(data, phpintojsArray);
You could use eval in javascript.
For Example:
var data = [[eval("phpintojsArray")], [eval("two")], [eval("three")], [eval("four")], [eval("five")]];

Categories