Highchart heatmap plot x-axis on time and y-axis on string - javascript

Actually, I was trying to create a heatmap which will show each task time taken to execute in a heatmap.
So basically x-axis will have time in datetime format.y-axis will have each task name and every point will have value which is the time taken to execute the task.
In simple i have formatted my json where data is coming in format
[{datetime,stage name,value}]
So my xCategory will look like
xCategory=[1527657415000,..some datetime]
my yCategory is
yCategories=["Stage"...]
and series.data=[[0,0,12],[0,1,12]..]
My chart
var chart = new Highcharts.Chart('chart', {
chart: {
type: 'heatmap'
},
xAxis: {
// categories: xCategories,
type: 'datetime',
dateTimeLabelFormats:
{
month: '%e. %b',
year: '%b'
},
},
yAxis: {
// categories: yCategories
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: series
});
But it is not coming up properly.

In heatmap chart type each point occupies the same space, so value data can be only represented by color or by label. If you use datetime xAxis type, you must remember to set right colsize property.
Highcharts.chart('container', {
chart: {
type: 'heatmap',
plotBorderWidth: 1
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
colsize: 60 * 60 * 1000,
data: [
[1527657415000, 0, 10],
[1527657415000, 1, 19],
[1527657415000, 2, 8],
[1527657415000, 3, 24],
[1527657415000, 4, 67],
[1527661015000, 0, 92],
[1527661015000, 1, 58],
[1527661015000, 2, 78],
[1527661015000, 3, 117],
[1527661015000, 4, 48],
[1527661015000, 0, 35],
[1527661015000, 1, 15],
[1527661015000, 2, 123],
[1527661015000, 3, 64],
[1527661015000, 4, 52],
[1527664615000, 0, 72],
[1527664615000, 1, 132],
[1527664615000, 2, 114],
[1527664615000, 3, 19],
[1527664615000, 4, 16]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zhxyerd1/
API: https://api.highcharts.com/highcharts/series.heatmap.colsize

Related

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

Need multiple column high chart between 2 to 3 months [duplicate]

I have created High chart to full fill my requirement as shown in attached Image and i have tried below code in fiddle
example code in fiddle is as follows
https://jsfiddle.net/vsLr07ak/
Below is my code
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'HISTORICAL NEWS SENTIMENT'
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
min: -100,
max: 100,
tickInterval: 10,
showLastdataLabel: true,
},
xAxis: {
categories: ['26. Nov', '24. Dec', '21. Jan', '18. Feb', '18. March']
},
credits: {
enabled: false
},
series: [{
name: null,
data: [15, 13, 14, 17, 12]
}, {
name: null,
data: [12, -12, -13, 21, 11]
}]
});
Html code is as
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js">.
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
but it display 2 bar for per month, I want it show as below attached image.
Can any one help me out?
and I want my chart as shown in image
Instead of category, you should use datetime xAxis type and define x values as timestamps:
series: [{
...,
data: [
[17227780000, 15],
[18523780000, 13],
[19819780000, 14],
[21115780000, 17],
[22411780000, 12],
[23707780000, 12],
[25003780000, -12],
[26299780000, -13],
[27595780000, 21],
[28891780000, 11]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/83us07cx/
or use pointStart and pointInterval properties:
series: [{
pointStart: 17227780000,
pointInterval: 1000 * 60 * 60 * 24 * 15, // 15 days
name: null,
color: 'red',
negativeColor: 'blue',
data: [15, 13, 14, 17, 12, 12, -12, -13, 21, 11]
}]
Live demo: https://jsfiddle.net/BlackLabel/sqtha8xm/
API Reference:
https://api.highcharts.com/highcharts/series.column.data
https://api.highcharts.com/highcharts/series.column.pointStart
https://api.highcharts.com/highcharts/series.column.pointInterval
https://api.highcharts.com/highcharts/series.column.negativeColor

Highcharts - line between two categories

I have a chart that is of type column range and my requirement is to have a line connecting two categories.
JsFiddle
$(function() { $('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Test'
},
subtitle: {
text: 'Sample'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: 'Series1',
data: [
[0, 3],
[0, 3],
[0, 3]
],
pointPlacement: -0.20,
pointWidth: 50
}, {
name: 'Series2',
data: [
[3, 6],
[3, 6],
[3, 6]
],
pointPlacement: 0,
pointWidth: 1
}, {
name: 'Series3',
data: [
[6, 9],
[6, 9],
[6, 9]
],
pointPlacement: 0.20,
pointWidth: 50
}] });});
How do I draw a line from one category to another?
Is there any property available?
You should be able to achieve similar chart by simply adding new line series to your chart:
{
name: 'Series4',
type: 'line',
marker: {
enabled: false
},
index: 1,
data: [
[0, 1.5],
[1, 1.5],
[2, 1.5]
],
},
Here you can see an example how this chart may work: http://jsfiddle.net/ebtygovh/6/
You can also use renderer.path for adding lines to your chart: http://api.highcharts.com/highcharts/Renderer.path

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/

jqPlot data point gets cut off

I am trying to create a chart using jqPlot where it shows the data for each hour.
This is working fine, but as you can see in the jsfiddle, it doesn't show the first and last data point correctly. It cuts some of the circle off.
I am using this code:
$(document).ready(function () {
var line1 = [
['08:00', 4],
['09:00', 10],
['10:00', 2],
['11:00', 12],
['12:00', 5],
['13:00', 3],
['14:00', 40],
['15:00', 2],
['16:00', 20],
['17:00', 7]
];
var plot1 = $.jqplot('chart1', [line1], {
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M'
},
tickInterval: '1 hour',
min: '08:00',
max: '17:00'
},
yaxis: {
min: 0
}
},
seriesColors: ["#996325"],
seriesDefaults: {
markerOptions: {
show: true,
style: 'circle', // circle, diamond, square, filledCircle. filledDiamond or filledSquare.
color: 'white',
lineWidth: 4,
size: 12,
shadow: true
}
},
grid: {
background: '#365463',
gridLineColor: 'grey'
}
});
});
jsFiddle
What am I doing wrong ? :(
You can modify your min and max values of your xaxis in order to see the full circle of your first and last points.
xaxis:{
min: '07:45',
max: '17:15'
}
See example here

Categories