I am trying to create a line-chart using HighCharts.js which should be showing the data in tabular format too. But data has to be grouped instead of exact input for the graph.
Normal export shows the exact input data.
like Jan - 0, Feb - 2 etc..
But I want to show a table where it suggest how many months are there where data is 0, 1, 2 ,3.
+------+-------+
| Data | Count |
+------+-------+
| 0 | 2 |
+------+-------+
| 1 | 2 |
+------+-------+
| 2 | 4 |
+------+-------+
| 3 | 1 |
+------+-------+
Highcharts.chart('container', {
title: {
text: 'Data Table Example'
},
chart: {
borderWidth: 1,
borderColor: '#ccc',
spacingBottom: 30
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [0, 2, 1, 3, 2, 2, 1, 0, 2],
}],
exporting: {
showTable: true
}
});
.chart-outer {
max-width: 800px;
margin: 2em auto;
}
#container {
height: 300px;
margin-top: 2em;
min-width: 380px;
}
.highcharts-data-table table {
border-collapse: collapse;
border-spacing: 0;
background: white;
min-width: 100%;
margin-top: 10px;
font-family: sans-serif;
font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
border: 1px solid silver;
padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #eff;
}
.highcharts-data-table caption {
border-bottom: none;
font-size: 1.1em;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="chart-outer">
<div id="container"></div>
<!-- data table is inserted here -->
</div>
Update: we are using Json Object as input for our chart and the table has be be exported as well with the highchart export option.
Related
I've a below dataset:
var data = [{
"France": {
"val1": [10, 20, 30, 40],
"val2": [10, 20, 30, 4]
},
"Croatia": {
"val1": [50, 60, 70, 80],
"val2": [50, 60, 70, 8]}
}];
It's a group by data and my target is to create two dynamic high chart on the dataset given above. So one chart would be created on France dataset and other one is Croatia with their respective values val1 and val2. I was trying something as follows:
var data = [{
"France": {
"val1": [10, 20, 30, 40],
"val2": [10, 20, 30, 4]
},
"Croatia": {
"val1": [50, 60, 70, 80],
"val2": [50, 60, 70, 8]}
}];
for(var i = 0; i <= data.length; i++) {
console.log(data[i].France);
console.log(data[i].Croatia);
console.log(data.length);
var val = i + 1;
var containerName = 'container' + val;
console.log(containerName);
Highcharts.chart(containerName, {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'France',
data: data[0].France.val2
}, {
name: 'Croatia',
data: data[0].Croatia.val2
}]
});
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container1">
</div>
<div id="container2">
</div>
Is it possible to create two different charts according to their respective data set? Here's a Js fiddle that I tried but failed: Js Fiddle
What I expect:
Code and demo:
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A polar chart showing different series types on a radial axis. Polar
charts, also known as a radar charts, are often used to compare
multivariate data sets. A polar chart in Highcharts is simply a
cartesian chart where the X axis is wrapped around the perimeter. It
can render common cartesian series types like line, column, area or
arearange.
</p>
</figure>
This should work
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
/*You can change the color using this selector*/
.highcharts-series-group path{
fill: red !important;
}
.highcharts-series-group path:hover{
opacity: 0.6
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A polar chart showing different series types on a radial axis. Polar
charts, also known as a radar charts, are often used to compare
multivariate data sets. A polar chart in Highcharts is simply a
cartesian chart where the X axis is wrapped around the perimeter. It
can render common cartesian series types like line, column, area or
arearange.
</p>
</figure>
The simplest way is to enable the colorByPoint option and define colors array:
colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
plotOptions: {
column: {
...
colorByPoint: true
}
},
...
Live demo: http://jsfiddle.net/BlackLabel/5h09mwy2/
API Reference:
https://api.highcharts.com/highcharts/colors
https://api.highcharts.com/highcharts/series.column.colorByPoint
If you need to do that by CSS only, you can use:
.highcharts-series-0 path:nth-child(1) {
fill: red;
}
.highcharts-series-0 path:nth-child(2) {
fill: orange;
}
.highcharts-series-0 path:nth-child(3) {
fill: yellow;
}
Live demo: http://jsfiddle.net/BlackLabel/8cmv2edz/
Continuation of what I thought was resolved a couple of months ago:
A new datatable is rendered each time when called in Ajax response [Highcharts]
$(function() {
Highcharts.setOptions({
lang: {
exportData: {
categoryHeader: 'Vulnerability'
}
}
});
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
evsents: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -50,
connectorColor: '#000000',
format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
}
}
},
exporting: {
showTable: true,
tableCaption: false
},
series: [{
type: 'pie',
name: 'Counts',
data: [{
y: 4,
name: 'high',
}, {
y: 8,
name: 'medium',
}, {
y: 2,
name: 'low'
}]
}]
});
});
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
position: absolute;
top: 200px;
left: 20px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Overview:
I have a condition where I need to update highcharts datatable every time when the change event is triggered.
http://jsfiddle.net/BlackLabel/s7m0tvpy/
This was working perfectly before in which clicking the update button changes 4,8,2 to 0,0,1.
But quite recently, this is not working.
Is it something that update function has been modified?
Any help would be appreciated.
This issue was due to
https://github.com/highcharts/highcharts/issues/14320
However, it still works in 8.1.2 version.
<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/export-data.js"></script>
I want to limit number of datalabel thats showing on the chart. I have no clue how to do that.
The chart it self has many data points, and i want to limit just datalabels for better reading.
chart
document.addEventListener('DOMContentLoaded', function() {
dht22temp = Highcharts.chart('containerDHT22Temp', {
chart: {
type: 'spline',
events: {
load: requestDataDHT22_Temp
},
},
title: {
text: 'DHT22 Temperatura'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'Temp',
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
},
enableMouseTracking: true
}
},
series: [{
name: 'Temp',
data: [<?php echo join($dataDHT22Temp, ',') ?>],
}],
exporting: {
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
});
});
Check dataLabels.formatter:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.index%3 == 0 ? this.y + '°C' : undefined;
}
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This chart shows how data labels can be added to the data series. This
can increase readability and comprehension for small datasets.
</p>
</figure>
I am reading highstock documentation and its hover over formatting but it is not getting to the format I want it to be for the hover-over tooltip. What I want to do is, when the user hover over a point on the graph, it should display the name and the value such as shown here in this jsfiddle http://jsfiddle.net/w5h6rffo/7/
As you can see from the hovering over a point, the format is
Date on top of the line, and the next line is Series 1: current point.
I want to get rid of the Date line, how can I accomplish this ?
<HTML>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<button type="button" class="btn" onclick="graphX();">Details</button>
<div id="container" style="height: 400px; min-width: 310px"></div>
</HTML>
<CSS>
.btn {
background: #3498db;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 2px 2px 2px 2px;
text-decoration: none;
height: 30px;
width: 70px;
margin-top: 5px;
margin-bottom: 5px;
display: block;
}
.btn.active, .btn:active {
background: #000000;
text-decoration: none;
}
</CSS>
<JavaScript>
$('.btn').click(function() {
$(this).toggleClass('active');
});
$(function graphX() {
var data = [];
for(var i = 0; i < 899; i++) {
data[i] = {X: i};
}
var processedData = [];
Highcharts.each(data, function (d) {
processedData.push(Math.sin(d.X));
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
series: [{
data: processedData,
pointStart: Date.UTC(2010, 1, 1),
}],
});
});
</JavaScript>
I have been referring to the following documentations
http://www.highcharts.com/docs/chart-concepts/tooltip
http://api.highcharts.com/highcharts#tooltip
You can reset headerFormat by pasting empty string.
headerFormat:''
http://jsfiddle.net/sccbymha/