I'm trying to build a highchart heatmap but the I cannot display the data. I'm fairly new to front end and js so maybe I'm missing something.
highchart heatmap
The data show as label but doesn't display it.
\<!doctype html\>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/boost-canvas.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
boost: {
useGPUTranslations: true
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}'
},
tickWidth: 1,
min: 17000,
max: 25000
},
colorAxis: {
stops: [
[-10000, '#3060cf'],
[0, '#ffffff'],
[10000, '#c4463a']
],
min: -10000,
max: 10000,
},
series: [{
name: 'Stop losses',
data: {{ csv }},
nullColor: '#FFFFFF'
}]
});
</script>
</body>
</html>
You can see the example at the jsfiddle:
https://jsfiddle.net/zx6ukdtn/
Your example doesn't work because of a few reasons:
First of all, you have to set series.colsize and series.rowsize which are 1 by default. In datetime axis, you should set them to equal to your time period/unit on a particular axis.
Example code based on your data:
series: [{
colsize: 36e5, // one hour
rowsize: 50,
data: [..]
}]
Secondly, colorAxis.stops are defined incorrectly. As API says:
The stops is an array of tuples, where the first item is a float between 0 and 1 assigning the relative position in the gradient, and the second item is the color.
Example code:
colorAxis: {
stops: [
[0, '#3060cf'], // corresponds to the lowest value (-382.249)
[0.5, '#ffffff'],
[1, '#c4463a'] // corresponds to the highest value (0)
],
/* min: - 300,
max: -10 */ // You can set min and max in the scope of values
},
Demo:
http://jsfiddle.net/BlackLabel/veo4dybq/
You can read more about colorAxis.stops in the following article:
https://highcharts.freshdesk.com/support/solutions/articles/44002324217
API References:
https://api.highcharts.com/highcharts/colorAxis.stops
https://api.highcharts.com/highcharts/series.heatmap.colsize
https://api.highcharts.com/highcharts/series.heatmap.rowsize
Related
I am using Highchart , I am new for it , I need to show line chart when i have a selected date array and every date have multiple value.
For Example I have
date=[2022-01-02,2022-01-07,2022-01-10]
and
Data=[[1,2,3],[3,5,4],[6,3,4]]
I have some references but for column and single data : https://jsfiddle.net/50e1nbac/4/
enter image description here
In above picture I just need to mentioned date from list on X-axis.
For showing observation scatter series will be fit to visualize it how many times the action has occurred. You can insert the dates as categories, the points will refer to them.
var dates = ["2019-06-14 17:00:00", "2019-06-14 17:01:00", "2021-04-13 06:15:00"];
Highcharts.chart('container', {
title: {
text: 'Scatter plot with regression line'
},
xAxis: {
type: 'datetime',
categories: dates
},
yAxis: {
min: 0
},
series: [{
type: 'line',
name: 'Regression Line',
data: [
[0, 1.11],
[5, 4.51]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
marker: {
radius: 4
}
}]
});
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Demo: https://jsfiddle.net/BlackLabel/9r07asom/
https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
https://api.highcharts.com/highcharts/xAxis.categories
I've drawn a column chart with gradient Highcharts library .
that you can see here
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
events: {
load: function() {
this.xAxis[0].setExtremes(0, 5);
}
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'S1',
'S2',
'S3',
],
crosshair: false,
gridLineWidth: 0,
tickWidth: 0
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'S1',
data: [30, 50, 100],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'red'],
[1, 'green']
]
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" ></div>
The problem is about gradient ,
I have three bars here
the first column value is 30
the second is 50
and last is 100
but gradient is the same for all !
(all of the have green and red )
and it is not right !
I want a gradient in order that
the first column to be in green zoon
something like this
How can I achieve it ?
From docs:
Note that linear gradients can be differently defined (as an array or
an object). Also, start/end positions might be calculated differently
depending on the gradientUnits property (this property can only be set
in linear gradient declared as object).
gradientUnits values:
userSpaceOnUse Default when gradient declared as an array. Start and end positions have to be declared as pixels on the chart.
objectBoundingBox Default when gradient declared as an object. Start and end positions are in the range of 0 to 1 as described above.
Using this might sometimes result in the disappearance of the coloured
element.
So, instead of object for linearGradient, use array (which has values in pixels).
color: {
linearGradient: [0, 0, 0, 400],
stops: [
[0, 'red'],
[1, 'green']
]
}
Live demo: https://jsfiddle.net/BlackLabel/tfxLpck1/
Docs: https://www.highcharts.com/docs/chart-design-and-style/colors
i am trying to put labels on x-axis for the charts mentioned below.
even the labels that i want to display are taken from the database and displayed. for each value of y-axis there is a repective x-axis. so i want like when i hover on the point x-axis value : y-axis value. it should appear like this.
If anyone had tried this earlier, please help.
Highcharts.stockChart('container', {
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
Use tooltip's formatter (Highcharts API here)
tooltip: {
formatter: function() {return this.x+" : "+this.y}
}
Assuming you have the names you want to give to the x-Axis in an array, this code should work:
Javascript:
var namesArray = ["Name1", "Name2", "Name3", "Name4"]
Highcharts.stockChart('container', {
tooltip: {
formatter: function () {
var s = '';
$.each(this.points, function () {
s += namesArray[this.series.data.indexOf(this.point)] +" : "+this.y;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: [3, 5, 6, 7]
}]
});
Please notice I added namesArray as an example here.
What the tooltip function does is the following:
it declares a String
it loops through all of your Highstock points
for each point, it gets the index of the point in series.data and gets the same index from namesArray. This should achieve the thing you need.
I am attempting to get the full label displayed in the x axis, but highcharts keeps on cutting it off. I tried using the crop, overflow, and margin options discussed in other posts to no avail. The only option that worked was to make the div height of the chart an absurd size.
$('#da-expulsions').highcharts({
chart: {
type: 'column',
renderTo: 'da-expulsions',
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
startRow: 0,
googleSpreadsheetWorksheet: 19,
},
title: {
text: 'Expulsion rates at campuses with highest expulsion rates over time'
},
yAxis: {
min: 0,
max: 30,
breaks: [{
from: 12,
to: 24,
breakSize: 1
}],
tickInterval: 3,
title: {
text: 'Expulsions Rate (%)'
},
labels: {
formatter: function() {
return this.value + '%';
}
}
},
tooltip: {
valueSuffix: '%'
},
xAxis: {
type: 'category',
title: {
text: 'School'
},
},
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
</script>
</head>
<body>
<div id="da-expulsions"></div>
</body>
The "make the div height of the chart an absurd size" is why the truncated view was added. If you hover over the xAxis labels the full text is shown.
If you want to increase the available size for the xAxis labels you can. Another recommendation would be to use a 'bar' format where the xAxis is vertical and then adjust font sizing of the xAxis label although this is not 100% accurate. What is wrong with the ellipsis?
labels: {
useHTML: true,
style: {
fontSize: '8px',
width: '300px'
}
}
I'm attempting to use Highcharts Series function to create a combination bar/line chart, but I'm having trouble just getting the series to display. There's nothing in the API about how to format data from Google Spreadsheets when using series so I took a stab at it and the chart does not display:
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: '#fff',
shadow: false,
width: null,
height: null
}
});
$('#ms-96-enrollment').highcharts({
series: [{
type: 'bar',
data: [{
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 7
}],
}]
});
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<div>
<div id="ms-96-enrollment"></div>
Highcharts is a little bit misleading having two "data"s - in series and on top level. The first is used for javascript point arrays while the later is for facilitating adding existing datasets (http://api.highcharts.com/highcharts#data)
Thus for Google Spreadsheets
$('#ms-96-enrollment').highcharts({
chart: {
type: 'bar'
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 7
},
title: {
text: 'My google data'
},
yAxis: {},
xAxis: {
labels: {
enabled: true,
}
}
});
Here's the sample based on your data http://plnkr.co/edit/aIqMVcaeyYEbHcdxoMaT
UPDATE
If you need to show multiple series add extra columns and specify series:
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 2,
startRow: 0,
googleSpreadsheetWorksheet: 7
}
...
series: [{
type: 'bar'
}, {
type: 'line'
}]
Here's the updated sample http://plnkr.co/edit/UQprlugBtUXQX9OffUm4?p=preview