Using the Visualization component

Try it!

Use the <inmydata-vis> component to embed a single grid or chart, show the details of an Insight, or give users the ability  to explore your data by building a new visualusation from within your application.  The component can be emedded with the <inmydata-vis> HTML tag, e.g.:

<inmydata-vis tenant="example" vis-id="abcde-fghijkl-mnopq" />

Attributes (all are optional, but some are required to be passed together):

• id: show a saved visualisation with the given ID.  No ID indicates that you wish to create a new visualisation.
• subject: If no ID is passed, indicates the Subject for a new visualisation.  This is required if no ID is passed.
• read-only: if "true", don't show the editor tools, just the chart and the share panel.  Default is false.
• show-toolbar: "true" or "false" to show or hide the Toolbar (default is true).  Use with show-tools to initially only show the chart.
• show-tools: "true" or "false" to show the tool area (default is true).  Use with show-toolbar to initially only show the chart.
• show-tool-toggle: "true" or "false" (default is true) to show or hide the toggle button that expands the tool area.
• suppress-drilldown: override the default behaviour of showing the drilldown inside the component.  Allows the embedding app to handle the drilldown in its own way.  If there are circumstances where you do not wish to handle the drilldown event youself, indicate to the component by calling its method "drilldownHandled(false)" inside your event handler for the inmydata-drilldown event (see Events below).
• For showing charts from the Copilot component (values passed from the "inmydata.copilot.showcharts" event). these must be passed together: 
  • subject: The subject of the Copilot-generated chart
  • copilot-session: the id of the Copilot session in which the chart was generated
  • copilot-sequence: the sequence number of the Copilot message in which the chart was generated
  • id: one of the dashboard IDs given in the event args
• For showing an Insight from the Insights window (values passed from the "inmydata.insights.selected" event), these must be passed togeter:
  • insight-id: The unique ID of the Insight
  • insight-signature: a hash of the Insight details used to file the insight 
  • question: On pressing the "Explain this Inisght" button, the question that needs to be passed the Copilot component (which will appear in the Visualisation page if this button is pressed).  The button will not be visible if the question is not passed. 

Events

inmydata.drilldown: The user has actioned a drill down by clicking on a chart or grid.  You may wish to use this to handle drill downs in your own way (rather than showing the drilldown inside the component), for instance by linking to another part of your application. See the suppress-drilldown parameter above.   

The event has the following arguments:

• id: the id of the grid or chart that was interacted with
• subject: The subject data (data set) that the grid or chart is based on
• name: The name of the visualisation or dashboard object
• dataValues: key/value pairs of the field names and their values, that the user clicked on when actioning the drill down e.g. { key: "City", value: "London" }

The event data will be formatted like so, with an event name, and arguments expressed in JSON (common attributes omitted for brevity):

inmydata.drilldown: {
    'subject': 'Store Sales',
    'id': '123456789',
     'name': 'Store Sales This Week',
     'dataValues': { 'key': 'Store', 'value': 'Edinburgh' }
    ...
}