Update d3 chart with newly inserted data in a Meteor collection after form submission - d3.js

My Meteor application is somewhat simple and displays a d3 chart generated with server calculated data stored in a newly inserted mongodb document:
the user fills a simple form and clicks the submit button
the server does some async work and CPU intensive calculation using the form data
a new Calculus document with 2 fields (formData and calculatedResult) is inserted in a mongodb Calculi collection
the SVG chart is updated with the newly calculated data
Despite reading the Meteor parties example which makes use of d3, this tutorial on using d3 and Meteor to generate SVG and this screencast on how to build a reactive data source, I'm getting really confused! I'm getting a hard time properly understanding reactive data sources, templates and dependencies in Meteor.
I can't seem to be able to make the SVG chart updates after a new Calculus document is inserted.
Here's my question: what's a comprehensive, newbie-friendly way to automatically update a d3 generated SVG chart with server-calculated data received after submitting a form that inserts a document in a collection?

You either need to have the user subscribe to changes in the Calculi collection (http://docs.meteor.com/#reactivity), or if you're rendering in a template the user's response you can make and call an update() method that runs your d3 code. This will update your charts in the update portion of the d3 code.

Related

Is there a way to show number and percent in stacked bar graphs in Quickbase?

I'd essentially want to create what's in the link in QuickBase, but from what I've seen, it isn't a straightforward procedure.
https://www.exceldashboardtemplates.com/wp-content/uploads/2013/08/image_thumb11.png
Don't think you can use display both value using the native/built-in charts. You could build a Code Page in Quickbase that queries data using the API and then renders a chart using a library such a Highcharts or Charts.js

Updating ag-grid with new data after new table load with React

I'm using React and I have a navigation component that updates a Redux table state. Based on the table chosen in the navigation, I need the ag-grid to update accordingly.
I have six tables. Three of them have the same column definitions. I'm currently using onNewColumnsLoaded to refresh the data, but because three of the tables have the same column definitions, nothing's loading. I've tried onColumnEverythingChanged and other column options, but again because the columns are the same nothing is happening.
I've tried rowDataChanged, rowDataUpdated, and componentStateChanged, but those refresh the data if I'm scrolling or filtering, so those are not acceptable options.
I've taken a look at this answer, but it's using plain javascript, and this one has a problem in the css, not in the javascript.
What's the best way to have the grid update programmatically based on Redux state variables?
You can check to use immutableData with directly udpate the rowData:
getRowNodeId
method should be implemented as well.
Check the doc for more detail.

Multiple D3 charts on one page with data binding

I would like to have a JSON data structure that contains time series data for multiple charts (one or more lines per chart) and have this data bound dynamically to D3 so that I only need to specify the template for a single chart and then D3 handles creating the entire grid of charts for me according to some layout that I specify. When the underlying data structure is updated, series automatically get added or removed from existing charts or whole charts get added or removed.
I've seen this example that describes how to place multiple charts on a single page, but in the example code has to be written separately for each chart, whereas I am trying to create multiple charts dynamically.

How to refresh a stacktable js after underlying table is filtered in mobile

I am using dc.js and crossfilter.js to make a dashboard. When moving to mobile I turn the data table responsive with stacktable. However in mobile when I click on various filters, the stacktable doesn't update since it is a copy of the underlying table. Is there a way to refresh a stacktable based on the main table. Or remove stacktable and add again to reflect the newest table.
I'm not familiar with stacktable.js but my guess is that it isn't noticing when d3 modifies the table underneath it (which is good because there are a lot of modifications).
My guess is to reinitialize stacktable each time the dc.js data table is redrawn. You can use the pretransition event for this. (A number of the other events could work, too, but this seems simplest.
Something like:
dataTable.on('pretransition', function(chart) {
$('#your-data-table').stacktable({your options});
});

Can an Apex Class or a Visualforce Page be the data source for a standard Salesforce dashboard component?

In Salesforce, I create a dashboard and drag a pie chart component on to it. I can then drop almost any report onto the pie chart to serve as its data source. Is it possible to use a class or page to drive the Pie Chart instead of a report?
My attempts so far suggest not. I have an apex:page that is returning a very simple table of data. I can add my entire apex:page with its apex:pageblocktable to my dashboard as an embedded VisualForce Page and the table shows up fine. But it won't let me use the page as the data source for my Pie Chart. My controller class isn't even listed to try using it. Is there some way I can evolve my controller or page to make it a suitable data source for a Pie Chart or any other standard Salesforce dashboard component?
I'm starting to think the only option available to me is to make a page that renders the pie chart for itself (probably using flot) and embed that in the dashboard. I'm willing to go this route, but it sure would save me some time if I could use the standard dashboard components. Any help is appreciated.
If you're wondering why I don't just use a report, it's because I haven't found any that combine leads and contacts in one. I've followed this multi-object apex dummy class pattern to create a custom UnifiedLeadContact class with a handful of common properties from my leads and contacts. My controller runs two queries, one for leads and one for contacts, uses the results to populate a list of new UnifiedLeadContacts and returns it. That is working well to feed my table that functions similar to a lead or contact view but has both leads and contacts in it.
As far as I am aware there is no way to use the output of a VF page as the source of a chart.
But you can create a chart as part of your VF page.
If you have a look at http://www.salesforce.com/us/developer/docs/pages/Content/pages_charting_overview.htm
This will give you the basics on how to feed in the data to a chart ov

Resources