I am using High Charts and using a Line chart for visualization. I have some bad data in the series data which is replaced with nulls and my line on the trend is not connected (bad data is not plotted on the trend, hence disconnected line) which is fine.
My issue is that I have some good data in between some bad data like (bad,bad,good,bad,bad,good,bad) this good data is shown as tool tips on my trend but no data point is shown on the trend. Is there any configuration option with in high charts so that I could plot individual data points along with disconnected line?
As you may see in the trend image, that the line series is broken but there are still some valid data points among bad data points which are not visible on the trend.
Here is how I initialize my highchart
initializeChart() {
Highcharts.setOptions({global: { useUTC : false }});
let yAxesLoc = this.getYAxes(this.props.signals);
// Update the yAxes to use the unit abbrevation instead of the full name
let dfdArr = new Array();
yAxesLoc.forEach(function(yAxis) {
if(!yAxis.unitName) {
return;
}
dfdArr.push(AfModel.GetUnitByName(yAxis.unitName, function(unit) {
if (unit) {
yAxis.unit = unit.Abbreviation;
yAxis.title = {text: unit.Abbreviation};
}
}));
});
let that = this;
// Only all the units are loaded, then we initialize Highcharts
return $.when.apply(null, dfdArr)
.always(function() {
that.yAxes = yAxesLoc; // Set all the axis
that.colorGenerator = new ColorGenerator(); // Initialize a new color generator for this trend
that.chart = Highcharts.chart(that.state.chartDivId, {
credits: {
enabled: false
},
title: null,
chart: {
zoomType:'xy',
events: {
redraw: function(){
// Remove all frozen tooltips
if (that.cloneToolTip) {
that.chart.container.firstChild.removeChild(that.cloneToolTip);
that.cloneToolTip = null;
}
if (that.cloneToolTip2) {
that.cloneToolTip2.remove();
that.cloneToolTip2 = null;
}
}
}
},
xAxis: {
type:'datetime',
min: that.props.startDateTime.getTime(),
max: that.props.endDateTime.getTime(),
labels: {
rotation: 315,
formatter: function() {
return new Date(this.value).toString('dd-MMM-yy HH:mm')
}
}
},
tooltip: {
shared: true,
crosshairs: true,
valueDecimals: 2,
formatter: function(tooltip) {
return HcUtils.interpolatedTooltipFormatter.call(this, tooltip, function(yVal, series) {
return NumberUtils.isNumber(yVal) ?
(series.yAxis.userOptions.unit) ?
NumberUtils.round(yVal, 4) + " " + series.yAxis.userOptions.unit
: NumberUtils.round(yVal, 4)
: yVal;
});
}
},
yAxis: that.yAxes,
series: {
animation: false,
marker: {enabled: false}
},
plotOptions: {
line: {
animation: false,
marker: {
enabled:false
}
},
series: {
connectNulls: false,
connectorAllowed: false,
cursor: 'pointer',
point: {
events: {
// This event will freeze the tooltip when the user clicks
// Inspired by https://stackoverflow.com/questions/11476400/highcharts-keep-tooltip-showing-on-click
click: function() {
if (that.cloneToolTip) {
that.chart.container.firstChild.removeChild(that.cloneToolTip);
}
if (that.cloneToolTip2) {
that.cloneToolTip2.remove();
}
that.cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
that.chart.container.firstChild.appendChild(that.cloneToolTip);
that.cloneToolTip2 = $('.highcharts-tooltip').clone();
$(that.chart.container).append(that.cloneToolTip2);
}
}
}
}
}
});
})
}
Kindly suggest.
Thanks.
Highcharts draws a line only between two subsequent no-null points. Single points can be visualized as markers (which you disabled in your code).
Here's a live demo that shows this issue: http://jsfiddle.net/BlackLabel/khp0e8qr/
series: [{
data: [1, 2, null, 4, null, 1, 7],
marker: {
//enabled: false // uncomment to hide markers
}
}]
API reference: https://api.highcharts.com/highcharts/series.line.marker
It seems to work fine in the latest version of Highcharts. The data points are visible.
Please have a look
Visible points: https://codepen.io/samuellawrentz/pen/XqLZop?editors=0010
Related
I found this example that half does what I need. I would need it to show two series, not just one.
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible) {
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
http://jsfiddle.net/tK38J/65/
For example: I click series 1 and I see series 1 and 2. I click series 3 and I see series 3 and 4.
Series 2 and 4 will be hidden in the legend.
Is it possible?
You can link series with the same visibility and hide the other ones in legendItemClick event:
plotOptions: {
series: {
events: {
legendItemClick: function() {
if (this.visible) {
return false;
}
this.chart.series.forEach(function(s) {
if (s !== this && s !== this.linkedSeries[0]) {
s.hide();
}
}, this);
}
}
}
},
series: [{
data: [...],
id: 'first'
}, {
data: [...],
linkedTo: 'first'
}, {
data: [...],
visible: false,
id: 'third'
}, {
data: [...],
linkedTo: 'third'
}]
Live demo: http://jsfiddle.net/BlackLabel/s6x37azb/
API Reference: https://api.highcharts.com/highcharts/series.line.linkedTo
I have an API which returns JSON data like this:
[
{
"name":"Something",
"data":[
{
"x":1541096421,
"y":2
},{
"x":1541436378,
"y":4
},{
"x":1553621371,
"y":2
}
]
},{
"name":"Something else",
"data":[
{
"x":1541096421,
"y":2
},{
"x":1541436378,
"y":4
},{
"x":1553621371,
"y":2
}
]
}
]
The x axis represents date/time and the y axis is a score. It's plotted on a chart like this, using some formatting to convert the date from millisecond timestamp to a readable date format:
function renderChart(data) {
$('#chartContainer').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: chartTitle()
},
xAxis: {
allowDecimals: false,
title: {
text: 'Date completed',
scalable: false
},
type: 'datetime',
labels: {
formatter: function () {
if (true) {
return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
}
else {
if (this.value > 0 && this.value < 24) {
return this.value;
}
else
return 0;
}
}
},
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Score'
}
},
plotOptions: {
scatter: {
marker: {
radius: 5
}
}
},
series: data,
exporting: {
buttons: {
contextButton: {
menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.filter(item => item !== 'openInCloud')
}
}
// Tried adding this but it doesn't make any difference:
/*,
csv: {
dateFormat: '%d/%m/%Y'
}*/
},
tooltip: {
formatter: function () {
return 'Score of <b>' + this.y + '</b> posted on <b>' + Highcharts.dateFormat('%d-%b-%y', moment.unix(this.x)) + '</b>';
}
}
});
}
This works fine. However, when I click 'export to CSV' in the Highchart graph on the front-end it outputs a CSV file where the date is always showing as "18/01/1970". Obviously it's something to do with the fact that the API is returning a timestamp value, but I don't see how I can modify the format in the CSV similar to how it's done in the chart rendering code.
Can anyone advise how (preferably without modifying the data returned by the API) to get the CSV to output a correct date in day/month/year format?
Many thanks
It can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export. Check demo and code posted below.
Code:
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = Highcharts.dateFormat('%d-%b-%y', row.x * 1000);
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/yafx8cb1/1/
Docs:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
As per #Core972's comment, the issue here is related to the timestamp in the API returning the date as seconds rather than milliseconds. I don't believe there is a way to manipulate the date format in the CSV export specifically so it will require a change to the API which returns the data.
Wojciech Chmiel's answer demonstrates how to override Highchart's output to re-format the date from a non-ideal source.
I am generating a Project Cumulative Flow Chart, which is based on the Project name that I fetch using a "find," however I can't get it working.
Here is the Problem:
1) The "Find" in my code is just fetching one kind of project name, "FE," however, I have a lot of other Project name such as FE, BE, VisualRF, etc. I am not sure what's going on
2) I return this to "storeConfig" inside the chart and then I want try to give "Name" to the "stateFieldName." This is not working! I don't see any graph at all.
Here is the code.
_chart2: function() {
var projectName = this.getContext().getProject()._refObjectName;
console.log("========");
console.log(projectName); <<<<<<<<<< This always prints one name'FE' (My project name are FE, BE, etc)
this.chart = {
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreForChart2(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: this.getContext().getProject()._refObjectName, <<<<< I think usage is not fetching name of all projects
stateFieldValues: ['FE','BE','VisualRF']
},
width: 1000,
height: 600,
chartConfig: this._getChart2Config()
};
this.chartContainer.add(this.chart);
},
_getStoreForChart2: function() {
var obj1 = {
find: {
_TypeHierarchy: { '$in' : [ 'Defect' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) },
State: "Open",
},
fetch: ['Severity','Project','ObjectID','FormattedID'],
hydrate: ['Severity','Project','ObjectID','FormattedID'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity,
val: this.Name,
};
return obj1;
},
Though this should not matter but here is the code for the high chart function I am calling above
_getChart2Config: function() {
console.log("starting chart config");
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Chart2'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 20,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
},
Down below you can see 'FE' getting printed:
Thanks a lot!
Kay
stateFieldName is the field which is used to calculate the CFD- usually ScheduleState or a custom dropdown field like KanbanState that captures your process. The stateFieldValues should be the values of that field (Defined, In-Progress, Accepted, Completed, etc.) This doesn't deal with projects at all. Definitely remember to include that field in your hydrate and fetch as well.
I am trying to color the bubbles based on the name of the cities. Something like if this.point.capital == Montgomery & this.point.capital == Juneau; color = "red". But I cannot add this if function to the color attribute. Can you help me out?
Thanks!!!!
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Cities',
data: data,
maxSize: '12%',
color: H.getOptions().colors[0]
}]
http://jsfiddle.net/oufwhmz0/
Do this for each bubble individually (not the series as a whole) in the data array prior to initiating the chart. For example extending your code (JSFiddle):
function determineColor(entry) {
if(entry.capital == "Montgomery")
return "#FF00FF";
else if(entry.capital == "Salt Lake City")
return "#00FF00";
return null;
}
// Add series with state capital bubbles
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=us-capitals.json&callback=?', function (json) {
var data = [];
$.each(json, function (ix, entry) {
entry.z = entry.population;
entry.color = determineColor(entry); // Added
data.push(entry);
});
// ... rest as usual
});
This just sets the color for each entry (which will be a bubble), as defined by the determineColor function.
In a project, I'm using something very similar to this fiddle: http://jsfiddle.net/Z3vhg/
The code for this dynamically updating data-grouped columns chart is the following:
$('#container').highcharts('StockChart', {
chart : {
type: 'column',
events : {
load : function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
yAxis: {
offset: 30
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Random data',
dataGrouping: {
groupPixelWidth: 60
},
data : (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for( i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
The problem can be observed in the fiddle above: as the data updates and adds new points, the first point on the x axis is shifted, but since data grouping is used, the column remains there but gives the impression that the first column value is actually changing...
Any help appreciated, as it may be a weird combination issue.