|
4 | 4 | (function () { |
5 | 5 | $(document).ready(function () { |
6 | 6 | tableau.extensions.initializeAsync().then(function () { |
7 | | - addVizImage(tableau.MarkType.Bar, tableau.MarkType.Bar, 'tableau20_10_0' ); |
| 7 | + addVizImage(tableau.MarkType.Bar, tableau.MarkType.Bar, 'tableau20_10_0'); |
8 | 8 |
|
9 | | - let markSelector1 = $('#mark-select1'); |
10 | | - let markSelector2 = $('#mark-select2'); |
11 | | - let colorSelector = $('#color-select'); |
| 9 | + const markSelector1 = $('#mark-select1'); |
| 10 | + const markSelector2 = $('#mark-select2'); |
| 11 | + const colorSelector = $('#color-select'); |
12 | 12 |
|
13 | 13 | markSelector1.prop('disabled', false); |
14 | 14 | markSelector2.prop('disabled', false); |
15 | 15 | colorSelector.prop('disabled', false); |
16 | 16 |
|
17 | 17 | // updating viz images with new values upon a selector change. |
18 | 18 | markSelector1.change(function () { |
19 | | - addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val() ); |
| 19 | + addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val()); |
20 | 20 | }); |
21 | 21 | markSelector2.change(function () { |
22 | | - addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val() ); |
| 22 | + addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val()); |
23 | 23 | }); |
24 | 24 | colorSelector.change(function () { |
25 | 25 | addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val()); |
26 | 26 | }); |
27 | | - }); |
| 27 | + }); |
28 | 28 | }); |
29 | 29 |
|
30 | | - function addVizImage (markType1, markType2, colorType) { |
| 30 | + function addVizImage (markType1, markType2, colorType) { |
31 | 31 | const vizInputSpec = { |
32 | | - version: 2, |
33 | | - description: 'Example QQConcat viz', |
34 | | - data: { |
35 | | - values: [ |
36 | | - { Segment: 'Consumer', ShipMode: 'First Class', Category: 'Technology', Profit: 11560.75, Sales: 61089.43 }, |
37 | | - { Segment: 'Corporate', ShipMode: 'First Class', Category: 'Technology', Profit: 7235.75, Sales: 39201.43 }, |
38 | | - { Segment: 'Home Office', ShipMode: 'First Class', Category: 'Technology', Profit: 8706.75, Sales: 39074.43 }, |
39 | | - { Segment: 'Consumer', ShipMode: 'First Class', Category: 'Office Supplies', Profit: 7734.74, Sales: 48200.43 }, |
40 | | - { Segment: 'Corporate', ShipMode: 'First Class', Category: 'Office Supplies', Profit: 6299.74, Sales: 31579.43 }, |
41 | | - { Segment: 'Home Office', ShipMode: 'First Class', Category: 'Office Supplies', Profit: 4366.74, Sales: 21552.43 }, |
42 | | - { Segment: 'Consumer', ShipMode: 'First Class', Category: 'Furniture', Profit: 2078.74, Sales: 49880.43 }, |
43 | | - { Segment: 'Corporate', ShipMode: 'First Class', Category: 'Furniture', Profit: 929.75, Sales: 35077.43 }, |
44 | | - { Segment: 'Home Office', ShipMode: 'First Class', Category: 'Furniture', Profit: 58.74, Sales: 25773.43 }, |
45 | | - { Segment: 'Consumer', ShipMode: 'Second Class', Category: 'Technology', Profit: 14430.75, Sales: 72942.43 }, |
46 | | - { Segment: 'Corporate', ShipMode: 'Second Class', Category: 'Technology', Profit: 6819.74, Sales: 41912.43 }, |
47 | | - { Segment: 'Home Office', ShipMode: 'Second Class', Category: 'Technology', Profit: 4902.75, Sales: 27366.43 }, |
48 | | - { Segment: 'Consumer', ShipMode: 'Second Class', Category: 'Office Supplies', Profit: 9752.74, Sales: 71757.43 }, |
49 | | - { Segment: 'Corporate', ShipMode: 'Second Class', Category: 'Office Supplies', Profit: 9809.74, Sales: 62810.43 }, |
50 | | - { Segment: 'Home Office', ShipMode: 'Second Class', Category: 'Office Supplies', Profit: 7506.74, Sales: 26115.43 }, |
51 | | - { Segment: 'Consumer', ShipMode: 'Second Class', Category: 'Furniture', Profit: 763.74, Sales: 86799.43 }, |
52 | | - { Segment: 'Corporate', ShipMode: 'Second Class', Category: 'Furniture', Profit: 1596.74, Sales: 41403.43 }, |
53 | | - { Segment: 'Home Office', ShipMode: 'Second Class', Category: 'Furniture', Profit: 1865.74, Sales: 28086.43 }, |
54 | | - ], |
| 32 | + version: 2, |
| 33 | + description: 'Example QQConcat viz', |
| 34 | + data: { |
| 35 | + values: [ |
| 36 | + { Segment: 'Consumer', ShipMode: 'First Class', Category: 'Technology', Profit: 11560.75, Sales: 61089.43 }, |
| 37 | + { Segment: 'Corporate', ShipMode: 'First Class', Category: 'Technology', Profit: 7235.75, Sales: 39201.43 }, |
| 38 | + { Segment: 'Home Office', ShipMode: 'First Class', Category: 'Technology', Profit: 8706.75, Sales: 39074.43 }, |
| 39 | + { Segment: 'Consumer', ShipMode: 'First Class', Category: 'Office Supplies', Profit: 7734.74, Sales: 48200.43 }, |
| 40 | + { Segment: 'Corporate', ShipMode: 'First Class', Category: 'Office Supplies', Profit: 6299.74, Sales: 31579.43 }, |
| 41 | + { Segment: 'Home Office', ShipMode: 'First Class', Category: 'Office Supplies', Profit: 4366.74, Sales: 21552.43 }, |
| 42 | + { Segment: 'Consumer', ShipMode: 'First Class', Category: 'Furniture', Profit: 2078.74, Sales: 49880.43 }, |
| 43 | + { Segment: 'Corporate', ShipMode: 'First Class', Category: 'Furniture', Profit: 929.75, Sales: 35077.43 }, |
| 44 | + { Segment: 'Home Office', ShipMode: 'First Class', Category: 'Furniture', Profit: 58.74, Sales: 25773.43 }, |
| 45 | + { Segment: 'Consumer', ShipMode: 'Second Class', Category: 'Technology', Profit: 14430.75, Sales: 72942.43 }, |
| 46 | + { Segment: 'Corporate', ShipMode: 'Second Class', Category: 'Technology', Profit: 6819.74, Sales: 41912.43 }, |
| 47 | + { Segment: 'Home Office', ShipMode: 'Second Class', Category: 'Technology', Profit: 4902.75, Sales: 27366.43 }, |
| 48 | + { Segment: 'Consumer', ShipMode: 'Second Class', Category: 'Office Supplies', Profit: 9752.74, Sales: 71757.43 }, |
| 49 | + { Segment: 'Corporate', ShipMode: 'Second Class', Category: 'Office Supplies', Profit: 9809.74, Sales: 62810.43 }, |
| 50 | + { Segment: 'Home Office', ShipMode: 'Second Class', Category: 'Office Supplies', Profit: 7506.74, Sales: 26115.43 }, |
| 51 | + { Segment: 'Consumer', ShipMode: 'Second Class', Category: 'Furniture', Profit: 763.74, Sales: 86799.43 }, |
| 52 | + { Segment: 'Corporate', ShipMode: 'Second Class', Category: 'Furniture', Profit: 1596.74, Sales: 41403.43 }, |
| 53 | + { Segment: 'Home Office', ShipMode: 'Second Class', Category: 'Furniture', Profit: 1865.74, Sales: 28086.43 } |
| 54 | + ] |
| 55 | + }, |
| 56 | + vizlayout: { |
| 57 | + title: 'Example Combination Chart', |
| 58 | + size: { width: 800, height: 600 }, |
| 59 | + showcolorlegend: true, |
| 60 | + showsizelegend: false, |
| 61 | + showrowsgridline: false |
| 62 | + }, |
| 63 | + columns: [ |
| 64 | + { field: 'ShipMode', type: tableau.VizImageEncodingType.Discrete }, |
| 65 | + { field: 'Sales', type: tableau.VizImageEncodingType.Continuous }, |
| 66 | + { field: 'Profit', type: tableau.VizImageEncodingType.Continuous } |
| 67 | + ], |
| 68 | + rows: [{ field: 'Segment', type: tableau.VizImageEncodingType.Discrete }], |
| 69 | + encodingaxis: 'columns', |
| 70 | + defaultencoding: { mark: tableau.MarkType.Bar }, |
| 71 | + encodings: [ |
| 72 | + { |
| 73 | + mark: markType1 |
55 | 74 | }, |
56 | | - vizlayout: { |
57 | | - title: 'Example Combination Chart', |
58 | | - size: {width: 800, height: 600}, |
59 | | - showcolorlegend: true, |
60 | | - showsizelegend:false, |
61 | | - showrowsgridline: false, |
62 | | - }, |
63 | | - columns: [ |
64 | | - { field: 'ShipMode', type: tableau.VizImageEncodingType.Discrete }, |
65 | | - { field: 'Sales', type: tableau.VizImageEncodingType.Continuous }, |
66 | | - { field: 'Profit', type: tableau.VizImageEncodingType.Continuous }, |
67 | | - ], |
68 | | - rows: [{ field: 'Segment', type: tableau.VizImageEncodingType.Discrete }], |
69 | | - encodingaxis: 'columns', |
70 | | - defaultencoding: { mark: tableau.MarkType.Bar }, |
71 | | - encodings: [ |
72 | | - { |
73 | | - mark: markType1, |
74 | | - }, |
75 | | - { |
| 75 | + { |
76 | 76 | mark: markType2, |
77 | | - color: { field: 'Category', type: tableau.VizImageEncodingType.Discrete, palette: { name: colorType } }, |
78 | | -}, |
79 | | - ], |
80 | | - }; |
| 77 | + color: { field: 'Category', type: tableau.VizImageEncodingType.Discrete, palette: { name: colorType } } |
| 78 | + } |
| 79 | + ] |
| 80 | + }; |
81 | 81 |
|
82 | 82 | // defaulting values if null. |
83 | 83 | if (markType1 === null) { |
|
88 | 88 | } |
89 | 89 | if (colorType === null) { |
90 | 90 | vizInputSpec.colorType = 'tableau20_10_0'; |
91 | | - } |
| 91 | + } |
92 | 92 |
|
93 | 93 | // making call to create viz image from the input specifications. |
94 | 94 | tableau.extensions.createVizImageAsync(vizInputSpec).then(function (svg) { |
95 | | - var blob = new Blob([svg], { type: 'image/svg+xml' }); |
96 | | - var url = URL.createObjectURL(blob); |
97 | | - var image = document.createElement('img'); |
| 95 | + const blob = new Blob([svg], { type: 'image/svg+xml' }); |
| 96 | + const url = URL.createObjectURL(blob); |
| 97 | + const image = document.createElement('img'); |
98 | 98 | image.src = url; |
99 | 99 | image.style.maxWidth = '100%'; |
100 | 100 | image.style.maxHeight = '100%'; |
101 | 101 | image.className = 'center-block'; |
102 | | - var vizApiElement = document.getElementById('viz-container'); |
| 102 | + const vizApiElement = document.getElementById('viz-container'); |
103 | 103 | // clearing UI and adding in new viz. |
104 | 104 | vizApiElement.innerHTML = ''; |
105 | 105 | vizApiElement.appendChild(image); |
106 | 106 | image.addEventListener('load', function () { return URL.revokeObjectURL(url); }, { once: true }); |
107 | 107 | }, function (err) { |
108 | 108 | console.log(err); |
109 | | - }); |
| 109 | + }); |
110 | 110 | } |
111 | 111 | })(); |
0 commit comments