I am trying to display my data on a bar chart using highcharts. It works fine with unique names but when I tried to show different data with same names then it was displaying data on one bar but I want to display it on separate bars. So how can I display data with same names on different bars.
Here is link of my jsfiddle
{
name: '10100',
y: 8451720
}, {
name: '10100',
y: 1456480
}, {
name: '13050',
y: 187940
}, {
name: '13050',
y: 6991100
}, {
name: '13050',
y: 7167320 }]
Thanks
From docs:
uniqueNames: Boolean
When uniqueNames is true, points are placed on the X axis according to their names. If the same point name is repeated in the same or another series, the point is placed on the same X position as other points of the same name. When uniqueNames is false, the points are laid out in increasing X positions regardless of their names, and the X axis category will take the name of the last point in each position.
So you need to add attribute uniqueNames: false to xAxis
Related
I need a bar chart that comparatively displays two sets of data side by side along a horizontal axis.
So I have a stacked (but not clustered) column series XY chart (amCharts 5) which looks like this:
The plotted data is coming from an array of objects:
[
{
current: 61,
previous: 29,
...
},
{
current: 60,
previous: 29,
...
},
...
]
Now, how can I achieve this:
Do I need to find the average between current and previous then set that as a base, or do I really need negative values (say for previous) to achieve that? Either way, I was unable to make it look like above.
Found an example with amCharts4 but I don't understand how should I modify my chart to achieve the same mirror bar chart look.
I've put the chart together in a Codesandbox playground, I would appreciate some help. Data is hardcoded and there's an object with previous negative values aswell.
To do that, you need two vertical axes with opposite directions. They could be configured like so:
let yAxisCurrent = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
calculateTotals: true,
visible: true,
min: 0
})
);
let yAxisPrevious = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
inversed: true // <--- DO NOT FORGET THIS
}),
calculateTotals: true,
visible: true,
min: 0
})
);
Then add this line of code:
chart.leftAxesContainer.set("layout", root.verticalLayout);
Here is the result: https://codesandbox.io/s/sleepy-hooks-vwucth
I need to create a stacked bar chart to show Six Sigma value as shown in the image
Here the values in the Y axis are static. But the values in the X axis are not evenly spaced. The image is not properly designed. I am attaching a picture to illustrate the values of the X axis according to the value of the bars. In the picture the yield column corresponds to the values on the bars.
Also I need to show the values on the bar as shown in the image.
I have tried to use chartjs 2 but I can not figure out how to make a custom spacing scale for the X axis.
My attempt at modifying the X axis ticks is given below
let chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
yAxisID: 'yAxis'
}]
},
options: {
scales: {
xAxis: {
type: 'logarithmic',
position: 'right',
}
}
}
});
Any recommendations other than chartjs for this functionality would also be highly appreciated
I have a set of data basically from node-edge graph: a number of nodes (from A1...A10) and a list of edges (i.e. A1-A3, A2-A3, A4-A6 etc.). I want to create a bubble chart from this data, however, if I simply pass my edges as points I end up with axes reduced to nodes with edges (if A5 does not have edges, it will not show) and Y axis is sorted depending on the first edge point, not alphabetically (if A3 was in the first edge, it will be first on the Y axis). What I am looking for is to manually pass list of nodes (A1...A10) to plotly.js to build identical X and Y axes. Is it possible?
Found a suitable solution in Plotly.js: Cannot show full categorical x-axis
var layout = {
xaxis: {
title: 'x Axis Label'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['0001','0002','0003']
},
yaxis: {
title: 'Y Axis Label %>'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['one','two','three', 'etc']
},
};
However, still had to use autorange: true otherwise it would not display initial graph correctly
I have series with simple integer values. So there is no need to have float numbers as y-axis labels.
I use the axisLabelFormatter to convert y to integers. But the result is, that I have duplicated integer values on the y-axis.
How can I get a y-axis, which is labeled only with single integers at the correct place?
I would like to have the secondary y-axis with a different grid too
See also the example at https://jsfiddle.net/eM2Mg/9559/.
I have tried your example, modified it and I have got this result
I have modified your code the next way
var graph2 = new Dygraph(document.getElementById("graph2"), data, {
axes: {
y2: {
axisLabelFormatter: function(y) {
return texts[y] || parseInt(y);
},
drawGrid: true,
independentTicks: true,
pixelsPerLabel: 100,
gridLinePattern: [2,2]
}
},
legend: "always",
series: {
"State": {
axis: "y2",
strokeWidth: 2,
stepPlot: true,
}
},
strokeWidth: 2,
title: "my try to get what I want"
});
I have set the option drawGrid and independentLabels to true.
It is necessary to adjust the pixelsPerLabel to the size you think the 3 values auto, on, off are better shown.
And the grid patterLine to show a different grid for the right y axis.
You can also remove the drawGrid if you consider it look better without the grid.
I hope this could be a solution for you! Regards!
[
...
{
"RowID":85,
"Name":"Billy",
"B":2,
"S":2,
"S2":1,
"M":0,
"T":"0",
"H":1,
"S":0,
"W":1,
"N":2,
"Malty":1,
"Fruity":0,
"Floral":0
}
...
]
I need to create a bar chart. Just a regular bar chart.
There are a total of 86 JSON pieces of data (that is, you'll find 86 RowIDs). I only need to pick 5-10 that I want to work with. The x-axis are the "B", "S" ... "Floral" from the JSON. It does NOT include RowID or Name. So there should be "clumps" of 5 bars (colored corresponding to "Name") for each "B", ... "Floral" piece of data. The end goal is to make it easy for the user to visually compare 5 objects (distinguished by Name attribute) according to their attributes.
I've been working at least 24 hours on this problem. And I'm not making any progress. I've looked at tutorials and other posts on StackOverflow. I can't get any of them to work.
Anyone?
And no, this question does not have an answer somewhere else.
A fiddle: http://jsfiddle.net/zdy6d/3/
What you want to do is a grouped bar chart. The main thing you need to do is create 2 x-scales: one that gives the position of each group, or clump as you call it, in the screen and the other one that gives the position of each series (name in this case) inside the group.
// Where to position each clump inside svg chart
var x0 = d3.scale.ordinal();
x0.domain(d3.keys(data[0]).filter(function(key) { return key !== 'RowID' && key !== 'Name'; }));
x0.rangeRoundBands([0, width], 0.1);
// Where to position each name bar inside the clump
var x1 = d3.scale.ordinal();
x1.domain(data.map(function(d) { return d.Name; } ));
x1.rangeRoundBands([0, x0.rangeBand()]);
You then have to filter the data and maybe change its structure to a more convenient format (e.g. [{groupname: 'B', data: [{name: 'Bobby', value: 3}, {name: 'Tom', value: 5}, ... ]}, ...] should be similar to the one the example I linked uses)
Minimal working JSFiddle with example of data manipulation and rect creation: http://jsfiddle.net/LeartS/23huy/2/