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.
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 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 am creating a plot chart in Flex that takes in an array collection. The array collection has the following format:
var provinces:ArrayCollection = new ArrayCollection (
{PROVINCE:"Ha Noi", Male:50000, Female:20000},
{PROVINCE:"Ha Tay", Male:100000, Female:10000},
{PROVINCE:"Quang Ninh", Male:75250, Female:45021},
{PROVINCE:"Hai Phong", Male:10000, Female:25000});
I want to use different colors to display different provinces on the plot chart. Moreover, I want to create a legend for different provinces. Would anyone know how to do it? Some code example would be great.
Thank you.
I think my question is simple for js experts (I am a beginner in js).
In my script I dynamically create a table. In html code I have a button and I want all table cells to be filled with some color when you click on this button.
I have a separate function for filling the table cells but the problem I have encountred is that when I click the button only the last cell of the table gets filled. I assume this issue has something to do with closures as the table cells are being created inside the loop.
Here is the code:
HTML:
<button onclick='show()'>Click</button>
JS:
var obj = new Object;
obj.x = document.createElement('table');
document.body.appendChild(obj.x);
for(i=0;i<10;i++){
obj.y = document.createElement('tr');
obj.x.appendChild(obj.y);
for(j=0;j<10;j++){
obj.z = document.createElement('td');
obj.z.appendChild(document.createTextNode(j));
obj.y.appendChild(obj.z);
}
}
function fill(){
obj.z.style.backgroundColor='red';
}
//-->
Each time the for loop iterates, obj.z is overwritten by a new one, meaning only the last cell will ever be referenced. An easier way to style all the cells in a table is very simply just to change the backgroundColor of the <table> itself.
If you want to do this another way, you'd need to loop through the cell elements individually, and style each one as you go. An easier way to do this is to use jQuery, add a className property to the value (such as theTable in this example) and use the following code:
$('table.theTable td').css('backgroundColor','red');
This would select all the <td> elements in a table with class theTable (it uses CSS selectors), and style their backgroundColor CSS property as red.
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)';