I am new to react library and es6 and I tried to build a graph that display data. I started with creating the react app template and then I decided to use highchart and start playing with their xrange graph.
Im using https://github.com/kirjs/react-highcharts library.
My Code looks like:
import React, { Component } from 'react'
import ReactHighcharts from 'react-highcharts';
class Graph extends Component {
constructor() {
super();
this.state = {
config: {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
}]
}
}
}
render() {
const config = this.state.config;
return (
<ReactHighcharts config={config}></ReactHighcharts>
)
}
}
export default Graph
My final design is going to be importing a default template and inject to the component properties like title and data to make it a little more flexible.
Im getting 2 errors (I just copy the xrange graph from highcharts website):
Error: Highcharts error #17: www.highcharts.com/errors/17
TypeError: Cannot read property 'destroy' of undefined
Follow error link https://www.highcharts.com/errors/17 which state
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.
Import highcharts more js
import ReactHighcharts from 'react-highcharts';
import xrange from 'highcharts/modules/xrange';
(xrange)(ReactHighcharts.Highcharts)
Stackblitz demo
Related
I want to achiev that the setp size of the xaxis depends on the actual value from the label. Here an example of excel how I expect my chart.js line chart should look the step on the x-axis is "2":
But my chart.js always distributes the labels equally on the xaxis:
My xaxis settings:
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Test'
},
ticks:
{
min: 1,
max:17,
stepSize: 5,
},
distribution: 'linear',
}],
Here a link to my chart.js example: https://jsfiddle.net/h97remq3/1/
I tried the whole afternoon different x-axis settings but never get my desired result like in excel. I think the solution should be an easy setting, but I didn't find it...
Instead of using line chart, use a 'scatter' chart. Then omit data.labels and define the data in point format as follows.
data: [
{ x: 1, y: 10 },
{ x: 2, y: 2 },
{ x: 3, y: 5 },
{ x: 5, y: 22 },
{ x: 10, y: 17 },
{ x: 15, y: 11 },
{ x: 17, y: 3 }
],
Please have a look at your amended JSFiddle.
So I've been trying to find a way to do this properly, but as far as I understand it's not possible as of now. Hoping that someone might prove me wrong.
Some background:
I'm trying to plot a timeline to keep track of tickets in Jira. No worries getting the data in and drawing each item on separate rows since highcharts is pretty much doing this for me.
A bit more advanced:
Going a little further to enhance the viewing experience I would like to group the different items based on something (in my case a single component in Jira), give items in the same group the same color so that the viewer can see that some thing might be related.
Even this is really simple to do by using multiple series together with categories.
The problem:
So when doing the grouping using categories and multiple series (one item/series) the plotting is starting to behave weird.
It seems like each one of the categories (axes) is reserving space for each series, even if one category might only have a single item in it.
This creates way too much whitespace, forcing the items to get really narrow.
See fiddle here
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/xrange.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<div id="container"></div>
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0
}]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 2
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 2
},]
}]
});
What I want:
Instead of creating a lot of whitespace I want either the width of each item to be relative to the space available in the group, or if the group axes themselves could adjust their width according to items inside (and all items is the same width).
I've found a few similar questions, but not a proper solution.
In this github issue the solution is to set grouping to false, but by doing that items in the same category will overlap instead of having their own row.
Would really appreciate if someone could help me out!
Such behavior is not supported in Highcharts by default, but I created some experimental workaround. We can change the sizes and positions of the points based on calculated values:
events: {
render: function() {
var series = this.series,
categoryWidth = this.yAxis[0].toPixels(2) - this.yAxis[0].toPixels(1),
pointWidth,
rectEl,
y,
levels = [];
Highcharts.each(series, function(s) {
if (!levels[s.yData[0]]) {
levels[s.yData[0]] = [s.index]
} else {
levels[s.yData[0]].push(s.index)
}
});
Highcharts.each(levels, function(level) {
if (level.length > 1) {
pointWidth = categoryWidth / level.length;
y = series[level[0]].points[0].shapeArgs.y;
Highcharts.each(level, function(index) {
rectEl = series[index].points[0].graphic.element.children[0];
rectEl.setAttribute('height', pointWidth);
rectEl.setAttribute('y', y);
y += pointWidth;
});
}
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/y8uqsx5h/
I have been trying to replicate an ADCP Graph using the Heatmap chart by Highcharts but I am finding difficulties in changing the x-axis format.
Example of an ADCP Graph
How do i replicate the x-axis as shown in the example above?
I am also hoping for the format to be date(dd/mm/yyyy), time(00:00), depth(m), velocity(m/s) in the small popup that appears as you hover around the graph.
Here's a link to my code:
https://jsfiddle.net/6hzq3o12/6/
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
}
To achieve expected effect you need to define your own xAxis.labels.formatter function, which recognizes labels on first, middle and last position, and then set its value format to DD/MM/YY. Otherwise (for all other labels) return the HH:MM value:
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
formatter: function() {
var timestamp = this.value
var ticks = this.axis.tickPositions
var isMiddle = ticks.length % 2 && ticks.indexOf(this.value) === Math.floor(ticks.length / 2)
var labelFormat
labelFormat = this.isFirst || this.isLast || isMiddle ? '%d/%m/%y' : '%H:%M'
return Highcharts.dateFormat(labelFormat, timestamp)
}
},
tickLength: 16
}
However, in order to make it work correctly, you need to provide the chart with appropriate data (with hours), as #ewolden says in his comment below your main post.
Live example: https://jsfiddle.net/25cwrqen/
I have a similar problem like posted on highchart chart redraw method is not refreshing the chart but I am working with polar chart, so the solution given there is not solving my issue.
So, the code below is showing the highchart correctly, but doesn't refreshing data. Now I'm asking for advice/help how to solve it.
$(function() {
$.getJSON('wind_graph.php?callback=?', function(dataWind) {
var direction = Wind_direction;
var polarOptions = {
chart: {
polar: true,
events : {
load : function () {
setInterval(function(){
RefreshDataWind();
}, 1000);
}
}
},
title: {
text: 'Wind Direction'
},
pane: {
startAngle: 0,
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
// the value axis
xAxis: {
tickInterval: 15,
min: 0,
max: 360,
labels: {
formatter: function() {
return this.value + '°';
}
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 30,
marker: {
enabled: false
},
},
}
};
// The polar chart
$('#graph-1').highcharts(Highcharts.merge(polarOptions, {
yAxis: {
tickInterval: 5,
min: 0,
max: 25,
visible: false
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: 'Direction',
data: [
[0, 0],
[direction, 20]
],
lineColor: '#7cb5ec',
enableMouseTracking: false,
visible: true,
lineWidth: 2,
zIndex: 8,
}
]
}));
function RefreshDataWind()
{
var chart = $('#graph-1').highcharts();
$.getJSON('wind_graph.php?callback=?', function(dataWind)
{
var direction = Wind_direction;
chart.redraw();
});
chart.redraw();
}
});
});
To be more precise: if given Wind_direction value is equal to 0 (zero), then I need to display on chart the following "spline":
{
type: 'spline',
name: 'CentralCicrleCalmWind1',
data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
pointInterval: 30,
pointStart: 0,
lineColor: windLineColor,
enableMouseTracking: false,
lineWidth: windLineWidth,
visible: showCentralCicrleCalmWind,
}, {
type: 'spline',
name: 'CentralCicrleCalmWind2',
data: [2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5],
pointInterval: 30,
pointStart: 0,
lineColor: windLineColor,
enableMouseTracking: false,
lineWidth: windLineWidth,
visible: showCentralCicrleCalmWind,
}
So as You can see, I have additional parameters like "showCentralCircleCalmWind" set to TRUE or FALSE depends on the given "Wind_direction" value and logic for this I have prepared at top of my code (not pasted here).
The thing what I need is:
Read value of variable in given JSON
Set variable "direction" at the begining of javascript code
Display the chart using higcharts library
Read the new value from JSON
Change the variable "direction" to the new value.
Display the new chart for a given value
Back to the point number 4...
Your problem may be helped by using the setData() function (see http://api.highcharts.com/highcharts/Series.setData).
In your example, I'd suggest the following:
function RefreshDataWind()
{
var chart = $('#graph-1').highcharts();
$.getJSON('wind_graph.php?callback=?', function(dataWind)
{
var direction = Wind_direction;
chart.series[0].setData(direction);
/* assuming "direction" to be an array like [1, 2, 3] */
});
}
The following Highcharts demo shows you how this works: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-setdata/
Depending on the format of your "Wind_direction" variable, you may need to have a statement before setData() that explicitly makes it an array, since that's what the function is expecting.
I'd also suggest you remove the second instance of chart.redraw(), as the setData() makes that unnecessary.
I hope this is helpful for you!
I have a tornado chart created using bar-charts form Highcharts. I have set a threshold value and on either side of which there are low and high bars.
Now I need to make the threshold line visible. I also have a problem of labels getting overlapped when high, low and base values are equal.
JSFiddle Link: http://jsfiddle.net/xe7qL156/
Please help me to solve it. Thanks.
series: [{
threshold: 29.5,
name: 'Low',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 12.15,
}, {
x: 1,
y: 15.45,
}, {
x: 2,
y: 31.25,
}, {
x: 3,
y: 12.15,
}],
labels: [10, 5, 1, 2]
}, {
threshold: 29.5,
name: 'High',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 46.86,
}, {
x: 1,
y: 42.28,
}, {
x: 2,
y: 27.77,
}, {
x: 3,
y: 46.86,
}],
labels: [30, 10, 3, 4]
}]
Update: here is a mockup image of what I need
I'm not 100% sure what you want, but I think you want a vertical line overthe bars at the 29.5 position ?
If so, you can do that with another series:
series: [
{type:'line',color:'black',zIndex:505,data:[[0,29.5],[4,29.5]]},
http://jsfiddle.net/fsbqnw7m/
Alternatively, you can use the renderer API to draw a line wherever you want.
http://api.highcharts.com/highcharts#Renderer
Line can be added also as plotLine in particular place.