How to Set D3 Funnel Chart Label Legend - javascript

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

Related

Amchart 5 : Align bottom a Sankey graph

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)

Highcharts | Heatmap | Legend filters not working when updating data

I have an issue with how the setData function works with a series of kind 'HEATMAP', when updating the data, and when one or more legend filters have been disabled.
I use 3 colors to fill the Heatmap chart according to the value represented by the data (which works fine) , each color is shown as an item in the legend :
options.colorAxis = {
dataClasses: [
{
color: GREEN,
from: 0,
to: 50,
},
{
color: ORANGE,
from: 50,
to: 100,
},
{
color: RED,
from: 100,
to: 1e6,
}]
};
When I want to update the chart with new data coming from a server, I use :
this.chart.series[0].setData(newData, true, false, false);
This works fine as well, except when colors have been disabled by clicking on the legend items.
The problem is that all the colors that were filtered out by the filter reappear on the chart when data is updated ( image below , part 3 )
However, the legend is ok (what was disabled remains disabled).
Can you please help me find a solution ?
Thank you.
Please find below the visual description of what I explained :
FWIW, this is how I solved my problem.
Right after updating with
this.chart.series[0].setData(newData, true, false, false);
I just added the lines below ( toggle programmatically twice the visibility of the data groups ) :
const allItems = (<any>this.chart.legend).allItems as Array<any> ;
allItems.forEach( item => {
item.setVisible();
item.setVisible();
});

How to change the labels of hover info in Plotly.js?

In a chart I render using Plotly.js, I define titles for each axis. When mouse hovering the items within the chart, a popup is shown, but the "labels" shown do not use the titles I had defined.
For example, the default value for the x axis is x. I defined hellox as title and that value is show in the chart, but not when mouse hovering a value (x is still shown).
See a live example here of what I mean: https://codepen.io/anon/pen/qoGQvx
I've been looking a the documentation and I didn't find anything so far that did exactly what I wanted: simply change the labels in the popup.
Also the question is quite old, I would like to write a solution I came up when facing the same problem. I did define a var text array for hover info which I filled with the labels for x, y and z values. Please have a look at the following fiddle where I use a heatmap plot for demonstration (this is what I am using in my project, but it can be easily adapted for your chart option): http://jsfiddle.net/zLc5y63g/
This is the html code:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
And this the JavaScript:
var zValues = [[1, 20, 30], [20, 1, 60], [30, 60, 1]];
var yValues = ['data1', 'data2', 'data3'];
var xValues = ['condition1', 'condition2', 'condition3'];
var config = {
displaylogo: false
};
// fill in 'text' array for hover
var text = zValues.map (function(zValues, i) { return zValues.map (function (value, j) {
return ` ID: ${yValues[i]}<br> Condition: ${xValues[j]}<br> Value: ${value.toFixed(2)} `
});
});
Plotly.newPlot('plotly_chart', [{x: xValues, y: yValues, z: zValues, text: text, hoverinfo: 'text', hoverlabel: {bgcolor: '#41454c'}, type: 'heatmap', colorscale: 'Viridis'}], config );
Maybe this is still useful.

How can I add a number to my morris.js donut chart legend?

I have several morris.js charts that populate from my databases depending on certain search terms. Im using the following code to build a "Legend" for my donut charts. The code works fine but Im struggling with adding both a number and text, I'm getting a console error:
ReferenceError: value not defined
Here is the code I'm currently using (works great):
// Build the Donut:
var donut = Morris.Donut({
element: 'donut',
data : donutParts,
colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['label']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
This will give me a legend with matching color squares with the appropriate labels eg:
[red] UK
But I want:
[red] # UK
I've tried using .integer and other variations like so:
// Build the Donut:
var donut = Morris.Donut({
element: 'donut',
data : donutParts,
colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['label']).integer(['value']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
But this gives me the error that value is not defined, i want to take the value(v) from donutParts
Here is my donutParts variable:
// Fetch the data to populate the donut chart:
var chartData = JSON.parse( $('#chartData').val() );
// Break up the object into parts of the donut:
var donutParts = [];
$.each( chartData, function(k,v){
donutParts.push({
label: k,
value: v
});
});
Any help? cheers!
ANSWER
The following code produces the desired output:
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
This is a SS of the legend output after implementing the given answer
Big thank you to #WillParky93
So what I said in the comments was technically wrong but after further reading this is what the 'donut.options.data.forEach' is doing.
Create an object dom of <span></span> -> add the text from label['label'] (which appears to be UK in your example) -> add some <i> tags.
THEN
Find the newly created tags -> add the CSS rule for background colour
THEN
add it to your #legend
So the solution was actually more simple when thinking of it like this; the answer be just this:
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
The change is in .text(label['label']) which is now .text(label['value']+" "+label['label'])

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