Graphics

A graphics widget displays the results of a query in one of various chart types according to a set of given specifications.

The graphics widget displays the results of the 1010data query associated with the widget.

Most graphics properties are specified using the special <graphspec> pseudo-op in the query rather than by using widget properties.
Note: You can use the Chart Builder to save a set of chart specifications from an existing chart and include the resultant <graphspec> that contains those specifications as part of the 1010data query. See Create QuickApp graphics widget for more information.
Chart type
Specifies which type of chart is used to visualize the results of the 1010data query associated with this widget.
Valid chart types include:
  • Histogram (1D)
  • Histogram (2D)
  • Line
  • Scatter
  • Pie
  • Bar
  • Scatter3D
  • Surface
  • Bubble

See Chart Types for information on each of these chart types.

Theme
Specifies a particular color scheme for the elements in the selected chart type.
Valid themes include:
  • Default
  • Happy
  • Excel
  • Maximum
Interactive?
Specifies whether the user can interact with the chart (e.g., zoom, pan).

Once chart interactions are enabled, you can perform the following mouse actions on the current chart:

Action Description
Double-click Double-click at a particular spot on a chart to center the chart at that location.
Drag Drag the pointer over an area to zoom into the corresponding rectangular region.
Wheel Up Rotate the wheel button forward to zoom out of the chart.
Wheel Down Rotate the wheel button backward to zoom in to the chart.
Note: Chart interactions are intended for use in full mode and are currently provided only for the Line and Scatter chart types.
Title
The text to appear above the chart.
Hide the legend?
This determines whether a legend should be displayed with the chart.
Legend position
If the legend is displayed, this determines its position relative to the chart.
Bottom
The legend appears below the chart.
Right
The legend appears to the right of the chart.
Left
The legend appears to the left of the chart.
Top
The legend appears above the chart.
Clickable column(s)
A comma-separated list of column names whose data elements will be clickable in the chart.

When a data element associated with a clickable column is clicked, several interactions can take place, depending on other options that have been set.

See Variable for click value and Variable for click selector properties below for additional information.

Variable for click value
When a data element associated with a clickable column is clicked, its value is stored in this variable.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Variable for click selector
When a data element associated with a clickable column is clicked, the name of that column is stored in this variable.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Drillable column(s)
A comma-separated list of column names whose data elements will be drillable.

When a data element associated with a drillable column is clicked, several interactions can take place, depending on other options that have been set.

See Variable for drill values and Variable for drill selectors properties below for additional information.

Variable for drill values
When a data element associated with a drillable column is clicked, the value will be appended to a comma-separated list of values contained in this variable.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Variable for drill selectors
When a cell in one of the drillable columns is clicked, the column name will be appended to a comma-separated list of column names contained in this variable.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic>
  <widget base_="pub.demo.retail.item" class_="graphics" interactive_="1" 
name="hmadded__1" relpos_="40,19" type_="line">
    <sel value="(store=1)"/>
    <tabu label="Tabulation on Sales Item Detail" breaks="date">
      <break col="date" sort="up"/>
      <tcol source="sales" fun="sum" label="Sum of`Sales"/>
    </tabu>
    <graphspec width="600" height="400">
      <chart type="line" samples="100000">
        <data x="date" y="t0"/>
      </chart>
    </graphspec>
  </widget>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic clicked_value="" clicked_column="" store_label="" total_sales="">
  <do onchange_="@clicked_column">
    <switch on="{@clicked_column}">
      <case when="m0">
        <set store_label="Store 1:"/>
      </case>
      <case when="m1">
        <set store_label="Store 2:"/>
      </case>
      <case when="m2">
        <set store_label="Store 3:"/>
      </case>
    </switch>
    <set clicked_column=""/>
    <set total_sales="${@clicked_value}"/>
  </do>
  <widget base_="pub.demo.retail.item" class_="graphics" clickable_="m0,m1,m2" 
interactive_="1" legendpos_="left" name="hmadded__1" relpos_="89,36" 
selector_="@clicked_column" theme_="happy" tooltips_="1" 
type_="bar" value_="@clicked_value">
    <tabu label="Sales by Date by Store" breaks="date" cbreaks="store" clabels="short">
      <break col="date" sort="up"/>
      <break col="store" sort="up"/>
      <tcol source="sales" fun="sum"/>
    </tabu>
    <graphspec width="602" height="405">
      <chart type="bar" samples="25">
        <data x="date" y="m0"/>
        <data x="date" y="m1"/>
        <data x="date" y="m2"/>
      </chart>
    </graphspec>
  </widget>
  <widget class_="text" name="hmadded__5" relpos_="174,500" 
text_="<b>{@store_label}</b> {@total_sales}" type_="html"/>
</dynamic>