UCB — Summer 2015 / Session 4

d3 in Cal Answers

Today's session

In today's session, we will finish creating a stacked bar chart of all grad rates and add it to the Cal Answers development environment.

    For more detailed information on how to put d3 into OBIEE, see this blog post:
  1. Kevin McGinley's blog post covers how to use d3.js in OBIEE

Before we begin...

Does anyone have any questions?

… Continuing from last session

Let's walk through the code for a stacked bar chart. We'll also consider some other variations on this graphic, including one using Susie Liu's d3-legend.

Now let’s add the chart to Cal Answers

  1. Log into the OBIEE dev-01 environment. If you don't have access to the dev-01 environment, you'll have to just follow along with me for now.
  2. In the shared folder, under the Student Demographics & Outcomes folder, make a local copy of the Graduation & Retention (using More... Copy and then pasting the folder under My Folders. You can call it something like "d3-ucb").
  3. Also copy the Graduation and Retention dashboard item (from inside the Dashboards folder) and place it within your local folder where you'll be working.
  4. Open your local copy of the UGCohort Grad Data query which is used by the Graduation & Retention Dashboard.
  5. On the Cal Answers Analysis Criteria tab, modify the query by changing the Student Headcount Column Properties as follows: in the Column Properties dialogue, on the Data Format tab, uncheck the box that says "Use 1000's Separator."
  6. On the Results tab, modify the Analysis Properties by going to the Data tab and checking the box called "Include Null Values"
  7. On the Results tab, add a Narrative View: Go to New Views... Other View... Narrative View
  8. Here's a handy annotated picture of the Cal Answers Narrative View for your reference.
  9. Add any CSS and HTML text in the Prefix box. It is here that you also instantiate the data array that will hold the output from your query on the Criteria tab. Note that since this is within the OBIEE page, we don't add tags, and we want to be careful not to create any "name collisions" by using names that may already se in use somewhere else on the page...
  10. The Narrative box is where you take the output from your OBIEE query and push it into a data array (called "data" or whatever you want). While you push each row, you can name the columns. Name the columns so that they match the properties that are referenced in the javascript code. For example, the data returned in column 1 should be called "semesterYearLetter".
  11. The Postfix is where most of the javascript code resides, and where the manipulation of the query output happens, as well as where the elements of the visualization are created and appended to the page.
  12. Also, be sure to check the box called "Contains HTML Markup" and if you're returning a lot of rows, the data may be truncated unless you specify this an adequately high number to the "Rows to Display" text box.
  13. Finally, keep in mind that the output will display below the Postfix box. If you see nothing, then something might have gone wrong... and you'll want to use the browser developer tools to inspect the situation.
  14. If you have access to the Cal Answers dev-01 environment, you can copy code from here into the Narrative.

Thank you!!!