Highcharts drill-down using table element as data-source - highcharts

How Can I create a simple bar drill-down chart while relying on HTML table element as a data-source?

Defaulty you cannot do this by data.js parser, so you need to create your own table parser to prepare correct structure for highcharts drilldown. I mean create object like series and drilldown.

Related

Remove Column From Grid Menu in UI Grid

I have two columns that I have its visibility to false. They are called $$TreeLevel and Instrument. I want to keep them hidden at all times so I am trying to remove them from the Grid Menu hamburger drop down. Is there a way to do this?
Thanks
Please use custom menu feature of UI grid, http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu
Angular JS provides option to add custom fields to the UI Grid Menu. The 2 ways to do that are
1) gridCustomMenu function -> Used within the onRegisterApi function of the UI Grid.
2) Functions call present in the gridApi.core feature
gridApi.core has 2 primary functions -
a) gridApi.core.addToGridMenu(grid,items), where items is an array which comprises of a JSON object with certain properties that you want to add.
Ex - gridApi.core.addToGridMenu(grid, [{title: 'ABC', order: 10}]);
b) gridApi.core.removeFromGridMenu() -> I think you need to make use of this function to remove your custom entries from the UI Grid Dropdown!

Dynamic Vaadin chart

Is there a way to modify a Vaadin chart by moving a bar or a point from the chart itself? i.e. I have a bar chart with a certain value in one of the bars, I want to get a new value by dragging that bar to that new value.
There is something similar in this example, that is why I wonder if it is possible to extend this option to something like what I need.
Thanks!!!!
I assume that vaadin uses Highcharts if this is the case, maybe you can use plugins, if so I recommend:
http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points
Source code in case you had to rewrite it:
https://rawgit.com/highslide-software/draggable-points/master/draggable-points.js
Regards.

angular2, angular2-highcharts. Remove a chart from the page

I have parent component (A) with two child components (B) & (C). B contains an angular2-tree which is populated on page load. C is where angular2-highcharts and information will be rendered when a node on the tree is clicked.
When navigating between nodes, sometimes I will show charts and others I wont. Currently, when I don't pass data to the chart options, assuming I've already shown a chart, then the chart continues to render.
How do I destroy the chart when I don't want it to show?
Didnt think of a way to destroy the chart, but have added *ngIf to the html tag for the chart. This will hide the chart when the options are set to null.

HighCharts data from HTML Table

I am populating my highcharts column chart via html table. Is there a way to add custom attributes to a td so I can access them in the tooltip?

Highstock table data: navigable with the range selector and the navigator - scrollbar

Anyone had created a table view, not creating a chart from a table, but a pure table grid view using the highstock library?
I need to be able to navigate in time (table grid get updated dynamically, like chart does) using the navigator-scroll-bar and range selector. Basically just replace the chart by a pure HTML table grid of data.
It needs to be done with highstock chart, probably not highchart library, coz I am looking for time navigation component to update the table accordingly to new time range changes...
I guess this could be achieved with callbacks on the navigator and range selector?
You need to catch afterSetExtremes, get all visible serie's data from chart.series (between min/max values which limit range) and return table in defined i.e div.

Resources