I am trying to build a chart from JS that has multiple "y:" data points in multiple series. I have got the chart working fine using a static configuration, but am struggling to get it to work when adding the points via the API.
I am trying to acheive:
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[
{
'y':1.0002193448599428
},
{
'y':0.4999027241865406
},
{
'y':4.499986649534549
},
{
'y':0.4998817439627601
}
]
},
{
'name':'Series 2',
'color':'#66B3FF',
'data':[
{
'y':12.99999999901047
},
{
'y':13.00000000082946
},
{
'y':18.99999999841384
},
{
'y':5.000000001018634
}
]
},
My code so far looks like this:
var options = {
'chart':{
'renderTo':'MyChart',
'zoomType':'xy',
'defaultSeriesType':'bar',
'width':880
},
<snip>
...
</snip>
'yAxis':{
'title':{
'text':'Seconds'
},
},
'xAxis':{
'title':{
'text':'Objects'
},
'categories': [],
'opposite':true
},
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[]
},
'series':[
{
'name':'Series 2',
'color':'#66B3FF',
'data':[]
}
]
};
options.chart.renderTo = targetdiv;
//Categories add perfectly here:
$.each(harfile.log.entries, function(i, val) {
options.xAxis.categories.push(val.request.url);
console.log(val.request.url);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[0].data.push("y:" + val.timings.receive);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[1].data.push(y:" + val.timings.receive);
});
console.log(options.series[0].data);
This produces a "TypeError: Cannot call method 'push' of undefined"
Just use Highcharts API's series.addPoint().
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 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
Im ploting a 3-pie chart as a single Highchart in a resizable container with VueJs and vue-highcharts component.
To do this, I need then to redefine my pies positions and sizes when the container is resized. Im having a huge struggle in redrawing the pies after I alter my series positions and sizes. Here's some code:
<template>
<div class="multiple-pie-wrapper" ref="root">
<vue-highcharts style="height: 100%; width: 100%;" :Highcharts="Highcharts" :options="options" ref="chart"></vue-highcharts>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts';
import Highcharts from 'highcharts';
export default {
props: {
options: { type: Object, required: true }
},
data: function () {
return {
Highcharts: Highcharts
};
},
components: {
VueHighcharts
},
methods: {
reflow: function() {
var series = this.options.series;
//... Calculate the new positions and sizes and set it to
// series[i].size and series[i].center
// HERE IS WHERE I SHOULD REDRAW IT
}
},
mounted() {
this.reflow();
}
}
</script>
The highchart options:
{
"title":{
"text":"3 Pies"
},
"credits":{
"enabled":false
},
"exporting":{
"enabled":false
},
"series":[
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":true
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
}
]
}
I have tried the following without success:
this.$refs.chart.chart.redraw()
this.$refs.chart.chart.reflow()
series[i].setData(series)
None of them have any effect and my pies are plotted as if the center and size are the default ones (therefore, overlaping each other).
Any ideas?
I've created a method that does graph redesign.
reloadTypeSeries(){
let pizzaCharts = this.$refs.pizzaCharts;
let updateSeries = JSON.parse(this.updateoptions);
let concatJson = [];
$.each(updateSeries, function(key, value) {
concatJson = concatJson.concat([[updateSeries[key].name, updateSeries[key].y]]);
});
pizzaCharts.chart.series[0].setData(concatJson, true);
}
Hope this helps!
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.