We Keep Coding

Highcharts Stacked column Chart in grouped format

I need to design the same below image chart example in Highchart.js which is built in excel. Can anyone please help me to develop this in highcharts.js only like the below image?
Image Preview
I already have implemented it in a similar way. But I need this in a different group of colors and combinations in the same chart. -
`https://jsfiddle.net/shwetapandey/rwmxoka5`

I suggest to add new series, with different xAxis, series.columnrange.xAxis. To styling you have options to adjust like xAxis.left and xAxis.top.
chart: {
type: 'columnrange',
},
xAxis: [{
width: '33%',
offset: 0,
}, {
left: '50%',
width: '33%',
offset: 0,
}],
plotOptions: {
xAxis: {
labels: {
enabled: true
}
},
columnrange: {
grouping: false,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Joe',
color: '#E5DDE3',
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
]
},
{
name: 'Jane',
color: '#BEA9BA',
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#A5879E',
name: 'John',
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
},
{
name: 'Joe1',
color: '#FFA500',
xAxis: 1,
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
].reverse()
},
{
name: 'Jane1',
color: '#FFA500',
xAxis: 1,
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#FFA500',
name: 'John1',
xAxis: 1,
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
}
]
Demo: https://jsfiddle.net/BlackLabel/cpjgvds9/
To control each series you need to write a custom legend control, for this you can use legend.labelFormatter, that give you callback function to format each of the series' labels.
EDIT ------
To control many group series I used callback function events.legendItemClick builded in series events. They give way to manage series at legend in that case I compare name of series and index of items to hide and show group of series with custom legend.
events: {
legendItemClick: function() {
let name = this.name.substring(this.name.length - 1, this.name.length);
let _i = this._i;
this.chart.series.forEach(function(p, i) {
console.log('p: ', p, 'i: ', i);
if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
(!p.visible) ? p.show(): p.hide()
}
})
}
}
Demo: https://jsfiddle.net/BlackLabel/v0kt5b14

How to plot heatmap on a image using plotly in javascript?

How to plot heatmap on an image using the Plotly.js,
main aim is to the plot the heatmap on the mobile view.
for example, these are some data points.
var data: any = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1], [782, 452, 29], [452, 128, 57]],
type: 'heatmap'
}
];
some useful link
https://plotly.com/javascript/heatmaps/

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

javascript flot threshold for dynamic data value

Here is my plot data
var data = [{
data: [[4, 80], [8, 50], [9, 130]],
color: "rgb(30, 180, 20)",
threshold: {
below: 100,
color: "rgb(200, 20, 30)"
}
}]
var bar = $.plot("#placeholder", data);
and if i change the value of data in a button click like
data= [[4, 130], [8, 50], [9, 130]];
bar.setData([data]);
bar.draw();
});
The treshold value didnt work , if there is a way to acheive this.

You aren't updating the data correctly. You are initially giving flot a series object with threshold settings, when you setData though, you are giving it an array without those settings.
Do this instead to preserve your series options:
someData = somePlot.getData();
someData[0].data = [[4, 130], [8, 50], [9, 130]];
somePlot.setData(someData);
somePlot.draw();
Here's an example.
EDITS
If you don't like the getData call, leave your master data variable in scope and update that as #Raidri hinted at:
var masterData = [{
data: [[4, 80], [8, 50], [9, 130]],
color: "rgb(30, 180, 20)",
threshold: {
below: 100,
color: "rgb(200, 20, 30)"
}
}]
// later ...
masterData[0].data = [[4, 130], [8, 50], [9, 130]];
somePlot.setData(masterData);
somePlot.draw();
The important part is to leave your threshold series options intact in the setData call.

Have you tried calling bar.setupGrid() before the bar.draw()?
If that doesn't help, you make a complete new plot:
data[0].data = [[4, 130], [8, 50], [9, 130]];
bar = $.plot("#placeholder", data)

Displaying bars with flot

Issue with my xaxis ticks, only the first tick shows at the far right of the graph, and no bars are plotted. I have a feeling i'm missing something obvious.
Desired solution: Show all the xaxis ticks and plot the bars accordingly
Associated code:
$.plot($("#chart"), results, {
grid: {
hoverable: true,
aboveData: true
},
xaxis: {
ticks: [
[1, "AL"],
[2, "AZ"],
[3, "CA"],
[4, "CO"],
[5, "CT"],
[6, "DE"],
[7, "FL"],
[8, "GA"],
[9, "HI"],
[10, "IA"],
[11, "IL"],
[12, "IN"],
[13, "KS"],
[14, "KY"],
[15, "LA"],
[16, "MA"],
[17, "MD"],
[18, "ME"],
[19, "MI"],
[20, "MN"],
[21, "MO"],
[22, "MS"],
[23, "NC"],
[24, "NE"],
[25, "NJ"],
[26, "NM"],
[27, "NY"],
[28, "OH"],
[29, "OK"],
[30, "OR"],
[31, "PA"],
[32, "RI"],
[33, "SC"],
[34, "TN"],
[35, "TX"],
[36, "UT"],
[37, "VA"],
[38, "WA"],
[39, "WV"]
],
tickSize: 1,
tickLength: 1
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "ne",
margin: [-100, 0]
},
series: {
bars: {
show: true,
align: "center",
horizontal: "true"
}
}
});
JSFiddle: http://jsfiddle.net/emaM7/

I think the problem may be simply that you're using non-numeric X values in your data. I added this code before the plot call:
for (i = 0; i < results.length; i++) {
for (j = 0; j < results[i].data.length; j++) {
results[i].data[j][0] = j;
}
}
with this a graph shows up as do the labels.
You'll probably want to use slightly more complex logic to select the proper numeric code for each state, as what I wrote won't work if you have states missing or out of order in the 'results' object.