Highcharts: Heatmap using CSV - javascript

I am trying to load data via CSV file. Now if I have it already on the page as a hidden div, it works great. But trying to load it from a CSV file via Jquery $.get is not working. The x and y axis shows, but the heatmap itself does not.
The javascript looks like this (without the actual file offhand):
$.get('http://www.urltofile.com/cell001.csv', function(csv) {
generateHeatMap($('#heatmapBody'),csv);
});
function generateHeatMap(target,data) {
target.highcharts({
chart: {
type: 'heatmap',
//height: highChartsArguments.chartHeight
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts extended heat map',
style: {
color: 'black',
fontSize: '12px',
fontFamily: 'Verdana'
}
},
xAxis: {
type: 'text',
min: 0,
max: 427,
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 16, 32, 48, 64, 80, 96, 112, 133],
tickWidth: 1,
min: 0,
max: 133,
reversed: true
},
colorAxis: {
max: 1.5,
min: -1.5,
minColor: '#00FF00',
maxColor: '#FF0000',
stops: [
[0.0, '#00FF00'],
[0.5, '#003319'],
[0.9, '#FF0000'],
[1, '#FF0000']
]
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolHeight: 60
},
series: [{
name: 'heatmap',
data: {
csv: data
},
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
tooltip: {
headerFormat: 'Test<br/>',
pointFormat: '{point.x} {point.y}: <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
exporting: {
enabled: false
}
});
}
The CSV is over 100K rows. Is that causing a problem perhaps? As a sample, it looks like
Gene,Label,zScore
0,0,3.630958
0,1,1.547901
0,2,-0.604027
0,3,0.486755
0,4,-0.359456
0,5,0.228968
0,6,3.197601
0,7,1.554732
0,8,0.374111
Any help would be appreciated.

You load the data incorrectly. Series object is not responsible for handling csv data. If you use data module, you should move the data from series options to top level options, like this:
data: { // this is how you load the with data module
csv: data
},
series: [{
... // here, options for series goes but not data
}]
Compare your code with the official example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/heatmap/

Related

Highchart yaxis categories crowded

I have a highchart heatmap with categories. Since there are numerous categories the map looks crowded. Even though I enabled y-axis scrolling the pixel per category is too less and the map is practically un-usable.
Could someone please tell me how to scale the y-axis so that each category gets a definite height and is properly visible ?
https://jsfiddle.net/Lxw7gtas/
Highcharts.chart('container', {
data: {
rows: [["Sun, 07 Nov 2010 00:00:00 GMT", 0.0, 0],...],
seriesMapping: [{x: 0, value: 1, y: 2}]
},
chart: {
type: 'heatmap'
},
title: {
text: null
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: true
},
boost: {
useGPUTranslations: true
},
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
},
type: 'category',
categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
scrollbar: {
enabled: true
},
tickInterval: 1,
tickPixelInterval: 100,
legend: {
align: 'center',
layout: 'horizontal',
margin: 0,
verticalAlign: 'top',
floating: true,
/* y: 25, */
/* symbolHeight: 280 */
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
labels: {
format: '{value}'
}
},
series: [{
boostThreshold: 100,
borderWidth: 10,
nullColor: '#EFEFEF',
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
plotOptions: {
series: {
dataLabels: {
overflow: 'none',
crop: true,
}
}
}
}});
Please see the picture
I want to increase spacing between categories

I want to develop a Spider web graph/Radar graph using Highchart

I would like to develop a Spider Web Radar which looks similar to the graph shown in image below using highcharts. can you please tell me wether this could be achieved using High charts. please check the below code and image attached
This is my approach Fiddle.
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area',
},
legend: {
enabled: false
},
title: {
text: 'Budget vs spending',
x: -90
},
pane: {
size: '90%'
},
xAxis: {
categories: ['Bonds', 'Future', 'Past', 'Value', 'Health', 'Divedend'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels:
{
enabled: false
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
series: [{
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, '#50e3c2'],
[1, '#50e3c2']
]
},
marker: {
enabled: false,
states: {
hover: {
radius: 8,
symbol: 'square',
}
}
},
name: 'Allocated Budget',
data: [80, 70, 60, 70, 70, 60],
pointPlacement: 'on',
shadow: {
color: '#000000',
width: 7,
opacity: 0.08,
offsetY: 3,
offsetX: 0
},
}]
});

High charts gauge-solid and different data sets

