Equivalent to Excel Slicers for Web Applications? - javascript

Is there an equivalent of Excel's slicers for Web applications?
Context... This is meant to be used in a web dashboard.
Some background for anyone not familiar with Excel slicers... Excel slicers allow you to quickly make a list of filters connected to your data source by simply selecting the desired field. In Excel, slicers are tied with pivot tables and charts to create powerful and interactive reports. Slicers can also connect with other slicers and give visual feedback on which items do not have data for a given selection (see image here showing various slicers around a chart - the greyed buttons do not have any data - this is known as cross-filtering).
Found so far... The closest thing I have found is CrossFilter.js and DC.js which work with the D3 charting library. However, development on Crossfilter and DC seemed to have stopped. I'm new to web development, so if there is a simple solution to this and I'm digging to deep - let me know!
Thank you for any help!!

Related

How to add a python matplotlib interactive figure to vue.js web app?

I have a plot made using Python matplotlib that updates every time new sensor data is acquired. I also have a web GUI using vue. I'd like to incorporate the matplotlib figure into the web GUI and have it update as it does when running it independently. This therefore means not just saving plot and loading it as an image.
Can anyone advise how to achieve this?
In my opinion it's not reasonable way, There are very good visualizing tools powered by javascript, for example chart.js.
you can do your computation with python in back-end and pass data to front-end by API and plot every interactive diagrams you want using javascript.

Google Sheets Automation and Real Time Graphing

My knowledge of Google Sheets is somewhat limited. I have recently been keeping track of daily stock quotes (using the GoogleFinance function) and I was wondering how to utilize Google Sheets script editor to make a more automated and real time graph.
For example, I have columns with the stock price and volume that are updated every so often. I wanted to be able to take the values in these cells as they update and plot them in real time (as a line graph). I know Google script editor on Google Sheets has the ability to trigger at a certain time, so I would like the graphs to start populating at 9AM (when the markets begin to open) and stop populating at 4PM. I figure that updating the graph every 5 or 10 minutes would best enable me to capture the changes.
I wanted to do this to look at the relationships between various metrics (like the fluctuations in price and volume over time). I do not know if Google Sheets is too limited to do something like this, but if you know of a way to do so, please do suggest it.
Thank you!
Well, I think you need to use Apps Script here to achieve this Automation. I found here a tutorial that show how to create an automatically updating spreadsheet. But, sadly to say it did not mention here on how to create graph. But it will give you an idea on how to create automatic updating spreadsheets. You can also check this Google Analytics Report Automation and this thread if it can help you in your case.

Large quantity of data real time visualization

I'm building a dashboard receiving tons of data from MQTT in JSON format (data frequency ± 4Hz). I'm trying to visualize this data and initially picked Highcharts (http://www.highcharts.com/) but quite quickly realized that browser can't simply handle that amount of information.
I'm quite new to visualizing such amounts of data so would appreciate any advice on how to handle that amounts of data (currently arduino's post data to given topics and I receive them on the server, store in mongo and send to the browser to be updated). There's a chance my entire approach is completely wrong so please guide me to a path!
Your problem is likely that the SVG that Highcharts is creating is too large for the browser to handle in a timely manner. If you have too many data points, you'll need to do 1 of 2 things.
Switch to a charting library that uses an HTML5 Canvas instead of an SVG
Pare down your data using a best fit or some other curve interpolation.
If you switch to a Canvas based chart, you'll lose some of the cool features that SVGs have, but every data point will make it to the page. I've used jqChart for this in the past. It's not free though.
If you pare down your data, not every data point will make it to the page, but the nice features that SVGs allow will still be there. You'll still probably be able to use highcharts.
I think you need to have a look at crossfilter (filtering lib), dc.js (helper library for d3 and crossfilter) they can handle large amount of data well
After using Highcharts for more than 3 years I can recommend it even for the questioned use case. To follow recommendations to use other charting libraries might be not a good choice if you already picked Highcharts (after comparison with others) and invested quite some time in it. If you like it, stick with it.
To address this edge-case with thousands of data points the team announced the boost.js module.
It originated from this issue on Github. The discussion reveals lots of background information about the problem domain. And it demonstrates how well the Highcharts team is doing customer-/community-driven development.
Looks like you can do it with Highcharts - if you still want. :-)
Last but not least I can recommend the Highcharts Cookbook from Packt
I use grafana to visualise my time series data. I don't believe it supports mongodb at the moment. I use influxdb as the data back end.

Graph visualization frameworks

