Develop Reference

How to highlight a portion of Google Bar Charts determined by category filter?

I'm wanting to replicate a bar chart done in Power BI using google charts, and one of the features I am attempting to implement is this filter effect as shown by the two pictures I've attached a link to.
Bar Chart Before Filtering
Bar Chart After Filtering
I can add example data in a reply if necessary, but the concept is that the bar chart before shows 100% of data made up of sub categories, and on selecting a category from a drop down menu, the percentage coming from that sub category is highlighted while the rest is made transparent. I've searched through the Google Charts documentation and previous questions however I haven't found any information on how to implement this or if this effect is even possible. The controls included in the API seem to only be able to redraw the chart entirely, not keep the chart and highlight the portion filtered.
I've considered having two charts overlaid on top of each other, with the chart on top changing based on the user category selection and the chart on bottom remaining static, however, I'm not sure if that implementation is optimal or possible. Ideally, I would also be able to replicate this effect on other categorical based charts, such as a pie chart. I'm wondering if anyone has any ideas on a workaround in order to create a similar effect, or some input on whether this effect is even possible using the google charts API and JavaScript/HTML/CSS.

Highcharts ajax loaded tool tip

I have a high chart on my web page which is plotting the interval data of no. of tweets vs time and it is working perfectly fine, but what i want is the tool tip to show the top tweet of that time, for that i need to make an Ajax call every time the charts pops up an tool tip.
But i am not getting how to make an Ajax call in high charts tool tip (a simple get request), and how to cache it so that it doesn't make the same request again and again on the same x-axis point.
Also there is no proper reference available for this question on internet..

If you want to change the tool tip that shows up when hovering over the chart you can set this when setting up the chart by using
tooltip:
{
formatter: function()
{
return (/some html that returns what you want/);
}
},
Also you can interact with the chart after it's loaded by doing the following:
var chart = $('#name-of-your-chart-div').highcharts();
Hope i've understood your question correctly.
Also a great place to look is the Highcharts API: http://api.highcharts.com/highcharts

Show labels per serie in Highstock.js as in Highcharts.js

I'm planning to use Highstocks.js after having used Highcharts in some other projects and I've noticed that the labels when moving the mouse over a series are not the same as in Highcharts.js making it more difficult to be read.
Instead of showing only the information of the selected series, it shows the information of all of them in the same label.
This might be a bit confusing when there's multiple series as you have to pay attention to the color to identify the series name.
It doesn't even highlight the series you are currently over or anything to simplify the viewing to the final user.
You can see what I'm talking about with this two examples:
Highcharts.js (How I would like it)
Highstocks.js (How it actually is)
I'm wondering if there's anything which can be done to emulate that behavior. I've been taking a look at the series options but I didn't find anything similar.
Thanks.

Sure you can, it is very easy, just add:
shared: false
for tooltip options object on chart initialization.
fiddle: http://jsfiddle.net/5RGaC/

Dynamically applying plot bands to a Highcharts graph

I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?

Yes, this can be done with xAxis[i].addPlotBand().

Adding additional information to Highstock point

I am using the Highstock library (not Highcharts) and I'm running into an issue I'm sure can be solved.
I need to add some dynamic information to each point on a series. Highstock has a built in tooltip that displays limited information about a point onHover.
I have tried adding a new property to the point at the time of creation; however, this new property is not available in the tooltip.
What's interesting is this exact functionality is available in the Highcharts library, but I would like to stick with Highstock if at all possible.
Here is a fiddle showing the desired result in Highcharts.
I have started looking around inside the Highstock javascript file looking for a way to expand the properties of the points that actually get added to the series and I have had some limited success.
I have added the property to the block beginning on line 8319 and again on ll320. This does seem to work, but only when the chart is zoomed in... very odd.
Has anyone tried this before, or have some insight on what I may be overlooking?

You can simply add own custom properties, then in tooltip you have access to them via:
this.points[x].point.options.your_property;
See: http://jsfiddle.net/dWDE6/199/
There is only one limitations which you should be aware of: when dataGrouping is affected all points are created as new one, so you don't have access to that custom properties.