Highcharts Drilldown Multiple Graphs - javascript

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>

Related

Update Highcharts data, while drilled down (react)

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

dc.js barchart Click unable to fadeout other bars

I am new to DC.js and crossfilter. I have a barChart and a rowChart. Selection and filtering is working as expected. After I click the barChart , I see the filter ok but other bars are not faded out.
I want all other Bars to fadeout (except one selected), similar to the row chart.
Here is the Fiddle: https://jsfiddle.net/usingh2buffaloedu/yyps72k5/27/
my data looks like below:
var data = [{"Period":"Q1 2017","Group":"Group1",, more
jsfiddle has all the script and data.
I am using Crossfilter for all grouping.
Any ideas? Thanks all.

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.

Rendering issue with 2 Google charts on the same page

I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.
Please take a look at the following screenshots to see the problem:
2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0
It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1
If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2
You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.
You'd better to find/tell about your problem on Google Charts project page directly - https://code.google.com/p/google-visualization-api-issues/issues/list.
Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;
There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...
Thus, problem is in that part. One solution can be formatting the numbers as #mhu suggested. Another solution can be using the ColumnChart type by changing the code part;
var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
and adding this to the options ;
hAxis: {viewWindowMode: 'maximize'}
https://jsfiddle.net/L0gxnywu/
Solution 2: You can change the div's sequence as;
<div id="requests-chart"></div>
<div id="traffic-chart"></div>
https://jsfiddle.net/3j4s1vfj/

Categories