Amchart 5 : Align bottom a Sankey graph - javascript

I try used Sankey graph from Amcharts5.
It's work, I filled my data, perfect.
But i want align the graph to bottom when i have white-spaces between 2 nodes. And i don't find how it's work.
My objective is to have white space at the top and stacked data at the bottom.
I create my graph so that :
var root = am5.Root.new(idDiv);
root.setThemes([
am5themes_Responsive.new(root)
]);
var series = root.container.children.push(
am5flow.Sankey.new(root, {
sourceIdField: "from",
targetIdField: "to",
valueField: "value",
nodePadding: 0,
nodeAlign: "justify"
})
);
series.nodes.setAll({
fillField: "color"
});
series.links.template.setAll({
fillStyle: "source",
fillOpacity: 0.35
});
series.appear();
See here how my graph look actualy : https://i.imgur.com/Q9P2rG7.png
Someone have a solution ?
Thank you
(Sorry, I don't speak english very well)

Related

How to Set D3 Funnel Chart Label Legend

I am trying to d3 funnel chart label legend in horizontal position.i mentioned only label name and value .I want label name with particular label color.Below i mention my sample code. Please someone review my example code and help.
var data = [
['L0', 4, '#080800'],
['L1', 5, '#702963'],
['L2', 0, '#6f34fd'],
['L3', 6, '#07fff0']
];
var options = {
width : 600,
height : 400,
};
var funnel = new D3Funnel ( data, options );
funnel.draw ( "#funnelContainer" );
You should have an attribute named labelColor to override on row-level and give it a valid hex.
labelColor : string, A row-level override for label.fill. Hex only.
Working example D3 Funnel

jqplot draw vertical line in graph

My program is drawing a graph with the following (comparable) source code from the jqplot page. The goal is to draw a vertical line at position x in the graph. I followed up the guide an examples on the jqplot page, but it didn't draw the line, just the graph.
Is someone experienced with that? Or could tell me how the options/calls should be to get the line in the graph?
Example-code:
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
// Give the plot a title.
title: 'Plot With Options',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
Adding this to your existing code should help you draw a vertical line.
CODE:
canvasOverlay: {
show: true,
objects: [
{verticalLine: {
name: 'stack-overflow',
x: 4, // x-axis position where you want to draw the vertical line.
lineWidth: 6,
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
You can set the 'x' to a desired value of your choice.
IMP: In order for the canvasOverlay to work, you must include the jqplot.canvasOverlay.min.js file, else it will not work.
Here's a working fiddle: jqPlot - Draw vertical line on the graph
I included the following files in code above(JS Fiddle). You can also refer to the External Resources section on the left pane in JSFiddle.
jquery.jqplot.min.js
jquery.jqplot.min.css
jqplot.canvasOverlay.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqPlot Example here - jqPlot Canvas Overlay
Hope it helps :-)

How to place data labels out side the donut chart with lines using jqplot?

If the area is very small then the labels are getting overlapped in the donut chart.
How to place the data labels outside the donut chart with lines.
Currently I am able to draw the labels inside the chart. Find the sample code from here:
$(document).ready(function(){
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var plot3 = $.jqplot('chart4', [s1], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
dataLabels: 'value'
}
}
});
});
fiddle
This is my expected output:
Helps much appreciated
Ok, what you need to set is:
dataLabelPositionFactor: 2
Please see jsFiddle here:
http://jsfiddle.net/9gXc3/1/
And further info here:
http://www.jqplot.com/docs/files/plugins/jqplot-donutRenderer-js.html
Update
I'd also set the padding too to avoid overlap i.e.
padding: 50
http://jsfiddle.net/9gXc3/3/
Use, dataLabelPositionFactor: 1.2, inside rendererOptions.
Below is an example I used in a project:
rendererOptions: {
padding: 8,
showDataLabels: true,
dataLabels: percentage,
dataLabelFormatString: '%s%%',
diameter: 300,
dataLabelPositionFactor: 1.1,
sliceMargin: 4,
startAngle: -90,
color: '#DCDCDC'
}

How to provide Space between Y-2 Axis Labels and Title at Y-2 axis in Flotr2 Multi-Axis Chart

I'm Using Flotr2 for Multi-Axis Chart creation..
Here is the Flotr2 Multi-Axis Chart Image:
In this Multi-Axis Chart at Right side Axis Labels and TITLE are overlapping..
I need How to provide some space between Axis Labels and TITLE for easy reading.
I'm adding the reference of this Multi-Axis Flotr2 Chart Url: http://www.humblesoftware.com/flotr2/#!advanced-titles
Can anyone help me pls..
It is a bug, as can be seen here:
https://github.com/HumbleSoftware/Flotr2/issues/151
A good workaround for me is to put in the page html an image with the axis title in the right corner of the graph,.
You could try changing the labelMargin in the grid object.
grid : {
verticalLines : false,
backgroundColor : 'white',
labelMargin: 20
},
Seems to help a bit, but it effects all the labels.
Okay, live with the bug for now.
Add spaces to the tick labels (the numbers) would do the trick making room for the axis label.
function addSpace(v,axis) {
return Flotr.defaultTickFormatter(v,axis)+" ";
}
...
y2axis: title:"Leistung (W)", tickFormatter:addSpace,
Three spaces (0x20) are sufficient for me.
Later I found, IMHO, ist is a bug in the internal getBestTextAlign member function. When I remove the two obscure angle-dependent alignment adjustments, everything works fine:
getBestTextAlign: function(angle, style) {
style = style || {textAlign: 'center', textBaseline: 'middle'};
angle += Flotr.getTextAngleFromAlign(style);
// if (Math.abs(Math.cos(angle)) > 10e-3)
// style.textAlign = (Math.cos(angle) > 0 ? 'right' : 'left');
// if (Math.abs(Math.sin(angle)) > 10e-3)
// style.textBaseline = (Math.sin(angle) > 0 ? 'top' : 'bottom');
return style;
},
I have no idea what's the idea behind this code. It is not commented at all. Sorry, no good coding practise.

jqplot: draw series

I want to draw some data using jqplot and I have a small issue.
The code I use is this (code on fiddle):
$.jqplot('chart1', [[202],[249],[148]], {
seriesColors : ['#ff0000', '#0f0', '#00f'],
seriesDefaults : {
renderer :$.jqplot.BarRenderer,
pointLabels : {
show : true
},
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
rendererOptions : {
barDirection : 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ["some value", "other series", "third series"],
},
},
});
The graph has 3 horizontal regions, "some value", "other series" and "third series"
I need that each graph bar to be under corresponding region, and to keep the colors as now (red to "some value", green to "other series" and blue to "third series").
How do I need to format the data to get this?
As extra questions:
I want few pixels margin between yaxis and corresponding axe labels. How do I set this?
The graph has a bg color (fade yellow). How do I eliminate that color and to get as bg whatever color the container has?
You need to change your data to
data = [[[202,1],[248,2],[148,3]]];
See working example here.
PS1 : You can change width of the bar by setting barWidth = xx; where xx is in pixels (50px in given example).
PS2 : For your first extra question, you can add something like this :
$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5});
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5});
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5});
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5});
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5});
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5});
I'm pretty sure you can make it a cleaner way but it works (change the +5 values to whatever you need in order to move the chart block). Please see an updated working example here

Categories