I'm using c3.js which is a "D3-based reusable chart library." I have also created my own legend for a donut chart with a pie chart inside. I want to link the legend and charts so that if I click a legend item, it'll trigger animation on both the legend div and the corresponding path element on the donut/pie chart, or vice versa (clicking on the pie/donut path will trigger animation on both). I know you can set onclick event listeners for the c3 items, but without any id I can't identify the corresponding legend div. Also, if I set a click handler on the legend divs, I won't know the corresponding path and I also don't know how to trigger c3's built in click animations.
EDIT: I found that you can trigger a selected state (http://c3js.org/reference.html#api-select) but you must pass it an id. On my charts, there are no id's to pass in. Is there a way to set custom id's for each data point?
In order to use the select API call, you need not assign your own id. What you can do, is pass in the data set represented by the graph, and then the index(es) of the data point(s) in the data set to select.
For example, your donut chart is graphing a dataset called salesBreakdown which has 10 elements. When somebody clicks on the first div on the legend, you can call:
chart.select(['salesBreakdown'], [0], true);
This will set the selected state on the arc corresponding to salesBreakdown[0]. The true resets the state of all other arcs, you can leave this false if you want to do multiselect or something of the sort.
Related
How could I implement such mouseover effect that whenever mouse is over the linechart it shows every lines Y-value in an tooltip on hovered X?
So, in the end by moving mouse over the chart it should always show a tooltip that is updated constantly with Y value based on changed X? Now it shows tooltip only on X-scales steps e.g. 2010,2011,2012,2013,2014...
I don't have time at this very moment to write a complete solution, but I can try to point you in the right direction in terms of the part you will need that is directly related to the Google Charts API.
There Is Not A Simple Solution
First off, I'd like to make it very clear that there is not, to my knowledge, a simply solution built into the Google Charts API for this. Anything you right for this will involve rendering your own tooltip element, positioning it to the mouse location, and filling the tooltip with data yourself.
A JavaScript Framework of your choice will probably help a lot. Most have plugins or modules to handle mouseover and mouse position detection, though I can't recommend any specifically because I haven't tried this.
Chart Layout Interface
What you need to get the data values belonging to the mouse location is the Chart Layout Interface. You can get this as follows:
// create a line chart and set up a variable to store your interface
// on outside the scope of your ready handler, so you can use the
// interface in your mouse event code.
var layoutInterface;
var chart = new google.visualization.LineChart(document.getElementById('container-id'));
// set up a handler for the chart's ready event
// the chart layout interface is not available until the chart has
// been drawn
var readyHandler = function(){
layoutInterface = chart.getChartLayoutInterface();
};
// register the event handler
google.visualization.events.addListener(chart, 'ready', readyHandler);
I learned this from the demo here.
You will be using the getHAxisValue(xCoordinate) and getVAxisValue(yCoordinate) methods on the layout interface to get the data values corresponding to the x and y coordinates of the chart. The coordinates are relative to the chart's container element. See the Line Chart Documentation for information on methods available on the layout interface.
Mouse Event Handling
The mouse handling part of this is beyond the scope of my knowledge, but I do know that it is possible. I think you need to register a mouse enter event handler on your chart's container element, which would then register a mouse move, and mouse exit on the same element. The mouse exit would set display:none on your tooltip element and de-register the mouse move handler. The mouse move handler would set the absolute position of your tooltip element to the mouse location, and set it's content to the values retrieved from the chart layout interface.
Good Luck!
In Highcharts, is there a way to dynamically apply "halo" effect to points in scatter type charts without triggering hover event?
This is what I mean by halo:
http://api.highcharts.com/highcharts#plotOptions.series.states.hover.halo
You can call setState function on point and then apply SELECT / HOVER.
$('#btn').click(function(){
chart.series[0].data[2].setState('hover'); //alternatively SELECT state.
});
Example: http://jsfiddle.net/74s1cbmq/1/
I have been working on d3js charts and have made the cicular progress(the white arc that changes value smoothly).I haven't figure out how to make the label that changes according to the value of the arc.For example in the figure if the value of arc is more than 300 , the labels should update automatically.
.
Your code is almost there. To make it work, you basically need two changes. First, the circles and outer labels don't need to be redrawn on update, as they don't change. So I've moved the function call that does that out of the update function. Similarly, you don't need to append a new text element in the center of the circle to show the current progress, but just update the existing one.
Complete example here.
I'm using Highcharts v.2.3.3 and have built a pie chart. When a user clicks on something, I can replace that chart with a different one, but the replacing happens instantaneously. Is there a way to have the first pie chart fade out while the new pie chart fades in, so there is a "blur" effect?
Note: the first pie chart currently gets deleted before the new chart gets built.
I found a solution. I used jquery to clone the svg element of the first chart and appended it to a div that was absolutely positioned over the chart area. I then used that "dummy" chart for the fade out animation without needing to fade in the second chart.
var clonedChart = $('#chartContainer').find('svg').clone();
$('<div class="cloned_chart"></div>').append(clonedChart).appendTo('#pieChartWrapper');
// delete first chart and create second one
....
// chart creation callback
$('.cloned_chart').fadeOut('slow', function(){
$(this).remove();
});
I would fade out the current chart container using jquery like so :
$('#ChartContainer').fadeOut();
Then I would replace the chart with the new one and use jquery
fadeIn() to bring the chart back into view.
EDIT
The jquery fadeOut/fadeIn function's first parameter is an optional speed parameter, so you could time the animations so they "blur" together.
I want to show a column chart that will show empty columns on days without data. I have previously done this in amCharts, but trying to switch everything over to js charting.
Here is an example:
https://skitch.com/jhanifen/gy324/jhanifen-skitch.com
Basically if I could change the color of individual columns that would also work.
Answer provided on Highcharts forum.
http://highslide.com/forum/viewtopic.php?f=9&t=12873
You can set the y value to 100, and set a secondary value to the actual value, which you can then grab in the tooltip formatter.
see this example: http://jsfiddle.net/jlbriggs/BLxUL/
Depending on which you have more of, you can either set the bar color in the plotOptions, and call the 'blank' color in the data array when needed, or the other way around (as in the example)
Thanks jlbriggs!