I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise).
I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change.
I have two questions.
What are the technical terms for the three requirements crudely described in the paragraph above?
I'm a Java programmer with no experience in JavaScript, but I'm thinking that, with this project, it's time to get some - sigma.js in particular seems very powerful and relatively simple. However, ultimately this needs to be done within a Java Swing application, and while I know there are various containers I can use to embed JS/HTML content into Swing, still it seems that a pure Java solution would be ideal, and I'm curious about any frameworks that might make this possible. I'm looking into Gephi now, but it doesn't seem anywhere near as powerful or as simple to use as sigma.js. Am I wrong in this assumption?
To summarize the second question: Which would be the better investment of my time: Learning sigma.js and the various JS frameworks (which will require me to get comfortable with JS in general), or learning to use Gephi in Java? (assuming I have a general and long-term interest in graph visualization)
Java visualization
Gephi does provide a toolkit for Java and Python which doesn't contains the UI modules, so unless you want to use Gephi itself to visualise your network you cannot embed its UI in your Java/Swing application as long as I know.
The toolkit contains all the algorithms and plugin infrastructure so if you want to use some of their analysis tool embedded in your app you can use that, otherwise I don't think it's your case.
There are other Java options if you want for graph visualisation here: Java graph library for dynamic visualisation
About Gephi and sigmaJS
IMHO Gephi is far more powerful than sigma.js: it has full SNA tools, multiple layouts, a data editor, exporters, plugin-systems...
One important factor is also the size of the dataset you want to visualise: while sigmaJS can handle up to 500 nodes in the view, Gephi can layout easily 50000 nodes with GPU support as well.
Gephi is a scientific tool made for people that don't want to code to visualise a network and it does it's job. SigmaJS is one of many JS solutions to visualise graphs on a web page.
You can always export to sigmaJS from Gephi with a plugin.
What's better?
At the end of the story I guess the tool you are going to use will depends on:
do you have to visualise a big dataset? -> Java solutions will win for big ones
do you need to distribute it easily? -> Web app / SigmaJS wins for distributed
do you want to have a full integration with your app? -> Java wins
The best one I've found is Keylines, but its not cheap.
Gephi is OK, but the last time I looked it did not support Neo4j 2.0
If your a programmer Neo4j is open source, so you can fork the repository on Git and use that (you will have to check the licencing model before you commercialise any product though)

Bing Maps - Javascript vs Silverlight

Currently, I am evaluating the creating of a map based system to plot data. This data would consists of shape layers (a grid - stored in a SQL 2008 Geography column) and multiple points (~5500 initially - Lat/Lon points in the same DB) that will plot the location of items on the grid. So, my question is - is there a large difference between the SilverLight Bing Map implementation and the JavaScript based implementation. Here is what I can gather from my research:
SilverLight Pros
Can handle large amounts of data more quickly
API/SDK to tie directly to .NET application code
JavaScript Pros
Do not have to download/install Silverlight on client side
Can leverage JQuery or other frameworks to pull data from webservice (I know SL can do this to using WCF, but I know JQuery rather well)
I know from this list that it looks like I should go with Silverlight, however I also have 'NEVER' done a bit of coding using the XAML stuff. Most of my experience as of late is the .NET MVC stuff and I cannot help but to take that into account as well. Does anyone know the performance 'ratio' between SilverLight and Javascript or at what point JavaScript implementation will choke? One more thing, I have looked at the DataConnect project on codeplex, but it seems to be broken - I cannot get the WKT or XAML functions to work either on their live site or the downloaded project.
If anyone out there has done a comparison/has words of wisdom for guidance/can add to my list for either of the two, I am all ears.
EDIT
I found a great Javascript/.NET MVC application example using SQL 2008 on CodePlex - Ajax Map Data Connector. It gives examples of pulling polygons, lines and points of interest from the database, placing them on the map using images tiles or the MS API as well as using intersection to determine items around a point or within a bounded box.
Personally I prefer the Javascript version because it's more multiplatform (e.g. mobiles) and easy to integrate in a webapp (plus I also love jQuery), but I think the deciding factor is probably what do you want to use the application for ?
However for Javascript, even if I love version 7, you may want to stick with version 6.3 for now because too many core components were removed (but are planned to be re-added in the future), e.g. infoboxes and client-side clustering (of course you can do your own implementations, that's what I did personally, but I would advise to use 6.3 for now).
I'd go with the javascript control (better support for multi-devices, is currently being more actively developed than the Silverlight control, sounds better suited to your skill set). However, don't try to plot 5,500 points on it. It will die.
What's more, if you're thinking about plotting 5,500 points then there's something wrong with your application design anyway - an end user is not going to be able to discern that many different points on the map. Let them filter for particular types of points, or only retrieve those that are visible in the current mapview, or use clustering to group up points at higher zoom levels - you should only be looking to have at most maybe 100 - 200 data visible data points on the map at any one time. If you really must plot that many points, then pre-render them as a tile layer and cache this rather than trying to plot dynamic vector data on the map.
And, I disagree with wildpeaks - v 7.0 is the latest stable release of the Bing Maps AJAX platform, and is a major change from v6.3. If you start coding with v6.3 now you'll only have to go through upheaval at a later date when you have to migrate to v7.0. Best to start off with v7.0 than learn a deprecated API.

Categories

Resources