I have implemented a Sankey diagram in JavaScript using Highcharts.js. I am currently trying to implement the same diagram in R using Highcharter (a wrapper of Highcharts for R).
My problem is that I am not able to set sankey.series.nodes like I did in JavaScript. The code for this in JS looks like the following:
series: [{
pointPlacement: 'on',
keys: ['from', 'to', 'weight', 'trx'],
data: data.data,
type: 'sankey',
name: 'Sankey Series',
nodes: nodes
}]
where nodes is an array of objects with the following format:
id: product.id,
name: product.product,
trx: product.trx,
color: nodeColor,
However, when I do this in R nothing happens ..
hc_add_series(pointPlacement = 'on',
data = productData,
type = 'sankey',
nodes = nodes,
name = 'Sankey Series')
I am quite lost at the moment and any help would be highly appreciated!
Related
I am creating a stacked column chart, and really just testing highcharts out. I would like to hear how people suggest solving the following case:
In a stacked column chart, I would need the following example code:
series: [
{ name:'seed', data: [12, 8, 9]},
{ name:'predicted', data: [121, 88, 97]}
],
xAxis: {
categories: ['tech', 'sport', 'finance']
},
This means that a single object in my db :
{ category: 'tech', seed: 12, predicted: 121 }
Needs to be split into two arrays which could introduce ordering bugs.
Is there no way to pass objects to highcharts and then manipulate them with some options?
Are you wary of depending solely on the order of elements in the data array for determining which category the elements belong to?
If so, I think the xAxis.type option might interest you:
xAxis: {
type: 'category'
},
series: [{
name: 'tech',
data: [{name:"seed", y:12}, {name:"predicted", y:121}]
}, {
name: 'sport',
data: [{name:"seed", y:8}, {name:"predicted", y:88}]
}, {
name: 'finance',
data: [{name:"predicted", y:97}, {name:"seed", y:9}]
}
]
Example: https://jsfiddle.net/ub2gwq61/
From Highcharts API Reference
In a category axis, the point of the chart's series are used for
categories, if not a categories array is defined.
I am trying to feed data to highcharts client. Currently highcharts expects data in below format.
[
[1515122457593,47,64.17,12.77,23.91,15969798],
[1515122497615,23.91,47.97,14.19,30.81,15969798],
[1515122537619,30.81,49.42,13.34,27.76,15969798],...
]
However, I could not find a way to store in same format in MongoDB. I think one possibility is as below.
{
{ "_id": 1, "time":1515122457593, "O":47, "H":64.17, "L":12.77, "C":23.91, "V":15969798 },
{ "_id": 2, "time":1515122497615, "O":23.91, "H":47.97, "L":14.19, "C":30.81, "V":15969798 },
{ "_id": 3, "time":1515122537619, "O":30.81, "H":49.42, "L":13.34, "C":27.76, "V":15969798 },
...
}
My questions are in both directions.
Direction 1: How do I make above mongodb friendly json format to be read by Highcharts OHLC.
Direction 2: How do I store Highcharts friendly data series in Mongodb?
Kindly share example as I could not find online any snippets that could help and all my trials are in vain. I got a hint here, but could not develop it further for my OHLC format (I am newbie to JS and webdev)
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]});
You should be able to achieve the exact document structure required by Highcharts using the below schema:
var schema = new Schema({
data: [[Number]] // array of array of numbers
})
Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: http://jsfiddle.net/amrutaJgtp/wgaak302/
series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Consumer',
y: 2455
}, {
name: 'Corporate',
y: 6802
},{
name: 'Home office',
y: 9031
}, {
name: 'Small Business',
y: 5551
}]
}]
Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?
In my opinion the answer is no.
Please refer to this demo: http://jsfiddle.net/kkulig/u3p1usz9/
I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.
Workaround
This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/
First I added additional two series that have no data:
{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series.
I created visible flag for every leaf for controlling its visibility.
Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.
legendItemClick: function(e) {
series = this;
data.forEach(function(leaf) {
if (leaf.id === series.name || leaf.parent === series.name) {
leaf.visible = !leaf.visible;
}
});
this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
}
API reference: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Update
If you want an animation to happen use addPoint and removePoint instead of setData.
API references:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Series#removePoint
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data
I created a simple line chart in Extjs4 for one of my projects, and the chart is not plotting the right data.
The chart uses the same store as the grid, but not showing the same data. Is there any way to trace the source of the problem, if not fixing it altogether?
The following is the code I use to generate the chart.
{
xtype: 'chart',
animate: true,
shadow: true,
store: 'Dataalls',
legend: {
position: 'top'
},
axes: [{
type: 'Numeric',
position: 'left',
title: 'Wind Speed',
fields: ['windspeed'],
grid: true
}, {
type: 'Category',
position: 'bottom',
title: 'Time',
fields: ['time']
}],
series: [{
type: 'line',
axis: 'left',
xField: ['time'],
yField: ['windspeed']
}]
}
(I tried using type: 'Time' for the x axis but gets the error "date.getFullYear is not a function" )
For the date.getFullYear() I suspect your date string is not parsable into a Date object. Could you post your other supporting code, ideally the full code of the Store and Grid? If you'd like to use the Time Axis you'll need to convert your date String into a date object via something along the lines of:
Ext.define('Your.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'dateString', type: 'string'},
{name: 'date',
convert: function(value, record) {
year = value.substring(0,4);
month = value.substring(5,7).replace(/^[0]+/g,"");
day = value.substring(8,10).replace(/^[0]+/g,"");
hour = value.substring(11,13).replace(/^[0]+/g,"");
// etc for min, sec, millis
return new Date(year, (month - 1), day, hour, 0, 0);
}
}
]
});
For debugging the chart not displaying correctly, I'd place assign your chart object to a var and in Firebug breakpoint after that variable assignment to be able to inspect your chart js object and look at the data inside.
I had a similar problem when using Time. Just fixed it by defining my model field types:
fields: [{name: 'date', type: 'Date'}, {name: 'close',type:'float'}]
As for why your chart is plotting like that, I got that before too, I realised that the json was passing it as a string, so I need to to be defined as a float too. I did a fix for that on the php end, by forcing it as a float first before I passed it over as json.