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>');
Related
My DataFrame looks similar to this:
name
reached points
Jose Laderman
13
William Kane
13
I am currently displaying the aggregated count of students reached points of an assignment on an Altair bar chart within Streamlit like this:
brush = alt.selection(type='interval', encodings=['x'])
interactive_test = alt.Chart(df_display_all).mark_bar(opacity=1, width=5).encode(
x= alt.X('reached points', scale=alt.Scale(domain=[0, maxPoints])),
y=alt.Y('count()', type='quantitative', axis=alt.Axis(tickMinStep=1), title='student count'),
).properties(width=1200)
upper = interactive_test.encode(
alt.X('reached points', sort=alt.EncodingSortField(op='count', order='ascending'), scale=alt.Scale(domain=brush, domainMin=-0.5))
)
lower = interactive_test.properties(
height=60
).add_selection(brush)
concat_distribution_interactive = alt.vconcat(upper, lower)
Which produces this output and everything looks fine
The information I want my tooltip to show is a list of students that reached the specific amounts of reached points I'm hovering over. When adding something like:
tooltip='name'
the way my bar chart seems to display values has now been altered to this
When adding something like
tooltip='reached points'
The data seems to be displayed normally but without a tooltip that gives me the necessary information. Is it possible to display tooltip data that isn't used in my x or y axis but still part of the DataFrame I'm putting into the chart?
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.
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);
Posted this on google group, but post seems to have disappeared so will try here.
I have a data array which I use to populate the flot chart series data and all works fine. I now want to make both the legend and related segment clickable so I can "drill down" to more detail in the pie chart and have another pie chart show with a breakdown of that segment's data.
The label formatter custom function is obviously where to do this, but it only accepts label and series and the series doesn't seem to contain the index of the position in the array of each series object as it passes through the label formatter function.
I'm trying to do something like:
function labelFormatter(label, series)
return '<a href="#" onclick="myfunction(" + series.index + ")>" + label + "</a>"
}
...so that I can pass the clicked segment details. I suppose I could just use the label passed and then search through the original data array for a match and use that index position to work out the item clicked, but it seems a bit long winded.
Am I missing some functionality here or is it just not possible to do it the way I'm trying?
The legend by default shows series in the same order as you provided them. You can therefore use a regular jQuery loop to turn them into links, or simply add click listeners.
$.each(".legend tr", function(i, row) {
addDrillDownListener(row, series[i]);
});
Working with the pie slices themselves is even easier, since the hover and click callbacks receive an object with a seriesIndex attribute.
I found this solution.
If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?
Thanks
Sorry for my bad English.
Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:
$("#highligher").click(function () {
var e = jQuery.Event('click');
e.pageX = 250; //add a made up x/y coordinate to the click event
e.pageY = 250;
$('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});
Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/
The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.
Just got this working by altering a few things...
I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.
Then, after these two lines in jquery.flot.pie.js...
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
I added...
plot.highlight = pieHighlight;
plot.unhighlight = pieUnhighlight;
We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.
var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});
The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.
NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:
var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';