I'm using High charts gauge-solid. So I need to create below like chart.
Can you tell me how to give different data sets for this chart (each and every color has its own data)?
What I need is this:
This is what I have tried: jsfiddle
$(function () {
$('#gauge').highcharts({
chart: {
type: 'solidgauge',
backgroundColor: 'transparent'
},
title: null,
pane: {
center: ['50%', '70%'],
size: '130%',
startAngle: -120,
endAngle: 120,
background: {
backgroundColor: '#fff',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc',
borderColor: 'transparent'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: [
[0.1, '#e74c3c'], // red
[0.5, '#f1c40f'], // yellow
[0.9, '#2ecc71'] // green
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
innerRadius: '75%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
}
},
series: [{
data: [83],
dataLabels: {
format: '<p style="text-align:center;">{y}%</p>'
}
}]
});
});
data array can contain more than one value for a series:
series: [{
data: [80, 150, 200]
}]
Live demo: http://jsfiddle.net/kkulig/tou6wwxj/
If you want every dial to move only within its own range then you can simply make sure that a proper value is assigned to a point while initializing or updating it.

Adjust position of Highcharts line graph data points to be between rather than on each tick

Currently, my chart looks like this:
Currently, each data point is located on the tick i.e. at 3pm, 4pm, 5pm etc. However, the data represented are averages over hourly time periods i.e. 3-4pm, 4-5pm etc.
To accurately represent this data, I need the data points to be between each tick i.e. around the 3.30pm, 4.30pm etc. marks but I don't want to show the ticks at those positions.
How should I change my code?
Highcharts.chart('chart-container', {
chart: {
backgroundColor: null,
spacingTop: 40,
spacingRight: 55,
spacingLeft: 30,
spacingBottom: 10
},
title: null,
xAxis: {
title: {
text: '(Hour)',
align: 'high',
style: {
'color': 'white',
'fontSize': '12px'
},
offset: 0,
x: 42.5,
y: -8.75
},
type: 'datetime',
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%H:00'
},
min: startTime,
labels: {
style: {
'color': 'white',
'fontSize': '12px'
}
},
gridLineWidth: 1,
gridLineColor: '#494A55',
lineColor: '#494A55',
tickWidth: 0
},
yAxis: {
title: {
text: '(Boxes)',
align: 'high',
style: {
'color': 'white',
'fontSize': '12px'
},
rotation: 0,
offset: 0,
y: -20,
x: -15
},
min: 0,
max: maxY, // Computed variable
tickInterval: 0.5,
labels: {
style: {
'color': 'white',
'fontSize': '12px'
},
format: '{value:.1f}'
},
gridLineColor: '#494A55',
lineColor: '#494A55'
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointStart: startTime, // Computed variable
pointInterval: 3600 * 1000
}
},
series: chartData,
exporting: {
enabled: false
},
credits: {
enabled: false
}
});
// Format of chartData
var chartData = [
{
name: '',
color: hexColorCode,
data: [integers]
}
];

Highcharts column chart - transform columns manually after render

I have a basic column chart done in Highcharts.
I would like to 'move' (= use CSS transform: translate()) each column in the chart.
I tried to use CSS styles to achieve this, but it obviously broke the positioning rendered by Highcharts.
Is there any way how to change the existing elements in the callback function?
Thank you
Code:
http://jsfiddle.net/tomexx/vrh5kzzz/10/
$(function () {
var config = {
chart: {
type: 'column',
backgroundColor: 'rgba(40,40,40,1)'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
categories: [
'Likes',
'Comments',
'Shares'
],
tickColor: 'rgba(83,83,83,1)',
gridLineColor: 'rgba(83,83,83,1)',
gridLineWidth: 1,
minorGridLineColor: 'rgba(83,83,83,1)',
lineColor: 'rgba(83,83,83,1)'
},
yAxis: {
min: 0,
title: {
text: ''
},
gridLineColor: 'rgba(83,83,83,1)',
minorGridLineColor: 'rgba(83,83,83,1)',
lineColor: 'rgba(83,83,83,1)'
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
animation: false,
enableMouseTracking: false,
}
},
series: [{
color: 'rgba(126,200,54,1)',
data: [44, 73, 20],
pointPadding: 0.3,
pointPlacement: 0.16
}, {
color: 'rgba(43,205,203,1)',
data: [150, 88, 20],
pointPadding: 0.3,
pointPlacement: 0.04
}, {
color: 'rgba(168,68,214,1)',
data: [63, 33, 10],
pointPadding: 0.3,
pointPlacement: -0.04
}, {
color: 'rgba(255,191,0,1)',
data: [86, 245, 222],
pointPadding: 0.3,
pointPlacement: -0.12
}]
};
$('#container').highcharts(config);
});
Instaed of CSS styles, you can use pointPlacement value with number.
Since Highcharts 3.0.2, the point placement can also be numeric, where
0 is on the axis value, -0.5 is between this value and the previous,
and 0.5 is between this value and the next. Unlike the textual
options, numeric point placement options won't affect axis padding.

Categories

Resources