Display SQL Server Execution Plans in HTML
npm install html-query-planqp.css and qp.min.js
QP.showPlan, passing the container in which to show the plan and the query plan XML (as a string).
`
See the examples folder for complete examples.
Options
Additional options can be passed using the 3rd argument:
`
`
| Option | Default | Description |
| --- | --- | --- |
| jsTooltips | true | Set to false to use CSS tooltips. |
Running XSLT separately
Under the covers, html-query-plan is an XSLT 1.0 stylesheet (qp.xslt), which can be used to pre-render the plan html. Javascript is still needed to draw the connecting lines. To do this, follow the above steps but call QP.drawLines instead:
`
`
Browser Support
Should work just fine in any modern browser. Tested in Chrome, Firefox and IE9+. IE8 and earlier have known issues.
Icons
Meaning of the "overlay" icons for nodes:
| Icon | Description |
| --- | --- |
| !Batch Icon | Either the actual execution mode was "Batch" (for actual execution plans), or the estimated execution mode was "Batch" (for estimated plans). |
| !Parallel Icon | The node was executed in parallel. |
| !Warning Icon | There are one or more warnings on the node. |
All icons are adapted from the Fat Cow "Farm Fresh" web icons pack, which can be found at http://www.fatcow.com/free-icons.
Building
Run the following commands in bash to output minified and unminified versions in the dist` folder: