We Keep Coding

Drill down capabality in C3.js

I have a simple bar chart that displays two teams. Here is the screenshot.
Now for instance if I click on bulls it should show drill down and show another bar graph which will have 5 bars each representing a player from the bulls. If i click on Lakers it should drill down and show another bar graph which will have 5 bars each representing a player from the Lakers.
For instance After I click on bulls it should show something like this.
So in short I am looking for drill down feature. This is the code I have so far.
Here is the code I have so far and here is my FIDDLE.
var chart = c3.generate({
data: {
columns: [
['bulls', 30],
['lakers', 50],
],
type : 'bar'
},
});
I would appreciate on knowing how to achieve this or even if someone can edit my fiddle to show me some dummy example.

You'd simply need to determine which data point had been clicked, then load in the player data and unload the team data.
onclick: function (d, element) {
chart.load({
unload: ['bulls', 'lakers'],
columns: <player data for the clicked team>
});
}
Updated fiddle: http://jsfiddle.net/mcuepavh/1/

Getting highcharts to re-animate a line graph

I would like to create a highCharts page with a button to "re-animate" the chart.
When I initially create the series, I set the 'redraw' to FALSE:
$("contain").highcharts().addSeries({
name: "filter",
data: result
}, false, {duration: 300000, easing: 'linear'});
When I then manually call redraw() on the entire chart:
$("contain").highcharts().redraw()
...the chart animates from the start - BUT ONLY ONCE. After the charts are animated 'on-screen', I've found no way to have them re-animate from the start EXCEPT FOR REMOVING AND THEN RE-ADDING, not an ideal solution for my case as there will be many series (lines) & ALOT of data such that I was hoping there was a simpler solution (I see somebody answered while I editted the question)...
Is there any way to do this or will have to remove and then re-add the series each time I want to re-animate?
Here is the fiddle I promised earlier. It's using the remove/re-add concept which I do not love : http://jsfiddle.net/bhilleli/854jbbhg/

If you want to reanimate the same series, you will want to remove your current one and redraw it as a new series.
$('#button').click(function() {
$("contain").highcharts().series[0].remove();
$("contain").highcharts().addSeries({
name:"filter",
data: result} );
});

c3 chart.load with multiple charts

I am using c3.js and c3.css to make several graphs on one page. I have multiple charts and want to update the data every 60 seconds so I use set interval, get the updated data, and then load it to a chart, however, it puts all of the data in the most recently made chart. I attempted to add a bindto to the data so it goes to the correct graph, but it still loads onto the bottom graph. how can I fix this?
...
<div id='chart1'></div>
<div id='chart2'></div>
...
function update()//this function collects the new data in arrays cols and xrows
...
setInterval(function(){
update();
chart.unload();
chart.load({bindto:'#chart1',columns:cols, xs:xrows});
},3000);

For showing update data atfirst
hide previous data's DIV
Use CLEAR to for cleaning Data
Again Load the DIV

If anyone's still looking to do this I've found a solution.
When you generate each chart, the declaration ends with:
}); }, chart = generate();
If you rename chart like so:
}); }, first_chart = generate();
Then you can manipulate that chart like so:
first_chart.load ({ <some_stuff> })
Give each chart variable a distinct name and you can edit them distinctly.

amCharts pie chart how to customize the balloon text

I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.

For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],

You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.

You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";

SDK2: Issues with Rally Grids

SDK2 Rally grids are seriously great and flexible, but there are a few significant issues I have run into:
% done columns like LeafStoryPlanEstimateTotal for Portfolio Items show orange arrows when there is an issue (like not all stories have plan estimate), but there in no popup (which you get when viewing them in Plan -> Portfolio items)
No drag and drop ranking
No coherent display of the rank field (it shows the raw real number)
Are these on the near term roadmap? Are there any workarounds?

1) The PercentDone tooltips should work. Are you getting any script errors in the console when hovering over the PercentDone bar in your grid?
2) You should be able to simply set enableRanking to true in the config when creating the grid: http://developer.rallydev.com/apps/2.0p5/doc/#!/api/Rally.ui.grid.Grid-cfg-enableRanking
(It shouldn't be necessary to include the Rank field in the grid to enable this functionality)
3) Currently there is no built-in way to show the friendly rank like the Backlog page does. You would have to implement a custom renderer for the Rank column:
columnCfgs: [
'FormattedID',
'Name',
{
text: 'Rank',
dataIndex: 'Rank',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
//Use this info to render the friendly rank
return rowIndex + 1;
}
}
]
Note the above really only works when the grid is sorted by Rank- it was more an example of how to specify a custom renderer.