Fiddle: https://jsfiddle.net/h7zf55b0/
I have a graph I am trying to design with the given data. The problem is I am getting category collision as its possible that multiple data points have the same date (which I use as the category axis).
{
'data': "18.46",
'date': "2015-12-31T09:36:00.0000000Z",
'type': "bid"
},
{
'data': "40.3918",
'date': "2015-12-31T09:36:00.0000000Z",
'type': "ask"
},
amcharts is handling this by drawing the columns over each other as shown in the fiddle.
Is there a way to make amcharts put these columns next to each other? Or stack them?
Ideally I want to be able to specify 'type' as a grouped element or something, so that the columns are labeled "40.3918 ASK 9:36am"
On date-based category axis, the chart tries to retain natural time scale. So if you have several columns on the same category, it draws them over each other.
You can disable this functionality by setting equalSpacing: true in your categoryAxis.
This way the chart rather than putting columns where they are supposed to be in time, will put each data point consecutively, regardless of the order and distance in time between them.
"categoryAxis": {
"gridPosition": "start",
"parseDates": true,
"equalSpacing": true,
"minPeriod": '60ss',
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
As for what is shown in the balloons, you can use balloonText or, if you need some very custom functionality to generate balloon data balloonFunction.
Another option would be to combine those data points into same-category data points, as well as define a graph for each type:
https://jsfiddle.net/h7zf55b0/1/
Related
Based on this example:
https://cdn.rawgit.com/hkelly93/d3-relationshipGraph/master/examples/index.html
D3 should allow me to create this chart and define colors and thresholds for when values change color. The function accepts some custom settings:
var graph = d3.select('#graph').relationshipGraph({
maxChildCount: 10,
valueKeyName: 'Story title',
thresholds: [6, 8, 10],
colors: ['red', 'yellow', 'green'],
showTooltips: true
})
But I'm not getting a graph with three colors when I load data fitting into all 3 ranges. I want 0-6 to appear red, 7-8 to appear yellow, and 9-10 to appear green. Here's the data loaded (excerpt):
[
{"parent": "2012-October", "organization": "WEWASAFO", "value": 10, "Story title": "NUTRITION"},
{"parent": "2012-April", "organization": "Jitegemee", "value": 5, "Story title": "Life in the street"},
{"parent": "2011-May", "organization": "KENYA YOUTH BUSINESS TRUST (KYBT)", "value": 2, "Story title": "BUSINESS"}
]
Everything else parses correctly, except combining custom colors an custom thresholds on the same chart. Either one alone works, but not both together.
The source repo is here with some docs:
https://github.com/hkelly93/d3-relationshipgraph
From that documentation:
thresholds: [100, 200, 300], // The thresholds for the color changes. If the values are strings, the colors are determined by the value of the child being equal to the threshold. If the thresholds are numbers, the color is determined by the value being less than the threshold.
colors: ['red', 'green', 'blue'], // The custom color set to use for the child blocks. These can be color names, HEX values, or RGBA values.
It doesn't explicitly state that the child colors correspond to the order that the thresholds appear. And all blocks appear red in this example.
I tested the code here: https://jsfiddle.net/cgrx3e9m/
This turned out to be a bug in the module itself. I notified the author and he fixed the way it sorts thresholds so it matches up with corresponding colors now.
I've spent a lot of time finding the solution, but i can't see any property in AmChatrts documentation that can align balloons not vertically. Actually, I just want to see all balloons, but not in one column. Can anybody help me?
There is currently no way to make the balloons stack in any different way than in once column. However, there are a few alternatives you can consider.
1) Displaying just one balloon.
To do that, set oneBalloonOnly to true:
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"oneBalloonOnly": true
}
});
This will make the cursor display just one balloon of the closest graph.
2) Disable balloons and use a legend instead.
To disable balloons, simply set [valueBalloonsEnabled][3] in chart cursor's settings to false.
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"valueBalloonsEnabled": false
},
"legend": {}
});
The legend will show relative value next to each graph title when you hover over the chart.
3) Consolidate values from multiple graphs into a single balloon.
To do that, use graph's balloonText property. It lets you reference to any field in data, so you can make it display values from any graph.
Here's a good example of the above.
Here's a good demo on how to do that.
I have been struggling with this issue for a long time with very little progress. I was going to put my code up here but it becomes quite long and convoluted and I'm still not sure I am even taking the correct approach so I thought backing up, showing the data and saying what I want to accomplish would be a approach to take.
Basically my goal is to create a d3 force layout. All data will be 'hard coded' into the page. I have done some network analysis on the nodes and have included those metrics in the dataset (eigenvector, betweeness, etc.) I want to be able to create the network vis, and have sliders that I can use to filter the network down by the various metrics. In other words I have a range slider that is set to the min and max of the network's “degree” metric (as an example) and as I adjust the slider values the network filters the nodes that fall outside those values. I want to be able to filter these nodes out and back in.
I've seen a number of examples of filtering and most are concerned with reducing the network and don't speak to the restoring the nodes. My attempts have resulted in either nothing happening, or multiple copies of existing nodes being created, or any number of behaviors, but not what I'm after. There is so many ways to 'skin the cat' in d3 that I keep going down paths that don't allow me (or I'm just not able to understand) to control the filtering the way I want.
I don't want to just control the visibility, I want the nodes to be removed and restored completely, and for the network to readjust smoothly.
Here is a sample of the data that I am using ...
var dataset = {
“directed”: false,
“graph”: [],
“nodes”: [
{
“category”: “new”,
“eigen”: 0.05923,
“between”: 0.0,
“close”: 0.25265,
“deg”: 1,
“id”: “Name1”,
“uid”: 100006190145565
},
{
“category”: “known”,
“eigen”: 0.00411,
“between”: 0.002002792177543483,
“close”: 0.19151,
“deg”: 3,
“id”: “Name2”,
“uid”: 100002598631097
},
{
“category”: “new”,
“eigen”: 0.0,
“between”: 0.0,
“close”: 0.06203,
“deg”: 1,
“id”: “Name3”,
“uid”: 727631862
},
{
“category”: “new”,
“eigen”: 0.00725,
“between”: 0.0,
“close”: 0.21037,
“deg”: 1,
“id”: “Name4”,
“uid”: 100008585823128
},
],
“links”: [
{
“source”: 0,
“target”: 1
},
{
“source”: 0,
“target”: 1
},
{
“source”: 0,
“target”: 3
}
],
“multigraph”: false
};
I can supply some of my code as well, but I think it would simply muddy the discussion as I have tried multiple approaches, none of which worked well, each of which just seemed to confuse me further when I would achieve partial results. Any help you can provide would be greatly appreciated.
I'm working on a visualization tool for time series with multiple dimensions.
To simplify my case, each data-point has a dimension on type, clusterId and a set of months:
{
type: "green",
clusterId:42,
months:[1392185580000, 1394604780000, 1397279580000]
}, {
type: "red",
clusterId:43,
months:[1392185580000]
}
Now I would like to show the dates in a dc.barChart, which shows the months of all datasets as keys(bars), and the number of observations of each month as value of the bar.
In the given case, it would result in 3 bars, the first one with a height of 2, and the other with a height of 1.
How can I create this dimension and implement the grouping/reducing function?
You don't have to worry about filtering by this dimension, I already have a custom filter for this dimension. The only thing is displaying the bars on the barChart.
If i get this correctly, you need some code, that outputs: 1392185580000: 2, 1394604780000: 1, 1397279580000:1?
arr.forEach(function(d) {
d.months.forEach(function(month) {
if (!store.hasOwnProperty(month)) {
store[month]=0;
}
store[month]++;
});
});
demo fiddle
I want to visualize data count in d3. I have a dataset similar to this:
[
{
"name": "Team blue",
"color": "#0433ff"
"count": 9
},
{
"name": "Team red",
"color": "#ff2600"
"count": 12
}
]
and I want to visualize it like this: http://i.imgur.com/xjFeNYd.png
I understand the basics of data and enter() but I do not know which is the best way to create the red or blue boxes based on the count value.
Any help will be appreciated.
You can d3.range(number) to generate a range of numbers from 1 to number. You can then combine this with nested selections. The code looks like this:
block.selectAll("span")
.data(function(d) { return d3.range(d.count); })
.enter()
.append('span')
Complete demo (with fixed CSS) here. The way of getting the color for the span elements is a bit hacky at the moment as it indexes into the top-level data set. A cleaner way would be to make this data part of the elements generated with d3.range() and is left as an exercise for the reader.