Google charts mouseover for two charts - javascript

This question concerns working with Google Charts.
I have a dataset consisting of categories with contribution amounts, bucketed into the days of a month. I represent the entire month in a pie chart, and I represent the data for individual days in a stacked bar chart. Both charts are essentially based on the same information. If I give both charts their information in the right order, the colors are coordinated between the two (i.e. each category in one has the same color as the same category in the other).
When you hover your mouse over a pie slice, it get highlighted. I would like to have the corresponding data in the stacked bar chart also get highlighted at the same time, and vica versa.
What would be the best way to accomplish this with the Google visualization api?

Use the <chart type>#setSelection method to highlight data points. If I understand your data structure correctly, something like this should work:
google.visualization.events.addListener(pieChart, 'select', function () {
var selection = pieChart.getSelection();
if (selection.length) {
// assumes the row in the PieChart's data corresponds to the data series in the ColumnChart, which is the nth + 1 column
columnChart.setSelection([{column: selection[0].row + 1}]);
}
});
google.visualization.events.addListener(columnChart, 'select', function () {
var selection = columnChart.getSelection();
if (selection.length) {
// assumes the data series in the ColumnChart's data corresponds to the row in the PieChart, which is the nth column - 1
pieChart.setSelection([{column: selection[0].column - 1}]);
}
});

Related

how to synchronize multiple d3 charts when zoomed?

function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle

Show top n-results in dc.js chart

I have a dataset with many (thousands) of 'categories'. I want to show a row chart with the top 15 categories, but can't figure out how. Without any default 'filters', the row chart shows every single category on the chart, which looks bad. I only want to show the top 15 categories, but based on the current crossfilter filters. How can I do that using dc.js & crossfilter?
Currently, my dimension function looks like:
const myCategoriesDimension = crossFilterData.dimension(
(d) => {
return d.category;
} );
And my group function looks like:
const myGroup = myCategoriesDimension.group();
My row chart looks like:
categoriesChart
.width(1200)
.height(1200)
.dimension(myCategoriesDimension)
.group(myGroup)
.elasticX(true);
I think you want .cap()
https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.capMixin+cap
It's not available for all charts but it is available for the row chart.

Update the dataset of multiple AmCharts with a Single Dropdown Change Event

I currently have 2 AMCharts on the same page and a single dropdown with values 2015,2016,2017,2018 in it.
I have followed this example to dynamically update the data in the bar chart
http://www.amcharts.com/tips/dynamically-loading-chart-datasets/
I also have a Pie Chart and would like to update the data with the same drop down but I am not sure how to connect it so that it also updates at the same time.
Any suggestions ?
Just expand the function that changes the dataset of the charts with your pie chart reference.
function setDataSet( dataset_url ) {
// chart2 should be the reference to your pie chart
chart.dataProvider = chart2.dataProvider = AmCharts.loadJSON( dataset_url );
chart.validateData();
chart2.validateData();
}
EDIT:
Here is a working demo.

Update second chart on mouseover

I'm trying to replicate the trulia's graph with D3.js, but only the main chart (the heatmap) and the daily graph (the graph bar that changes when you hover the mouse over a specific point on the main chart).
Using this example, I've managed to build the main chart with my own data. I also have the second chart. But now I have no clue on how to update this second chart when I hover on a point on main chart.
Essentially, what you're going to have is two different charts with different data. The first chart (the heatmap) controls the other one. Each data point on the heatmap has a day and an hour attribute, which we want to use to control the second graph. To do this, we can use two functions to control the second graph, and then call both of them every time someone clicks on a point.
The first function just needs to build a blank graph for the target day.
function updateGraphDay(newDay){
//Remove current graph and build graph for newDay
}
The second is one that will highlight a certain hour on the bar chart. I'm assuming here that your bar chart is in its own SVG, barGraphSVG, and all of the bars have the class hourBar, and that the data you used to create it has an hour attribute, like the heat map data.
function updateGraphHour(newHour){
barGraphSVG.selectAll('.hourBar')
.classed('selectedBar', function(d){ return d.hour === newHour });
}
Now you just call both of these when you hover on one of the rect elements in the bar chart.
heatMap.on('hover', function(d){
updateGraphDay(d.day);
updateGraphHour(d.hour);
});

jqPlot replot only shows legend, no data

I am attempting to replot a chart when the user selects the tab to display the chart(initially it is set to visibility:hidden). Once it plots the graphs again, I don't see any of the lines or bars in the graphs, I only see the legend. I want to see all of the data again. When I don't hide the element and just plot it, it works fine, but I need to hide the element so that data can be grouped together in a logical order.
Here is the code I use to plot the charts while it's hidden, jqPlots is an array which contains the variables used for plotting.
var plot = $.jqplot (DATA GOES IN HERE)
jqPlots.push(plot)
Then within the handler for displaying the div I have
for(var i = 0; i<jqPlots.length; i++)
{
jqPlots[i].replot();
}

Categories

Resources