Multiple Charts¶

This demo renders multiple visualizations in a single page. Click on a visualization to select it. The configuration panel updates itself with the configuration of the selected visualization.

You can also use the configuration panel to update the selected visualization in different ways. For example, you can change the chart type, group-by attribute(s), limit, sort, and metrics. Different visualizations may provide different options. For example, the “Line Trend: Attribute Values” visualization provides options to configure a time attribute and its granularity. The “Scatter Plot” visualization allows to select three metrics for x-axis, y-axis, and bubble size.

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.

Html

1	`{"action": "import", "url": "../cf-demos/multiple-charts/index.html"}`

Javascript

1	`{"action": "import", "url": "../cf-demos/multiple-charts/index.js"}`

Css

1	`{"action": "import", "url": "../cf-demos/multiple-charts/style.css"}`

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.