Update Highcharts data, while drilled down (react) - javascript

I have a highcharts drilldown column chart that shows weekly spending, and users can drill down in each week to see the category breakdown.
Separate to the chart, users can also filter down the categories they want to see and we then pull the filtered down chart data and update both top and drilled down levels using the following snippet:
chart.update({
series: {data: updated_series_data},
drilldown: {series: updated_drilldown_data}
}, true, false, false);
This updates the data behind the chart fine, but behaves strange when it is run while the chart is already drilled down. By strange I mean the chart appears to remain drilled down and show the "back to weekly spending" button, but displays top-level data
let's say the user is drilled down and sees the below:
Then the user wants to filter out the groceries bar, we then go and pull the chart data filtered for that week and excluding groceries and update the chart. But running the snippet above then shows the top level data bar without drilling back up like so:
Is there a way to keep the chart drilled down and just update the viewed drilled down dataset? I tried only updating the "drilldown" element of the chart options, but that just turns the chart blank

Related

Ploty.min.js Always Display Data

I am fairly new to Ploty.min.js. The chart I am using is a line graph with a simple Y as values, and X as dates. When the user hovers over a data point it displays the data. My Goal is to pass into the layout or configuration of this chart a true or false to display all of the data as if they were being hovered over at all times.
I've seen hovermode as a layout option, but that either displays the data when hovered or not at all. I'm currently away from my work station so I can't display any code as of right now.
In the image below you can see that I have hovered over a data point and it shows the data. I would like all of the data values be displayed as if they were all being hovered over all at once.

MetricsGraphics.js linking two charts with different "chart_type" properties (javascript)

I'm using MetricsGraphics.js to plot a simple time series. I'm having trouble linking a "line" chart with a "point" chart using the linked: true option. The linking works when both charts are of the same type, but not when they're different.
The following jsfiddles show this. In the first, when you hover over data points in one chart, the points in both charts are highlighted. In the second, hovering over data points in one chart doesn't affect the other.
Both charts have chart_type: 'line': jsfiddle.net/7jc1h8vv
One chart has chart_type: 'point', the other chart_type: 'line': jsfiddle.net/7jc1h8vv/1
Question: How can I link a "point" chart and a "line" chart together? Alternatively, if that can't be done, then how can I create data symbols for each data point on the line in a 'line' chart, such that the two charts are effectively superimposed?
The MetricsGraphics.js library provides an option linked: true that will do the following, according to the doc:
Links together all other graphs whose linked option is set to true. When one graphic in that set is rolled over, the corresponding values in the other graphics are also rolled over.
See this example from the doc of two charts linked together.

Show hint data inside bar in DevExpress chart controls

I have an ASP.NET web forms application which uses DevExpress's bar chart controls. In the below side-by-side bar chart:
I needed to show some extra information apart from traditional x and y argument-values using series point's {HINT} pattern (Hospital Admissions: 130, (65%)) - as per the image.
Now, I need to show it in the bar itself. Like the control shows by-default for Stacked bar charts:
How do I push the Tool tip hint data to be shown inside the data bars?
Any suggestions, kind folks?
It is possible to access the current data row directly when handling the CustomDrawSeriesPoint event. Cast the e.SeriesPoint.
Tag property to the corresponding type (e.g., DataRowView). This should make it possible to update the SeriesPoint label text.
You can find a small sample project that illustrates this approach in the Chart Series Label from a dataset column that is not part of the series ticket.

Change fill color of selected point in Google Charts API scatter plot

I have a Google Charts scatter plot with various points specified on it. I also have a side bar with a list of values corresponding to the points on the scatter graph and when I select a side bar value, it highlights the corresponding point in the graph.
I would like to change the fill-color of the selected item when it is selected. Currently, my working selection code is:
$("#select").on('click', function() {
scatterChart.setSelection([{row: 1, column: 1}]);
});
I have tried using setValue() and setProperty on the data and have redrawn the chart but it has no affect.
Any help much appreciated.

Highcharts Drilldown Multiple Graphs

I have a page which includes a pie graph and a column graph using highcharts.
Very similiar to this example here,
http://jsfiddle.net/highcharts/Vf3yT/
The issue I'm having which can be seen in the example aswell, is
If I click on an item in the column graph to drilldown, I get "Back to Overview", I click it, and it takes me back no problem.
However, its when you try to drill down two graphs at the same time I get an issue. If I click on at item in column graph and then in the pie graph, and try to drill back up on column, it thinks the column graph has drilled down twice. and If I drill up twice on the column graph, I am then unable to drill up on the pie graph.
The graphs are rendered in different divs, using different options like so
optionsColumn.chart.renderTo = 'graph';
optionsColumn.chart.type = 'column';
var chart1 = new Highcharts.Chart(optionsColumn);
optionsPie.chart.renderTo = 'graphPie';
optionsPie.chart.type = 'pie';
var chart2 = new Highcharts.Chart(optionsPie);
The issue also exists in the example and I have been unsuccessful in finding a fix for this.
It's a bug in version from jsfiddle, it's already fixed on master branch, see: http://jsfiddle.net/Vf3yT/354/
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.src.js"></script>

Categories