Dot Plot 1
Info - How to setup Vizzu
In HTML
, create a placeholder element that will contain the rendered
chart.
| <html> |
| <body> |
| <div id="myVizzu"> |
| </div> |
| </body> |
| </html> |
In JavaScript
, initialize and configure the chart:
| import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.16/dist/vizzu.min.js' |
| import { |
| data_1974_1990 |
| } from 'https://lib.vizzuhq.com/0.16/assets/data/IMDB_data.js' |
| |
| let chart = new Vizzu('myVizzu') |
| |
| chart.initializing |
| |
| chart.animate({ |
| data_1974_1990 |
| }) |
- move the Dimension from Y-axis to the no-operation (Noop) channel
- add a Measure to the Y-axis
- set the Split parameter to true
| chart.animate({ |
| config: { |
| "channels": { |
| "x": "Year", |
| "y": { |
| "set": "Index", |
| "range": { |
| "max": "105%" |
| } |
| } |
| }, |
| "geometry": "circle" |
| } |
| }); |
| |
| chart.animate({ |
| config: { |
| "channels": { |
| "y": { |
| "set": "IMDb Rating", |
| "range": { |
| "max": "105%" |
| } |
| }, |
| "noop": "Index" |
| }, |
| "orientation": "vertical", |
| "split": true |
| } |
| }); |
| |
| chart.feature('tooltip', true); |