Skip to content

Chart Type Selection and Query Configuration

This interactive example allows users to explore several chart types and also experiment with different groups, limits, sort directions, and metrics.

The initial chart below represents data from a Ticket Sales table residing in our Elasticsearch server. It shows the top 15 venue cities by total venue seats. Hover on chart elements to see tooltips with the appropriate metrics. Use the configuration panel to explore different charts and configurations.

If you'd like to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own. 
1
{"action": "import", "url": "../cf-demos/chart-selection/index.html"}

1
{"action": "import", "url": "../cf-demos/chart-selection/index.js"}

1
{"action": "import", "url": "../cf-demos/chart-selection/style.css"}

The source code illustrates the steps to render a chart:

  1. Define the data provider
  2. Define attribute(s) to group by
  3. Define metrics to aggregate
  4. Define visualization type
  5. Define the DIV element where the chart will be rendered
  6. Finally, execute your chart definition

The Ticket Sales table is derived from the Amazon’s Sample Database for Redshift. The data represents ticket sales activity for the fictional TICKIT web site, where users buy and sell tickets online for different types of events.