I am trying to bring highcharts to show only hours and minues in xAxis, presently it's showing the full timestamp including the date. I am using the following code:
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'Temperatur' },
series: [{
showInLegend: false,
data: IstTemp
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%H:%M' },
categories: reading_time
},
yAxis: {
title: { text: 'Temperatur (Celsius)' }
},
credits: { enabled: false }
});
Where is my mistake?
You can't use datetime and category axis type at the same time. As a solution you can:
Use datetime axis and preprocess your data to the format: [timestamp, y]
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var seriesData = IstTemp.map(function(dataEl, index){
return [new Date(reading_time[index]).getTime(), dataEl];
});
Live demo: http://jsfiddle.net/BlackLabel/7gdvzfo6/
Use categories with modified string
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var processedCategories = reading_time.map(function(dateStr){
return dateStr.split(' ')[1].split(':').slice(0, 2).join(':');
});
Live demo: http://jsfiddle.net/BlackLabel/2udw738c/
I am working on jasper but i don't want to sort the data in the query as many other element of the report using the same query.
So i would like to sort it on the pie chart itself as example on this fiddle http://jsfiddle.net/highcharts/3bDMe/1/. How can it be done without button click? I meant as the chart load it automatically sort by slice value ascending.
$(function () {
$(document).ready(function () {
// Build the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 6.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 88.5],
['Opera', 26.2],
['Others', 30.7]
]
}]
});
$('#sort').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y - a.y;
});
var newData = {};
for (var i = 0; i < chart.series[0].data.length; i++) {
newData.x = i;
newData.y = chart.series[0].data[i].y;
newData.color = Highcharts.getOptions().colors[i];
chart.series[0].data[i].update(newData, false);
// Workaround:
chart.legend.colorizeItem(chart.series[0].data[i], chart.series[0].data[i].visible);
}
chart.redraw({ duration: 2000 });
});
});
});
In the load event you can create a new data array with sorted values and use setData method to apply changes:
chart: {
...,
events: {
load: function() {
var data = this.series[0].data,
newData = [];
data.forEach(function(point) {
newData.push({
y: point.y,
name: point.name
})
});
newData.sort(function(a, b) {
return a.y - b.y;
});
this.series[0].setData(newData);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6vzd8ak7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData
I want to show tree map with different on different levels by using property 'colorByPoint' true.
Highcharts.chart('container', {
chart: {
marginTop: 50,
events: {
load: function() {
this.bread = {
'': makeNode('', this.series[0].name, this.series[0])
}
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
align:'left',
verticalAlign:'Top'
},
borderWidth: 1
},
{
level: 2,
colorByPoint: true,
dataLabels: {
enabled: true,
},
borderWidth: 1
}
],
data: points
}],
credits:false,
plotOptions: {
series: {
dataLabels: {
color: '#fff',
textOutline:0,
style: {
fontWeight: 'bold'
}
},
point: {
events: {
click: function(e) {
const hasChildren = !!this.node.childrenTotal
if (hasChildren) {
const bread = this.series.chart.bread
bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
}
}
}
}
}
},
title: {
text: ''
}
});
Here is my js fiddle. https://jsfiddle.net/irfanbsse/8djawts9/
But I dont want show second level color on first level.Same for second level and so on. how i can do it ? Thanks
Here's a demo that shows how to change color of child nodes on point.click.event:
click: function() {
var points = this.series.points;
this.node.children.forEach(function(child, i) {
var point = points.find(function(point_) {
return child.id === point_.id
});
point.update({
color: color[i % (color.length - 1)]
});
});
Live demo: https://jsfiddle.net/BlackLabel/sgkah0fq/
The next thing to implement is reverting the original colors while clicking on the previous level in navigation (label with callout shape).
I changed the official chart, but the crosshair not my expected.
DEMO : Official synchronized-charts
What I changed :
Add xAxis.categories as my custom xAxis labels
Change series[0].fillOpacity 0.3 to 1
Use my custom json data
CODE :
```javascript
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
var json = {
xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
datasets: [{
name: "Num of dog",
data: [1,2,3,4,5,1,2,3,4,5],
unit: "dogs",
type: "area",
valueDecimals: 0
},{
name: "Num of cat",
data: [1,2,3,4,5,1,2,3,4,5],
unit: "cats",
type: "area",
valueDecimals: 0
}]
};
//$.each(activity.datasets, function (i, dataset) {
$.each( json.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
//return [activity.xData[j], val];
return [json.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
...,
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
//labels: {
//format: '{value} km'
//}
},
...,
series: [{
...,
fillOpacity: 1,
//fillOpacity: 0.3,
...
});
```
DEMO : My synchronized-charts
What I need:
Display crosshair line, like Official synchronized-charts
Don't show circle point, like Official synchronized-charts
Show circle point When mouse hover, like Official synchronized-charts
Crosshair line put to front
Does anyone know to accomplish this?
Thank you!
For Don't show circle point, like Official synchronized-charts. Added
plotOptions: {
series: {
marker: {
enabled: false
}
pointPlacement: 'on'
}
},
For Crosshair line put to front. Updated xAxis
xAxis: {
categories: json.xData,
tickmarkPlacement: 'on',
crosshair: {
width: 2,
zIndex: 3
},
events: {
setExtremes: syncExtremes
},
},
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: 'syncExtremes'
});
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
var json = {
xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
datasets: [{
name: "Num of dog",
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
unit: "dogs",
type: "area",
valueDecimals: 0
}, {
name: "Num of cat",
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
unit: "cats",
type: "area",
valueDecimals: 0
}]
}
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) {
$.each(json.datasets, function(i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function(val, j) {
return [json.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: json.xData,
tickmarkPlacement: 'on',
crosshair: {
width: 2,
zIndex: 3
},
events: {
setExtremes: syncExtremes
},
},
yAxis: {
title: {
text: null
},
zIndex: 1000
},
plotOptions: {
series: {
marker: {
enabled: false
},
pointPlacement: 'on'
}
},
tooltip: {
positioner: function() {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 1,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
//});
.chart {
min-width: 320px;
max-width: 800px;
height: 220px;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Fiddle demo
I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong?
You can see a http://jsfiddle.net/ncdysafk/
var chart;
var options = {
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
renderTo: 'container',
type: 'columnrange',
inverted: true,
zoomType: 'y'
},
title: {
text: 'Portes de hoy'
},
xAxis: {
categories: ["SERIE1","SERIE2","SERIE3"]
},
yAxis: {
type: 'datetime',
title: {
text: 'Horas del día'
}
},
plotOptions: {
series: {
stickyTracking: true,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
series: [{"name":"SERIE2","data":[{"x":1,"low":1425538800000,"high":1425543300000},{"x":1,"low":1425567600000,"high":1425571200000},{"x":1,"low":1425584000000,"high":1425589100000}]},{"name":"SERIE3","data":[{"x":2,"low":1425538800000,"high":1425543300000},{"x":2,"low":1425567600000,"high":1425571200000}]}]
};
chart = new Highcharts.Chart(options);
This is bug in 4.1.3/2.1.3 version of Highcharts/Highstock. Bug reported is here. Already fixed, that means try https://github.highcharts.com/highstock.js and https://github.highcharts.com/highcharts-more.js files from master branch. Working demo http://jsfiddle.net/ncdysafk/1/