Zoomdata Version

Creating Custom Charts with CLI

Zoomdata’s Command Line Interface (CLI) offers a more flexible replacement for Chart Studio and allows developers to create, manage, and delete custom charts without being connected to the client application. The CLI tool uses Node.js and is installed locally via npm.

Once installed and configured, the CLI behaves much like any other command line tool. You can build projects, run tests, and push new charts using yarn commands. Currently, CLI does not support the configuration of multi-metric and group variables.

For a full list of common commands, see Commands for the Custom Chart CLI.

Installing and Configuring the Command Line Interface

Before installing, be sure you meet the following requirements:

  • Node.js is installed on your machine
  1. Install the custom charts CLI by running the following:
    npm install zoomdata-chart-cli -g
  2. After installation, you can configure the default environment that is used by the CLI. This makes creating and pushing custom charts easier, as you do not have to provide the server URL and credentials with every command.
  3. Run the following to start the configuration process:
    zd-chart config
  4. Follow the prompts to store your default server configuration in an encrypted file. After the server configuration has been saved, the CLI checks for the presence of this file when you omit the server URL/credentials when running commands.
  5. After installing, you can create new charts or make updates to current custom charts.

Creating a custom chart via CLI

  1. Zoomdata comes with a set of predefined JS libraries that you can use for custom charts. You can either use an existing chart template or download one. If you need a chart template, take a look at the Chart.js samples on github. Be sure to download the sample bundle locally before continuing.
  2. Open the Zoomdata CLI.
  3. Add the chart template and provide the file path:
    $ zd-chart add -t library chartname.js <path>
  4. Run the create command to begin:
    $ zd-chart create
  5. You are prompted to enter the name of the chart, the chart type, and a data source for the chart.
  6. When asked if you would like to continue editing the chart, enter yes. Alternatively, you can enter zd-chart edit to edit the chart.
  7. Link the upload chart.js library when prompted. Select Libraries > Include/Exclude libraries in the chart, then select your chart.js library.

  8. From here, you need to add a metric variable. When prompted, enter Variable and then Add a new variable.
  9. Select metric and enter the name as Metric. When asked if the variable drives color in the chart, enter No.

  10. Add the controls for the chart by selecting Controls and then selecting Sort & Limit.
  11. Now that a control is selected for the chart, you need to pull it locally to further customize it.
  12. Run the following command:
    $ zd-chart pull
  13. On your local machine, you can find a directory named the same as your custom chart, containing several files and sub-directories.
  14. Navigate to components>Visualizations.js and open the file.
  15. Make your changes to the file as necessary. Be sure to set the const chart element to the chart you created. For detailed information about the functions, controls, and returns you can change, refer to the examples in Creating a Custom Chart in Chart Studio.
  16. After you have made your changes, push your changes to the Zoomdata server:
    $ zd-chart push

Was this topic helpful?