I have a flot chart with multiple series. I need to show y-values of all the series together when any point is hovered on for a particular x-value.
I'm using flot.tooltip for showing the tooltip. Is there any way to combine the y-values of all series like PowerBI does? Or or maybe even trigger the hovers of other points too?
Here's what I included in my chartOptions:
tooltipOpts: {
content: function (label, x, y) {
// titile
var text = "<i>" + vm.areaData[0].data[x][0] + '<br/></i>';
vm.areaData.forEach(function(series)
{
// series_label : value
text += "<b>" + series.label + ' : ' + series.data[x][1] + "<br/>" + "</b>";
});
return text;
}
}
As the X-axis has common values, I'm using that as title for the tooltip.
vm.areaData has the different series that are on my chart. I'm iterating through them and creating the tooltip that needs to be displayed.
Related
I Need 10 different Colors in Pie chart Using the Library of pykcharts.
Is it possible Because As per the Documentation they Provide only one shade_color.
Go through this link http://pykcharts.com/tour/pie
#Tkingovr chart_color is for all charts but One dimensional. You can use shade_color for One dimensional charts https://github.com/pykih/PykCharts.js/wiki/Colors#shade-color
#KIRANJOSHI
var selector = "pieContainer", // selector of your chart
colors = ["red","blue","green","yellow","orange"];
setTimeout(function() {
d3.selectAll("#" + selector + "_svg path.pie")
.attr("fill",function(d, i) {
return colors[i];
});
},1000);
setTimeout is required since the chart may take time to render and there is no provision in the current version to run a piece of code on chart render complete.
According to the documentation you should be able to pass in values like this:
{
"chart_color": ["blue","green","Yellow"]
}
The chart also accepts any of the following:
Color Names (Eg: "red")
Hex values (Eg: "#B0171F")
RGB values (Eg: "rgb(176,23,31)" )
I have a bar chart in flot and i want to have up or down arrows besides each data bar, as an indicator. Basically i want to add annotations to a flot chart.
I am looking for a chart like below,
You can add any HTML element to flot chart by manipulating DOM, below is a link that illustrates how this can be done,
http://www.isquery.com/devel/jquery/flot/examples/annotating.html
Make the below modifications to the snippet in the above link,
var o = plot.pointOffset({ x: 1, y: 15});
placeholder1.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:large"><img src="images/UpArrow.png" alt="image" /></div>');
I want to add a title to the legend box in Flot? For example, if my legend shows different Products, I want the title above the legend box to say "Products".
Somewhat hacky, but you can do it like this:
var $legend = $('#chart > div.legend'); // replace #chart with the id from your div
var $legendTitle = $legend.find('div').first();
$legendTitle.html('Products').height($legendTitle.height() + 15);
$legend.find('table').first().css('top', $legendTitle.position().top + 15);
I am using Scatter plot to visualize data http://bl.ocks.org/mbostock/3887118. I have more than 2 graphs on a page. I want to keep two options where an user can select
1. Normalize button: Values at x-axes will get normalized and new graphs are plotted.
2. log y button: Values at y axes are changed to log y and new graphs are built on the same page accordingly.
How to do this d3.js?
Also I am plotting this using Nodejs, Express and d3.js.
Till now I have built the graphs. These are the options to increase interactivity.
I think the best is to define two different scales:
var yNormal = d3.scale.linear() ...
and
var yLog = d3.scale.log() ....
and on button click redraw the circles using the other scale:
//in button event handler
if( /* log */) {
svg.selectAll(".dot").attr('cy', function() { return yLog(d.yourDataField); }
}
else {
svg.selectAll(".dot").attr('cy', function() { return yNorm(d.yourDataField); }
}
You can also use transition to animate the redraw like this:
svg.selectAll(".dot").transition().duration(500).attr('cy', function() { return yLog(d.yourDataField); }
You can also animate the rescaling of the axis using this method.
You can apply the same to X axis as well.
I have been stuck on this problem for days.
So I have a dataset of objects of the following form:
dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]
The following code would display the 4 metric names in a grid pattern (meshy, meshx are the coordinates points of the grid and meshsize is the size of the grid, so this is just putting the text in the middle of a grid square):
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d.metric;
})
.attr("y",function(d,i){
return meshy[i] + meshsize/2;
})
.attr("x", function(d,i){
return meshx[i] + meshsize/2;
})
.attr("font-size",25)
.attr("font-family","serif")
.attr("text-anchor","middle")
.attr("font-weight","bold");
Now I would like to put the value of the metric right underneath the metric name like so:
svg.append("text")
.data(dataset)
.text(function(d){
return (d.value);
})
.attr("y",function(d,i){
return meshy[i] + meshsize/2 + 20;
})
.attr("x", function(d,i){
return meshx[i] + meshsize/2 ;
})
.attr("font-size",25)
.attr("font-family","serif")
.attr("text-anchor","middle")
.attr("font-weight","bold");
But this only returns the value underneath the metric name for the FIRST metric, the other 3 value texts are not even in the DOM. I have tried multiple approaches including replacing .text with .html as described here:https://github.com/mbostock/d3/wiki/Selections#wiki-html with no success. I have also tried appending paragraph elements instead - this works but the p elements are positioned below the svg body in a list with no obvious way to move them into the right position. The code above is the closest I have come to getting what I need, but for some reason only the first value text shows up. However, I am open to any approach in d3 that gets the job done: 4 metric names with the values right underneath them
In your second block of code, you are only appending one text element, hence only one of them is appearing. What you need to do is to append the text similar to your first block, i.e. with the .enter() selection. For this, you have two choices. You can either save and reuse the .enter() selection, or assign different classes to the two kinds of text to be able to distinguish between them.
Option 1:
var texts = svg.selectAll("text")
.data(dataset)
.enter();
texts.append("text")
.text(function(d){
return d.metric;
})
// set position etc.
texts.append("text")
.text(function(d){
return d.value;
})
// set position etc.
Option 2:
svg.selectAll("text.title")
.data(dataset)
.enter()
.append("text")
.attr("class", "title")
.text(function(d){
return d.metric;
})
// set position etc.
svg.selectAll("text.value")
.data(dataset)
.enter()
.append("text")
.attr("class", "value")
.text(function(d){
return d.value;
})
// set position etc.
The first option is obviously shorter, but depending on what else you want to do, the second option may be preferable -- if you want to modify the text afterwards, it will be a lot easier if you can distinguish between the two kinds of text. You can also use the different classes to give different CSS styles.