Javascript Charts Filter Using Tooltips

[dcmcm5]

I am wanting to filter a second JS chart based on selecting, for example, a bar in a bar chart or a slice in an pie chart in another JS chart. Can that be done using the tooltip refresh event, or are there other ways to do that? I am wanting to avoid a button but just want to click on a part of one graph that filters the entire second graph, plus cascading that down to other graphs.

[Davidk]

Re: Javascript Charts Filter Using Tooltips

This was a lot harder than it should have been. Alpha doesn't expose, or set up, any events for RGraph. And... I believe event implementation for RGraph is different across different types of Charts.

Instead of me trying to explain this, please post a sample UX with 2 Charts and detail how you'd like to filter Chart2 based on Chart1... that will give me something to work with that will run for you when it's complete.

[dcmcm5]

Re: Javascript Charts Filter Using Tooltips

The attached pictures are screen shots showing the following:

Capture1 is a dashboard setup (not in Alpha) showing two bar charts and a table
Capture2 shows selecting the top bar on the first graph which filters the other two based on the first graph selection
Capture3 shows selecting a bar lower down on the second (middle) graph which filters the table

I would like to do something similar in Alpha. I can create easily using JavaScript Charts (or Google Charts of the AA Chart ux) the graphs, but would like to be able to click on a bar, for example, and see more details about that specific item.

[dcmcm5]

Re: Javascript Charts Filter Using Tooltips

This view is a clip showing the UX I created using JavaScript Charts pulling data from a SqlServer Database. I am wanting to do the same as in the above examples. I could set up a dropdown box to select and filter, but would prefer to be able to select a bar on the first chart to filter the second chart. Hopefully this will provide a picture of what I am wanting to do. I just need someone to point me in the direction of how to do it.

[RichCPT]

Re: Javascript Charts Filter Using Tooltips

The following describes two methods for adding events to rgraph:

https://www.rgraph.net/canvas/docs/h...ur-charts.html

[Davidk]

Re: Javascript Charts Filter Using Tooltips

Rich... have you tried those methods? Could you post an working example using either of those methods?

[dcmcm5]

Re: Javascript Charts Filter Using Tooltips

Thanks Rich I'll take a look at that.

[RichCPT]

Re: Javascript Charts Filter Using Tooltips

Sorry, Darol but that link I gave was for "canvas" charts. I think Alpha only uses the "SVG" charts from RGRAPH. I couldn't get any of the methods I found from RGRAPH documentation to work for making a clickable SVG graph in Alpha. However, I was able to use jQuery to attach event handlers to the SVG rect elements. Using the basic horizontal JS Chart example from alpha, I modified the js chart definitions to the following and I was able to click a bar and get the bar's offset and point value:

var _settings = function() { 
	var settings = {
        id: '{chartDiv}',
        data: [14,16,24,26,23,45,12],
        options: {
            yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            xaxis: false,
            colors: ['#bce2eb'],
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            title: 'Horizontal Bar Chart',
			attribution: false
        }
    };
return settings;
};

var _handleBarClick = function() {
	var idx = arguments[0].target.dataset.index;
	var val = arguments[0].target.dataset.value;
	alert('clicked Bar offset #: ' + idx + '  Data Point Value: ' + val);  
};

    var _chart = new RGraph.SVG.HBar(_settings()).draw();

	// Attach handler function to all 'rect' elements
	// It would be better to confine the attachment to just 'rect' elements of current chart
	jQuery('rect').on('click', _handleBarClick);
	
	{dialog.object}._jsCharts['{chartName}'] = {};    
	{dialog.object}._jsCharts['{chartName}'].countCharts = 1;
	{dialog.object}._jsCharts['{chartName}'].settings = [_settings];
	{dialog.object}._jsCharts['{chartName}'].object = [_chart];
	{dialog.object}._jsCharts['{chartName}'].dataSeries = [];
{dialog.object}._jsCharts['{chartName}'].drawMethod = ['draw']
{dialog.object}._jsCharts['{chartName}'].drawMethodArgument = ['']

[Davidk]

Re: Javascript Charts Filter Using Tooltips

Utilizing Data Series, I think this is what you're after. This gets the selected value of the clicked Bar... sets that value into a Textbox control... and then refreshes the data for 2nd Chart. The Data Series for the 2nd Chart is based on a SQL table and uses an argument which points to the Textbox control.

I loop through the first Chart bars attaching an onclick function for each bar. You could do the same for the 2nd Chart... but it's a little different. I think you'd need to draw the 2nd Chart fully after each click on the first chart... in order to re-build the bar onclick event.

http://youtu.be/PyGgtIxYxJc?hd=1

[dcmcm5]

Re: Javascript Charts Filter Using Tooltips

David - Great solution! I downloaded the files, set up the database, connected and everything works. This is exactly what I needed. Thanks for the help.
Rich - Thanks for your help. I started looking at your code and won't to spend some time with it and get it to work. I need to do a little jQuery training to learn that better and what you provided will be a good way to learn.

[Davidk]

Re: Javascript Charts Filter Using Tooltips

What I found, overall, is that the different types of Charts potentially need different ways of getting at their data... it's not always the same property of the Chart Object. The posted UX works for a Vertical Bar Chart, but may not work for a pie chart.