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

flotcharts - yaxis tick names not aligned to bars

I'm using this code to get my chart working
var d1 = [
[0, 3],
[1, 8],
[2, 5]
];
var d2 = [
[0, 3],
[1, 8],
[2, 5]
];
var d3 = [
[0, 3],
[1, 8],
[2, 5]
];
var d4 = [
[0, 3],
[1, 8],
[2, 5]
];
function plotWithOptions() {
$.plot("#placeholder", [
{ label: "novo", data: d1 },
{ label: "revisao", data: d2 },
{ label: "bla1", data: d3 },
{ label: "bla2", data: d4 },
], {
series: {
stack: 0,
bars: {
show:true,
horizontal:true,
}
},
yaxis: {
tickLength: 1,
gridLines: false,
ticks: [
[0, 'Bob'],
[1, 'Chris'],
[2, 'Joe'],
]
}
});
}
$(document).ready(function(){
plotWithOptions();
});
The problem is that the tick names are not aligned to bars.
Am I doing something wrong?

Bar Chart: How to update the chart?

I am using this plugin for the bar chart. I need to update the values day, week and month wise but the update function inside the plugin is not working.
Here is the codepen.
HTML
<div id="chart">
<h2 class="section-title">Images processed</h2>
<div class="cal-options">
<span>Day</span>
<span>Week</span>
<span class="active">Month</span>
</div>
</div>
JS
if($('#chart').length){
$('#chart').barChart({
height : 388,
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["May",33],
["June",11],
["July",23],
["August",16],
["September",28],
["October",21],
["November",32],
["December",19],
["January",13],
["February",19],
["March",24],
["April",18],
]
},
{
name : 'Dataset 2',
values : [
["May",5],
["June",5],
["July",5],
["August",5],
["September",5],
["October",5],
["November",5],
["December",5],
["January",5],
["February",5],
["March",5],
["April",5],
]
},
],
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
$(".cal-options span").each(function(){
$(this).click(function(){
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = {
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["new-May",33],
["new-June",11],
["new-July",23],
["new-August",16],
["new-September",28],
["new-October",21],
["new-November",32],
["new-December",19],
["new-January",13],
["new-February",19],
["new-March",24],
["new-April",18],
]
},
{
name : 'Dataset 2',
values : [
["new-May",5],
["new-June",5],
["new-July",5],
["new-August",5],
["new-September",5],
["new-October",5],
["new-November",5],
["new-December",5],
["new-January",5],
["new-February",5],
["new-March",5],
["new-April",5],
]
},
],
}
// $("#chart").barChart({
// update: function(){};
// })
});
});
Not able to update the chart when clicked on the Day, Week, Month buttons. Can someone please help?

