I am currently in the process of creating a bubble chart using AmCharts. For the most part the process is quite easy.
I however the bubbles AmCharts create seem to be very weirdly scaled in proportion to each other. If I e.g. have two bullets with value "9" and "3", no matter what I do the graph will set the bullet with value "9" to be as large as allowed by maxBulletSize (this can be wider than a column which is also just weird) and the other as small as possible.
What I would like is to have the values fall in the range from 1 to 10, where 10 should fill out approx. a column (it should however never be bigger than a column as it can then overlap with other bubbles). Thus even though I may not actually have a bullet of size "1", size "3" should remain the same.
Is this possible?
Normally, this is not possible using just configuration options. However, you can apply this simple workaround: just add two invisible bullets: one with value 1 and the other 10. It will ensure that the scale will always be the same for any in-between values.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 3
}, {
"y": 5,
"x": 3,
"value": 6
}, {
"y": 10,
"x": 8,
"value": 4
}, {
"y": 0,
"x": 0,
"value": 1,
"alpha": 0
}, {
"y": 0,
"x": 0,
"value": 10,
"alpha": 0
} ],
"graphs": [ {
"balloonText": "[[value]]",
"balloonFunction": function(item) {
// using this in order not to display balloons for
// hidden bullets
if (item.alpha === 0)
return "";
return "" + item.dataContext.value;
},
"bullet": "circle",
"lineAlpha": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"alphaField": "alpha",
"minBulletSize": 10,
"maxBulletSize": 100
} ]
} );
#chartdiv {
width: 100%;
height: 300px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv"></div>
Related
I have a regular chart, and sometimes for example you do not get values in some series ( y value ) it ends up being null, but my goal is to go through all series and if he does not find in next serie Y value to move on to next and connect the dots.
{
"drilldown": false,
"y": null,
"name": "Febbraio",
"datetype": "string"
},
{
"drilldown": false,
"y": 0,
"name": "Marzo",
"datetype": "string"
},
{
"drilldown": false,
"y": null,
"name": "Aprile",
"datetype": "string"
},
{
"drilldown": false,
"y": null,
"name": "Maggio",
"datetype": "string"
},
{
"drilldown": false,
"y": 0,
"name": "Giugno",
"datetype": "string"
},
At the moment i have
And what i am trying to do is to connect grey dots with one line and black dots with one line.
Anyone have an idea what am i doing wrong ?
You can find my fiddle here
http://jsfiddle.net/zg9paq6e/
You are looking for the option connectNulls.
It can be applied to an individual series or all series by using plotOptions.
I added this to your series definition to get a line even when information is missing:
series: [{
connectNulls: true,
...
}]
Working JSFiddle(where I used connectNulls for one series): http://jsfiddle.net/ewolden/uL3cmpjv/
API on connectNulls: https://api.highcharts.com/highcharts/plotOptions.line.connectNulls
I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
Chart working in 2D
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Chart NOT working in 3D
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}
The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
http://jsfiddle.net/v66zt28y
So i am attempting create a horizontal bar chart that has a horizontal line showing average.
So far i have attempted the following:
First added my barChart series (it comes from the following array):
"series": [
{
"value": 100, "label": "F1"
},
{
"value": 25, "label": "F2"
},
{
"value": 30, "label": "Jedi Jeremiah 555"
},
{
"value": 40, "label": "F4"
},
{
"value": 55, "label": "F5"
},
{
"value": 60, "label": "F6"
},
{
"value": 71, "label": "F7"
},
{
"value": 15, "label": "F8"
},
{
"value": 88, "label": "F9"
},
{
"value": 90, "label": "F10"
}
]
Which converts to an array of the following objects:
{name: 'F1', orientation: "h", x: [100], y: ["F1"]}
Then afterwards i add the following series:
{
name: 'average organization',
type: 'scatter',
x: [60],
orientation: 'h'
}
This creates the following chart:
As you can see there is only a blue dot indicating the average which is not the result im looking for.
I know that there are shapes however i wish to have it as a part of the chart so that you can either select or deselect it.
Does anyone know how you might achieve this?
It would help if you would provide a jsFiddle or codePen or other example to execute it directly:-)
I think the problem is, that you want to have a vertical line but set orientation: 'h' to the last "average-organisation"-object instead using orientation: 'v'.
I reproduced your example in a jsFiddle and add the desired behaviour:
https://jsfiddle.net/vepycde0/
Hope it helps:-)
Edit: For hiding the "0" on yAxis use y: [""] as seen in that jsFiddle: https://jsfiddle.net/vepycde0/1/
Is it possible to build a stacked bar chart in D3 with different stacked levels?
I've been reading about it but cud only find examples which has same stacked levels.
In other words,
Instead of this JSON -
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 11},
{ "x": 1, "y": 10},
{ "x": 2, "y": 10}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 9},
{ "x": 2, "y": 9}
]
}
];
Can we create a bar chart with -
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 11},
{ "x": 1, "y": 10},
{ "x": 2, "y": 10}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9}
]
}
];
I read -
https://bl.ocks.org/mbostock/3886208
https://bl.ocks.org/mbostock/1134768
https://github.com/mbostock/d3/wiki/Stack-Layout
This is fairly easy to do, depending on how you design your loading of data into the chart.
Essentially the process would be:
Use the data() function with the layers variable, which allows you to then work with each data set individually
Add a g element using the enter() function of the result of step 1
Call data() again, this time using the values of the attached data (.data(function(d){return d.values;}))
Use the enter() function of the result of step 3 to generate the bars
Note that to get things to actually stack you will need to keep track of the current stacked height of each x position. All you have to do is generate an array of zeroes and update the value at index d.x when setting the rectangle's y attribute.
Fiddle showing a quick sample. To make this a fully working example, you'll have to add axes/scales and all the extra things.
I am a d3 newbie and I've been trying to customize the Streamgraph example (http://mbostock.github.com/d3/ex/stream.html):
I have run into some issues:
I want to assign a custom data property (for examples sake, lets just say its a label called "type") to each layer in the stream so that when you hover over that layer, a popup box appears with the "type" listed for that layer.
When I input my data source into the graph I use this code:
vis.selectAll("path")
.data(data0)
.enter().append("path")
The graph only seems to take data of the format:
[
[
{
"x": 0,
"y": 91,
"y0": 1.11
},
{
"x": 1,
"y": 290,
"y0": 1.11
}
],
[
{
"x": 0,
"y": 9,
"y0": 1.11
},
{
"x": 1,
"y": 49,
"y0": 1.11
}
]
]
Where each sub-array above corresponds to a layer in the streamgraph.
How can I pass data to the graph that allows me to add an extra "type" property for each layer?
Basically so that when I refer to the datum of a layer, I can just type something like d.type and extract that property?
I originally came up with a really hackish way to do it:
[
{
"x": 0,
"y": 9,
"y0": 1.11,
"type": "listings"
},
{
"x": 1,
"y": 49,
"y0": 1.11,
}
]
and then I refer to it in the layer datum by saying d[0].type, but this doesn't seem like the proper way to do it.
Use stack.values, and then wrap each layer's data points with some additional data for the layer. Your data will look something like this:
[
{
"type": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"type": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
]
And the stack layout like this:
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });