embed a bar graph on on a form with information from that single record

  • 1
  • 1
  • Question
  • Updated 3 years ago
  • Answered

Say I have a single record in a table from a survey from 41 users in the office. (with more surveys to come) that pulls data from other records. 4 Fields filled in by the admin (me) needs to show a graph in the record of this table showing data from itself and only itself.

From this I found that 20 users like [apples], 6 likes [peaches], 15 liked [oranges] 0 liked [bananas].

sum: display a bar graph with a max of 41 range display 4 bars with apples, oranges, peaches, bananas data from the user input fields within the form that the data was entered. only seen after saving the report.

*note the actual survey is about 4k people and has no relation to food of any kind with more bars I'm asking in this manner so that I can get the idea for it on a smaller scale.
*the actual single record is from a survey master that is pulling metrics from another series of reports and each survey will get its own record in this table. but I have email metrics I need to put as a graph I stored in these user input fields (emails sent, valid emails, # of times the email was opened, ect) and each survey will need information from these graphs.

Photo of Robert

Robert

  • 30 Points

Posted 3 years ago

  • 1
  • 1
Photo of Robert

Robert

  • 30 Points
On a side note please please please do not come in here saying oh just use api and high charts. I do not know how to use high charts they have to much extra math I don't understand right now.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,944 Points 50k badge 2x thumb
You seem to be saying:
1. One Survey Master has many Survey Responses.
2. You want to look at the Survey Master and see a Bar Chart Summary Report of the responses for that survey.

So that would be easy.
On the Relationship between Survey masters and Survey Responses the relationship left hand side will have a Report Link field called like Survey responses.

Put that field on the Survey master form and set it to show the Survey responses directly on the form.
Then you get to specify which report you want to use for that embedded report.  Initially it will just be your 4,000 responses in detail, using the "record picker" fields, so not so useful.

But just make a Bar Chart of all responses, unfiltered, with the bars being the  choice that the users made on the survey.  Choose that as the report to use in Form Properties for that Report Link field (instead of the record picker report) and it will be automatically filtered by that Report Link field to be just the responses for that Survey Master.
Photo of Robert

Robert

  • 30 Points
mm not exactly. If i could make an arbitrary table with the data and information I wouldn't be asking the community. but in reality we have some  +400k in this survey and i need to manually add email metrics from the 500k emails sent. I want those email metrics as a graph which I stored on a form showing the results of those surveys and they are not natively stored in quickbase.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,944 Points 50k badge 2x thumb
Sorry, then I really do not understand your tables and relationships.  Please state your tables and their relationships and which is the One and which is the Many.
Photo of Robert

Robert

  • 30 Points
No table relationship. Not pulling information from multiple records. Data is in 4 [fields] on 1 form, all  4 of which are user input, to be displayed as graph.  close to this https://bost.ocks.org/mike/bar/  not something like high charts though I do not understand those. I know it's a very strange request but the actual survey contents have no data that isn't already pulled and displayed. and each and every time a survey is sent out and all that data is collect at the end these fields get filled in by the admin who sent them.

Stored in the application variables:
[chart]= <div class="chart">
[div]= <div style="
stored as a field
[applePx]=ToText(Tonumber([apple]*10)&"px")
[orangePx]=ToText(Tonumber([orange]*10)&"px")

within the graph field(?)
Var  p1 = "width: [applePx]
Var p2= "width: [orangePx]
[chart]&[div]&$p1"&[apple]</div>&[div]&$p2"&[orange]</div>
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,944 Points 50k badge 2x thumb
OK, now I understand.  But I sorry that I have marked the question as answered, so it's less likely that other will see it.  You may have to post it as a new question and refer to this one for the full details.  I do not know how to make a graph using only data from a single record.  You will need to contract with a developer to do that as it is not native functionality of QuickBase.
Photo of Robert

Robert

  • 30 Points
I will repost it with more information that I supplied here in the comments. thank you for your time
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
You can add your own record to this application to count your fruits:

Count My Fruits
https://haversineconsulting.quickbase.com/db/bkm7dc2ak?a=dr&rid=1

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=492

✔ UPDATE: I just realized that I am using hard coded data - not data from the actual record. This is a simple change but I will have to make it later as I have a meeting now.

✔ UPDATE2: The demo and pastie have been updated so you can add your own record to test.
Photo of Robert

Robert

  • 30 Points
I am still learning scripting and parts of the [iol] still does not click for me would snippet of code be whats inside the graph.js? now that I see the graph you put up with hard coded data I could cheat this one time and put the numerical values in manually until the next survey goes out. but I would rather try and understand what I'm doing wrong. (actual field names used is shown in place of my hypothetical fruit) Also the script from Mike Bostock from the page I linked for "lets make a simple bar chart" I have stored within the site for easier access.

  var EST = [SentTo]
  var EO = [Opens]
  var EC = [Clicks]
  var EB = [Bounced]
  var EU = [Unsubscribed]
  var ES = [# of Surveys]
  var style = "<style>";
  style += ".QBU_Chart div {";
  style += "  font: 10px sans-serif;";
  style += "  background-color: steelblue;";
  style += "  text-align: right;";
  style += "  padding: 3px;";
  style += "  margin: 1px;";
  style += "  color: white;";
  style += "}";
  style += "</style>";

  $(style).appendTo("head");

  $.getScript('DBID?a=dbpage&pagename=Masterscript.js')
    .then(function() {
      var data = [$EO, $EC, $EB, $EU, $ES];

      var x = d3.scale.linear()
        .domain([0, d3.max(data)])
        .range([0, $EST]);
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
I will complete the example so it pulls data from the individual record. I just have a lot of things to do at the moment. In the code posted above you are inappropriately mixing QuickBase formula syntax into JavaScript. When using script it is best to get out of the formula language as soon as possible and do everything in script. I will elaborate later.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
I updated the Pastie and the Demo so it should now produce a chart on the view page reflecting the data in the record.
Photo of Robert

Robert

  • 30 Points
ok I get what your doing for the most part but where does:

 then(function(argsTable1, argsD3) {

    var xml = argsTable1[0];
get defined?

Though I get now that :
  $.when(
    $.get(dbidTable1, {
      act: "API_DoQuery",
      query: "{3.EX." + kRid + "}",
      clist: "6.7.8.9"
is calling table quickbasetable1 making it do an api query with the exact global record id getting from fields 6-9 but for some reason I cant get mine to graph on the dummy application+table I made to mirror yours while i figure out how its put together.
Its a fresh app so i adjusted the app token and db ids accordingly but it just wont work. I did store the graphing script locally on a "masterscript.js"  other then that i dont know what im doing wrong
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
You probably have the wrong formula for the [Chart] field as I did not post it in the pastie:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=492

[Chart] formula:

[iol] & "module.js" & [/iol]
&
"<div class='QBU_Chart'" &
"  data-rid='" & [Record ID#] & "'" &
"></div>"

In this case we are using the real estate the image onload field [Chart] takes up to include a <div> that will receive the actual <svg> for the rendered chart.

>On a side note please please please do not come in here saying oh just use api and high charts. I do not know how to use high charts they have to much extra math I don't understand right now.

BTW, you can generate the same simple chart using HighCharts or probably any other JavaScript based chart library using the exact same technique I used here.
Photo of Robert

Robert

  • 30 Points
For the last week I've been wrecking my head over hwy I couldn't get anything to show regardless how much I checked and rechecked my code. For the reason to be this simple is more frustrating but relieving at the same time. Thank you, not only does my test work but all the other charts being fixed with this also works. its always something so simple that often gets overlooked.
Photo of Robert

Robert

  • 30 Points
So when I make all of this in my testing grounds I am able to create the chart and display without an issue. But when I try the same adding it to an existing form the chart displays with a 0 width. In the console I'm getting "Uncaught Error: Mismatched anonymous define() module: [object Object]" and "Uncaught TypeError: angular.module is not a function" but ONLY if I use this technique on an existing form.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,924 Points 20k badge 2x thumb
I would have to see the exact code and your application to debug this. My suggestion is to debug the code with appropriate console command to you find the problem (it is probably something simple).

You can contact me off world using the information in my profile if you want to pursue a solution.