Stream 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.15/dist/vizzu.min.js' |
| import { |
| data |
| } from 'https://lib.vizzuhq.com/0.15/assets/data/music_industry_history_1.js' |
| |
| let chart = new Vizzu('myVizzu') |
| |
| chart.initializing |
| |
| chart.animate({ |
| data |
| }) |
- filter the Diemsion data series on the Y-axis step-by-step, combined with
their dominant time period on Year data series
| chart.animate({ |
| config: { |
| "channels": { |
| "x": [ |
| "Year" |
| ], |
| "y": [ |
| "Revenue", |
| "Format" |
| ], |
| "color": "Format" |
| }, |
| "geometry": "area", |
| "align": "center" |
| }, |
| style: { |
| "plot": { |
| "yAxis": { |
| "label": { |
| "numberScale": "K, M, B, T" |
| } |
| } |
| } |
| } |
| }); |
| |
| chart.animate({ |
| data: { |
| filter: (record) => |
| (record.Format === 'Tapes' || record.Format === 'Vinyl') && record.Year <= 1989 |
| }, |
| config: {} |
| }); |
| |
| chart.on('plot-axis-label-draw', (event) => { |
| const year = parseFloat(event.detail.text) |
| if (!event.detail.text.includes('$') && !isNaN(year) && year % 5 !== 0) |
| event.preventDefault() |
| }); |
| |
| chart.animate({ |
| data: { |
| filter: (record) => |
| (record.Format === 'Tapes' || |
| record.Format === 'Cassette' || |
| record.Format === 'Vinyl') && |
| record.Year <= 1999 |
| }, |
| config: {}, |
| style: { |
| "plot": { |
| "xAxis": { |
| "label": { |
| "angle": 0 |
| } |
| } |
| } |
| } |
| }); |
| |
| chart.animate({ |
| data: { |
| filter: (record) => |
| record.Format === 'DVD' || |
| record.Format === 'Other' || |
| record.Format === 'Tapes' || |
| record.Format === 'Cassette' || |
| record.Format === 'Vinyl' || |
| record.Format === 'CD' |
| }, |
| config: {} |
| }); |
| |
| chart.animate({ |
| data: { |
| filter: (record) => |
| record.Format === 'DVD' || |
| record.Format === 'Other' || |
| record.Format === 'Tapes' || |
| record.Format === 'Download' || |
| record.Format === 'Cassette' || |
| record.Format === 'Vinyl' || |
| record.Format === 'CD' |
| }, |
| config: {} |
| }); |
| |
| chart.animate({ |
| data: { |
| filter: (record) => |
| record.Format === 'DVD' || |
| record.Format === 'Other' || |
| record.Format === 'Tapes' || |
| record.Format === 'Download' || |
| record.Format === 'Streaming' || |
| record.Format === 'Cassette' || |
| record.Format === 'Vinyl' || |
| record.Format === 'CD' |
| }, |
| config: {} |
| }); |
| |
| chart.feature('tooltip', true); |