I made a chart using Google Visualization's ColumnChart like this.
It's basically a stacked column chart using 3 x 7 matrix. In every bar, I remove the data for two other rows.
My problem is how to make the yellow bar (or other bar) looks like it has been clicked from the start using the Javascript code. Just like below.
*Notice the light border in the yellow bar.
You can programmatically select a bar by calling setSelection() on the chart. This can only be done after the "ready" event has been fired, i.e. you can set the selection upon this event being triggered as follows:
google.visualization.events.addListener(chart, 'ready', readyHandler);
function readyHandler(e) {
chart.setSelection([{"row":1,"column":1}]);
}
Here's a working example where we programmatically select the second bar after the chart has been drawn: http://jsfiddle.net/FFEZT/
Related
I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I have a bar chart with multiple Y-Axis as you can see in the image below.
As you can see the two bar represents two different datasets. The onclick event of the canvas provides us an array of all the bar points.
canvas.onclick = function (evt) {
var activePoints = chartObject.getBarsAtEvent(evt);
}
Now the problem is that in our application we have do two different thing based on which bar the user clicks on. Using the above points we are not able to determine which bar the user clicked on, meaning if the user clicks on blue bar then we need to do something or else if the user clicks on purple bar then we do something completely different. How can we determine which bar the user clicked.
Unfortunately, there is no support for that, you have to implement it by yourself.
See https://github.com/chartjs/Chart.js/issues/3115#event-792845174
See also this solution: https://github.com/chartjs/Chart.js/issues/1283
I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.
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);
});