Draw a graph using a function of type with a new value. The following code shows how to do it.
var options = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["May", 33],
["June", 11],
["July", 23],
["August", 16],
["September", 28],
["October", 21],
["November", 32],
["December", 19],
["January", 13],
["February", 19],
["March", 24],
["April", 18],
]
},
{
name: 'Dataset 2',
values: [
["May", 5],
["June", 5],
["July", 5],
["August", 5],
["September", 5],
["October", 5],
["November", 5],
["December", 5],
["January", 5],
["February", 5],
["March", 5],
["April", 5],
]
},
]
if ($('#chart').length) {
DrawChar(options)
}
$(".cal-options span").each(function() {
$(this).click(function() {
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["new-May", 33],
["new-June", 11],
["new-July", 23],
["new-August", 16],
["new-September", 28],
["new-October", 21],
["new-November", 32],
["new-December", 19],
["new-January", 13],
["new-February", 19],
["new-March", 24],
["new-April", 18],
]
},
{
name: 'Dataset 2',
values: [
["new-May", 5],
["new-June", 5],
["new-July", 5],
["new-August", 5],
["new-September", 5],
["new-October", 5],
["new-November", 5],
["new-December", 5],
["new-January", 5],
["new-February", 5],
["new-March", 5],
["new-April", 5],
]
},
];
DrawChar(newoptions);
});
});
function DrawChar(chartoptions) {
$('#chart').barChart({
height: 388,
bars: chartoptions,
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}

How to insert values in bars (flotcharts)

I have some problems to show some values in bars. I want a chart like this: Example. I don't know what I'm missing in here.
$('#myModalChart').on('shown.bs.modal', function (e) {
var data = [{
label: "Foo",
data: [
[2],
[3, 9, 12],
[6, 0, 3],
[9, 11, 12],
[12, 0, 1],
[15, 0, 2],
[18],
[3, 12, 12],
[9, 12, 12]
]
},
{
label: "Bar",
data: [
[2],
[3, 0, 5],
[6, 3, 7],
[9, 4, 11],
[12, 1, 3],
[15, 2, 5],
[18]
]
},
{
label: "Tree",
data: [
[2],
[3, 5, 9],
[6, 7, 15],
[9, 0, 4],
[12, 3, 13],
[15, 5, 17],
[15, 17, 17],
[12, 13, 13],
[6, 15, 15],
[18]
]
},];
var options = {
series: {
bars: {
show: true,
barWidth: 1
}
},
xaxis: {
align: "center",
ticks: [
[3.5, 'text1'],
[6.5, 'text2'],
[9.5, 'text3'],
[12.5, 'text4'],
[15.5, 'text5']
]
}
};
var plot = $.plot("#chart2", data, options)
});
I want a chart like this, with labels in it. And I wish have in all of them.
What I'm missing?

You have to create and place the data value labels yourself. How to do this can be seen in this answer.
I created a fiddle adjusting it to your code. Only the first data series (foo) has labels for now. you will have to adjust the position. The relevant code:
$.each(plot.getData()[0].data, function (i, el) {
if (el.length > 1) {
var o = plot.pointOffset({
x: el[0],
y: el[1]
});
$('<div class="data-point-label">' + el[1] + '</div>').css({
position: 'absolute',
left: o.left + 4,
top: o.top,
'text-align': 'center',
display: 'none'
}).appendTo(plot.getPlaceholder()).fadeIn('slow');
}
});
But you may also have to cleanup your data. You have multiple data points with the same x values (which means bars behind / in front of each other which leads to some being invisible). Take a look at the side-by-side and stack plugins on the flot plugin page.

Why doesn't this script print out any graphs? Flot Jquery

This script below is printing out the checkboxes but isn't plotting anything in the graph window.
if (key && allDataSets[key])
data.push(allDataSets[key]);
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="root/include/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="root/include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="root/include/jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Here is an example with real data: military budgets for
various countries in constant (2005) million US dollars (source: SIPRI).</p>
<p>Since all data is available client-side, it's pretty easy to
make the plot interactive. Try turning countries on/off with the
checkboxes below.</p>
<p id="choices">Show:</p>
<script type="text/javascript">
$(function () {
var Test1 = {
"date": {
label: "Date",
data: [[1, 20110122], [2, 20110123], [3, 20110124], [4, 20110125]]
},
"time": {
label: "Time",
data: [[1, 22.12], [2, 22.12], [3, 22.12], [4, 22.12]]
},
"modules": {
label: "Modules",
data: [[1, 22], [2, 22], [3, 22], [4, 22]]
},
"cases": {
label: "Cases",
data: [[1, 1312], [2, 1312], [3, 1312], [4, 1312]]
},
"failed": {
label: "Failed",
data: [[1, 75], [2, 77], [3, 64], [4, 55]]
},
"cover": {
label: "Cover",
data: [[1, 13.55 ], [2, 23.55], [3, 33.55], [4, 43.55]]
}};
var Test2 = {
"date": {
label: "Date",
data: [[1, 20110122], [2, 20110123], [3, 20110124], [4, 20110125]]
},
"time": {
label: "Time",
data: [[1, 22.12], [2, 22.12], [3, 22.12], [4, 22.12]]
},
"modules": {
label: "Modules",
data: [[1, 22], [2, 22], [3, 22], [4, 22]]
},
"cases": {
label: "Cases",
data: [[1, 1312], [2, 1312], [3, 1312], [4, 1312]]
},
"failed": {
label: "Failed",
data: [[1, 75], [2, 77], [3, 64], [4, 55]]
},
"cover": {
label: "Cover",
data: [[1, 13.55 ], [2, 23.55], [3, 33.55], [4, 43.55]]
}};
var Test3 = {
"date": {
label: "Date",
data: [[1, 20110122], [2, 20110123], [3, 20110124], [4, 20110125]]
},
"time": {
label: "Time",
data: [[1, 22.12], [2, 22.12], [3, 22.12], [4, 22.12]]
},
"modules": {
label: "Modules",
data: [[1, 22], [2, 22], [3, 22], [4, 22]]
},
"cases": {
label: "Cases",
data: [[1, 1312], [2, 1312], [3, 1312], [4, 1312]]
},
"failed": {
label: "Failed",
data: [[1, 75], [2, 77], [3, 64], [4, 55]]
},
"cover": {
label: "errover",
data: [[1, 13.55 ], [2, 23.55], [3, 33.55], [4, 43.55]]
}};
var allDataSets = [Test1,Test2,Test3];
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
for(j=0; j<allDataSets.length; j++){//Going through all datasets, are there any other more simple way to do this???
var i = 0;
$.each(allDataSets[j], function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(allDataSets[j], function(key, val) {
choiceContainer.append('<br/><input type="checkbox" name="' + key +
'" checked="checked" id="id' + key + '">' +
'<label for="id' + key + '">'
+ val.label + '</label>');
});
/**************************Here the script stops working???**********************/
choiceContainer.find("input").click(plotAccordingToChoices);
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && allDataSets[j][key])
data.push(allDataSets[j][key]);
});
if (data.length > 0)
$.plot($("#placeholder"), data, {
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 }
});
}
plotAccordingToChoices();
}
});
</script>
</body>
</html>
/***********EDIT****************/
OK so I solved the first issue with was simply replacing allDataSets[key] with allDataSets[j][key]
But as i now uncheck a checkbox I get the following error line 134 allDataSets[...] is null or not an object. Why do I get this error? In other words its this line that is incorrect when I uncheck a checkbox if (key && allDataSets[j][key])

Three things you need to do:
Declare that loop variable "j" with the var keyword.
for(var j=0; j<allDataSets.length; j++) {
All that code after your comment line - the click handler etc - needs to move out of that loop.
Inside the click handler, the code needs to iterate over "allDataSets" and then look for the key in each one:
choiceContainer.find("input:checked").each(function() {
var key = $(this).attr("name");
$.each(allDataSets, function(_, set) {
if (set[key]) data.push(set[key]);
});
});
Here is the jsfiddle demonstrating the changes. You'll note that it looks terrible. That's because your "allDataSets" re-uses the same keys for each clump. I have no idea what you're trying to achieve, but those changes will at least make something show up.