Simple XML for punchcards

Custom visualizations use a namespaced syntax for Simple XML. Specific visualization properties are appended to the app and visualization context.

Add a punchcard to a dashboard panel

You can add a punchcard to a dashboard panel using Simple XML. Use this syntax to specify the app and visualization context.

<viz type="punchcard_app.punchcard">
</viz>

Configure punchcard properties

To configure a punchcard property, append any of the following property names to this context.

<option name=
    "punchcard_app.punchcard.[property_name]">[property_value]
</option>

Option name	Accepted values	Default	Example
radiusScale	[local | global]	local	<option name="punchcard_app.punchcard.radiusScale">global</option>
useColors	[true | false]	false	<option name="punchcard_app.punchcard.useColors">true</option>
colorMode	[categorical | sequential]	categorical	<option name="punchcard_app.punchcard.colorMode">sequential</option>
minColor	Any CSS hex value	#d93f3c	<option name="punchcard_app.punchcard.minColor">#3fc77a</option>
maxColor	Any CSS hex value	#3fc77a	<option name="punchcard_app.punchcard.maxColor">#d93f3c</option>
numOfBins	Any number from 3 to 9	6	<option name="punchcard_app.punchcard.numOfBins">7</option>
labelAlignmentMode	[horizontal | angle]	horizontal	<option name="punchcard_app.punchcard.labelAlignmentMode">angle</option>

Example Simple XML source

Here is an example dashboard panel.

<dashboard>
  <label>Punchcard Dashboard</label>
  <row>
    <panel>
      <title>My example punchcard panel</title>
      <viz type="punchcard_app.punchcard">
        <search>
          <query>| inputlookup bikeshare.csv
| eval duration = duration_ms/60000
| stats count median(duration) by date_hour date_wday</query>
          <earliest></earliest>
          <latest></latest>
        </search>
        <option name="punchcard_app.punchcard.useColors">true</option>
        <option name="punchcard_app.punchcard.colorMode">sequential</option>
        [...]
        <option name="punchcard_app.punchcard.radiusScale">local</option>
        <option name="punchcard_app.punchcard.minColor">#f7bc38</option>
        <option name="punchcard_app.punchcard.maxColor">#d93f3c</option>
        <option name="punchcard_app.punchcard.numOfBins">7</option>
        <option name="punchcard_app.punchcard.labelAlignmentMode">angle</option>
        <option name="drilldownRedirect">true</option>
        <option name="resizable">true</option>
      </viz>
    </panel>
</row>
</dashboard>