Simple d3/dimple drill down example with bar chart - d3.js

I'm looking to build a clickable drill-down bar chart of sorts using dimple or nvd3.
I can create a bar chart no problem, but what I'd like to do is make each bar clickable to allow me to call a Javascript function which will load JSON to populate a separate chart (essentially doing a drill-down across multiple charts)
The problem however seems to be that I can only access the value or label in the series to the item I've selected, and in order to load the next chart I would need something distinct... another field from my recordset or even the index of the bar being clicked on.
Being new to dimple, I'm looking for a simple example but everything I'm seeing seems to involve drill-downs in the same chart or examples showing far more features than I need.
I'm just looking for a way to bind an event to each item in the series, and to use data during the click event that would be unique to that data point, but not used in the chart.

You can add events to a series using the series.addEventHandler method documented here.
This example is essentially a drill through but using the hover event instead of the click.

Related

Filter *controls* with dc.js?

In the dc.js examples I have seen, the user applies a filter to a dimension by selecting values on a chart - and sometimes by selecting a legend item. How does one implement a dedicated control for selecting values?
So if you want a one off custom UI control, you can handle the events and call the relevant filters and redraw (the same way it's done when clicking on existing charts)
If you want to have something re-usable, you need to implement a new "graph" type, check the select menu code, it's not a lot of extra boilerplate
Btw, between combo box and select menu, you should be able to implement everything but the sider

How to implement a selection control like Outlook with Xamarin

I am creating an event screen like Outlook's. The issue I am coming across is that the autocompletebox I am using from Syncfusion doesn't automatically grow in height as more tokens are added.
The current workflow is exactly like outlooks. When the control is clicked on, it brings you to another page where you can select tokens. On return, the selected items populate the autocomplete circled below.
The approach I currently took is to have a listview. Scrolling is disabled for the listview since the page resides in a scrollview and nested scrollviews aren't recommended for xamarin. The height of the listview is dependent on the number of selecteditems.
I am wondering if there's another approach or control that would be more suited for my situation? Or if someone has come across a autocomplete control where the height will grow.

How to create a dropdown in Xamarin.Forms that displayes different content per item?

How am i going to create a dropdown that displays different content depending on the selected item? For example, there are 3 items on a dropdown namely Chart1, Chart2 and Chart3. When i choose Chart1 it should display a Pie Chart. When i choose Chart2 it should display a Bar Grap. When i choose Chart3 it should display a Line Graph. Is that even possible to do? Thank you.
I assume you already have a way to create your charts?
If not there are plenty of 3rd party options out there for charting.
To have the three separate views in the one page as you are trying to do
all you would need to do is create three separate ContentView with your three different charts. Use a RelativeLayout or an AbsoluteLayout to lay the three ContentView over the top of each other.
I'll assume you are using a Picker control as your drop down.
if so then just use the picker.SelectedIndexChanged event to change the visibility of each of the chart ContentView according to which option was selected

Adding Grids within Grids

I've just come across the new Grid layout system in Umbraco, which seems quite interesting, however I can't seem to find a way to include a grid within a grid.
I've added a simple 2 column row onto a page in the example below, but now I want to add another 2 column row within it to fill in the 2 red squares. Is this not possible or am I missing something obvious?
If I click any of the layouts at the bottom it instead adds them as an extra row to the bottom of the page rather than inside an existing grid.
The only way to include a grid in a grid (that I'm aware of) is to use the Doc Type Grid Editor package: https://our.umbraco.org/projects/backoffice-extensions/doc-type-grid-editor
This package allows any Document Type to be the basis for a grid editor. I was able to create a grid editor that was a set of tabs where each tab had a grid data type for the content. The data type was specific to tabs so you couldn't create tabs in a tab.
I also created a package (v7 Dialog Expander) to allow the dialog flyout to expand: https://our.umbraco.org/projects/backoffice-extensions/v7-dialog-expander. I did this because a grid in the small width of the dialog flyout was just too small.
It is definitely possible and actually has worked out well so far. That said, I would tread lightly here because there could be issues that we haven't yet discovered as this solution is still on a development project.

jqplot enhancedLegendRendrer seriesToggle functionality override

I am trying to change the default functionality of enhancedLegendRendrer.js where in on clicking on the legend series that particular bar item in the graph gets visible/hidden.I want to change this default functionality, wherein if the user clicks on the legend series item only that series is displayed while rest of the bars are made invisible.
Jumped the gun on the post and now cannot delete. Thought the above was asking how to enable toggling on legend. Anyway, for anyone interested:
https://bitbucket.org/jab/jqplot/src/edd2f5972593/examples/legendLabels.html

Resources