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

Zingchar - using rules with scatter chart

I am using zingchart's scatter chart to visualize my datas. I want to change color of some datas with value greater than for example 60. Is it possible? Here is my code, but it doesn't work:
var myConfig = {
"type": "scatter",
"plot": {
"tooltip": {
"text": "%k (Date), %v (Value)."
},
"rules": [
{
"rule": "%v > 60",
"scatter-color": "#c00"
}
]
},
"series": [
{
"values": c
}
],
"title" : {
"text" : qualityData.ParameterName
},
"scale-x": {
"zooming": true,
"step": "1hour",
"transform": {
"type": "date",
"all": "%d.%m.%Y %H:%i:%s"
}
},
"scale-y": {
"zooming": true,
"markers": [
{
"type": "line",
"line-width": 2,
"text": "Lower tolerance",
"range": [qualityData.ToleranceMin, qualityData.ToleranceMin],
"line-color": "red"
},
{
"type": "line",
"line-width": 2,
"text": "Upper tolerance",
"range": [qualityData.ToleranceMax, qualityData.ToleranceMax],
"line-color": "red"
}
],
},
"preview": {
"visible": true
}
};
And here is how my chart looks like:

Quick Fix
You need to move rules into the plot.marker object and you need to change scatter-color to backgroundColor.
Conditional Styling
You can implement your conditional styling in two ways:
rules
jsRule
rules attribute
Define a rule like you have above and it will run an if statement on each node. You can have multiple rules and an easy semantic way to define conditional styling.
Docs here: https://www.zingchart.com/docs/tutorials/elements/rules
Demo here: https://app.zingsoft.com/demos/create/J6W2EALF
jsRule attribute
A Javascript alternative to rules which is much more performant. rules are an if statement that gets run every node. So if you have lots of nodes, you will have lot of code execution, thus slowing down your chart.
Docs here: https://blog.zingchart.com/make-a-custom-tooltip/
Demo here: https://app.zingsoft.com/demos/create/T8WOXT5V
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'scatter',
globals: {
fontSize: '14px'
},
title: {
text: 'A Simple Scatter Chart',
fontSize: '24px'
},
legend: {
cursor: 'hand',
draggable: true
},
// plot represents general series, or plots, styling
plot: {
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: '%plot-text %kl was %v (°F)',
padding: '10px 15px',
borderRadius: '3px',
// htmlMode renders text attribute as html so
// ° is rendered
htmlMode: true
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_SLIDE_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 375
},
lineWidth: '3px',
// line node styling
marker: {
borderWidth: '0px',
size: '6px',
rules: [
{
rule: '%v > 40',
backgroundColor: '#000'
},
{
rule: '%v < 20',
backgroundColor: '#000'
}
],
}
},
scaleX: {
// set scale label
label: {
text: 'Days'
},
// convert text on scale indices
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
scaleY: {
// scale label with unicode character
label: {
text: 'Temperature (°F)'
},
markers: [
{
type: 'line',
lineWidth:2,
range: [40],
label: {
text: 'Upper Tolerance'
}
},
{
type: 'line',
lineWidth:2,
range: [20],
label: {
text: 'Lower Tolerance'
}
}
]
},
series: [
{
values: [[1, 9], [2, 15], [3, 21], [4, 30], [5, 40], [6, 59], [7, 60], [8, 75], [9, 81], [10, 99]]
},
{
values: [[0.9, 3], [2.1, 13], [3.5, 25], [4.9, 35], [5.3, 41], [6.5, 57], [7.1, 61], [8.7, 70], [9.2, 82], [9.9, 95]]
},
{
values: [[0.1, 9], [1.8, 21], [1.9, 29], [4.1, 33], [4.5, 39], [6.9, 51], [7.4, 64], [8.9, 70], [9, 75], [9.3, 93]]
},
{
values: [[0.3, 11], [0.9, 15], [1.1, 24], [2.3, 29], [2.9, 30], [3.3, 35], [5.6, 67], [6.9, 70], [7.3, 71], [8.9, 90]]
},
{
values: [[0.5, 5], [1.9, 5], [2.5, 10], [3.1, 30], [6.5, 45], [6.9, 74], [7.2, 50], [7.8, 56], [8, 61], [8.5, 71]]
}
]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>

Flot line chart issue

I need to create a line chart like in the image:
What I have achieved till now is
var line_opt = {
series: {
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 0,
max: 6,
autoscaleMargin: .5,
labelWidth: -15,
tickLength: 0,
tickFormatter: function suffixFormatter(val, axis) {
return (val.toFixed(0));
}
},
xaxis: {
tickSize: 1
}
};
var lineData = [
[1, 5], [2, 4], [3, 4], [4, 4], [5, 3], [6, 4], [7, 4], [8, 3], [9, 4], [10, 3],
[11, 3], [12, 4], [13, 4], [14, 3], [15, 3], [16, 3], [17, 3], [18, 3], [19, 4], [20, 3],
[21, 3], [22, 3], [23, 3], [24, 2], [25, 2], [26, 3], [27, 2], [28, 2], [29, 2]
];
Is there any way that the X axis lines start from the bottom of the chart and end where the point is (like in the first image) and also hide the x axis labels without the lines?

This can be achieved with different options (removing the gridlines) and using markings to fake the gridline only up to the chart:
Code (see this fiddle for the working demo):
var line_opt = {
series: {
lines: {
show: true
},
points: {
show: false
}
},
grid: {
backgroundColor: { colors: ["#fff", "#ddd"] },
hoverable: true,
clickable: true,
borderWidth: 0,
markings: []
},
yaxis: {
min: 0,
max: 6,
autoscaleMargin: .5,
//labelWidth: -15,
tickLength: 0,
tickFormatter: function suffixFormatter(val, axis) {
return (val.toFixed(0));
}
},
xaxis: {
ticks: false,
autoscaleMargin: .01,
tickSize: 1,
tickLength: 0 // only needed if ticks is not false
}
};
var lineData = [ ... ];
for (var i=0; i < lineData.length; i++){
line_opt.grid.markings.push({
xaxis: { from: lineData[i][0], to: lineData[i][0] },
yaxis: { from: 0, to: lineData[i][1] },
lineWidth: 1,
color: "#aaaaaa"
});
}

Reading the API documentation, it should be possible.
For the lines ending where the point is, use the grid options, the aboveData:
grid: {
show: boolean
aboveData: boolean
color: color
backgroundColor: color/gradient or null
labelMargin: number
axisMargin: number
markings: array of markings or (fn: axes -> array of markings)
borderWidth: number
borderColor: color or null
minBorderMargin: number or null
clickable: boolean
hoverable: boolean
autoHighlight: boolean
mouseActiveRadius: number
}
You shouldn't need an xaxis for anything at that point, you can just hide it:
xaxis, yaxis: {
show: null or true/false

Flot Bar Chart - how to create non stack up values

I'm new to flot. I have this bar chart:
and here is the code I used for it:
$.getJSON('chartBar.json', function(graphDataBar){
$.plot($('#graph-bars'), graphDataBar, {
series: {
bars: {
show: true,
barWidth: .1,
align: 'right'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']],
min: 5.5,
max: 10.5,
mode: 'time',
timeformat: "%b %d",
minTickSize: [1, "day"],
tickSize: [1, "day"],
autoscaleMargin: .10
},
yaxis: {
tickSize: 5
}
});
I ve tried to use the properties inside x-axis but nothing seems to help.
I know there is a way to do it, I ve seen examples such as This one.
But it doesnt seem to work.
What Im trying to succeed here is this
As well I ve seen other sample on Stackoverflow like This
But it still didnt work out. Im not sure if I see this the wrong way, or if I need to use the timestamp in order to make it work, but I do it the wrong way.
Could anyone explain to me how the solution would work? I would like to understand it for future Bar Charts
Thank you in advance

I've made an assumption that the JSON data is the same as in your other question here so apologies if this is not the case.
I've created a Fiddle here that demonstrates the "non stacked bars" using the following JSON data:
[
{
"data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
"color": "#F02626",
"points": { "fillColor": "#F02626", "radius": 6 },
"lines": { "fillColor": "#CCF8FF"}
},
{
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
"color": "#26F041",
"points": { "radius": 10, "fillColor": "#26F041" }
},
{
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
"color": "#20AEFA",
"points": { "radius": 6, "fillColor": "#20AEFA"}
}
]
This uses the orderBars plugin. The key to getting the bars to appear side by side (rather than vertically) is to set the series.bars.order attribute to 1:
series: {
bars: {
...
order: 1
}
},

Line chart not drawn to scale

Is there any way that this chart is not drawn to scale?
http://forum.highcharts.com/resources/image/4227
I need every point occupies a separate row and evenly.
That is, in this graph, it should appear one line for each of the first 2 points of each series and the vertical distance between each should be the same as the distance between the lines below.
The series are dynamically loaded and the number of points each serie is variable.
http://jsfiddle.net/fpanci/yL6mw/
$(function () {
$(document).ready(function() {
$("#container").highcharts({
chart: {
inverted: true,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ' ',
x: -20 //center
},
xAxis: {
minorGridLineColor: '#000000',
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 1,
tickInterval: 1,
labels: { enabled: true },
maxPadding: 0.05,
min: 0
},
yAxis: {
title: { text: ' ' },
plotLines: [{
value: 0,
width: 1,
color: '#C0C0C0'
}],
labels: { enabled: true },
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 20,
tickInterval: 20,
min: 0,
max: 100
},
exporting: { enabled: false },
tooltip: { enabled: false },
legend: { enabled: false },
series: [{
color: '#0000FF',
connectNulls: true,
data: [[0.2, 24.25], [0.5, 30.61], [1, 43.61], [2, 34.51], [3, 32.39], [4, 36.47], [5, 36.4], [6, null], [7, 24.68], [8, 37.79]]
},{
color: '#980000',
dashStyle: 'shortdot',
connectNulls: true,
data: [[0.2, 38], [0.5, 52], [1, 50], [2, null], [3, 32], [4, null], [5, 34], [6, null], [7, 25], [8, null]]
},{
color: '#38761D',
dashStyle: 'ShortDashDotDot',
connectNulls: true,
data: [[0.2, 20], [0.5, 27], [1, 35], [2, null], [3, 29], [4, null], [5, 30], [6, null], [7, 22], [8, null]]
}]
});
});
});
Thanks!

The data is plotting exactly where you've told it to.
Your first 2 x values in each data set are 0.2 and 0.5 - so that is where the points are plotted.
If you don't want them plotted that way, just remove the x values from the data, and they will plot in sequence.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/1/
If you want to have the 0.2 and 0.5 as axis labels, but want them evenly spaced still, you'll need to use categories for your x axis.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/2/