Skip to content

Commit 7195838

Browse files
d45d45
committed
Added a VizAPI v2 sample based on VizImage sample
1 parent cfe6630 commit 7195838

File tree

3 files changed

+188
-0
lines changed

3 files changed

+188
-0
lines changed

‎Samples/VizImage2/VizImage2.trex‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
3+
<dashboard-extension id="com.tableau.extensions.samples.vizImage" extension-version="0.1.0">
4+
<default-locale>en_US</default-locale>
5+
<name resource-id="name"/>
6+
<description>Viz Image Sample</description>
7+
<author name="tableau" email="[email protected]" organization="tableau" website="https://www.tableau.com"/>
8+
<min-api-version>1.6</min-api-version>
9+
<source-location>
10+
<url>http://localhost:8765/Samples/VizImage/vizImage2.html</url>
11+
</source-location>
12+
<icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAlhJREFUOI2Nkt9vy1EYh5/3bbsvRSySCZbIxI+ZCKsN2TKtSFyIrV2WuRCJuBiJWxfuxCVXbvwFgiEtposgLFJElnbU1SxIZIIRJDKTrdu+53Uhra4mce7Oe57Pcz7JOULFisViwZ+29LAzOSjQYDgz1ZcCvWuXV11MJpN+OS/lm6179teqH0yDqxPTCyKSA8DcDsyOmOprnCaeP7459pdgy969i0LTC3IO/RQMyoHcQN+3cnljW3dNIFC47qDaK3g7BwdTkwBaBELT4ZPOUVWgKl4ZBnjxJPUlMDnTDrp0pmr6RHFeEjjcUUXPDGeSEwDN0Xg8sivxMhJNjGzbHd8PkM3eHRfkrBM5NkcQaY2vUnTlrDIA0NoaX+KLXFFlowr14tvVpqb2MICzmQcKqxvbumv+NAhZGCCIPwEw6QWXKYRL/VUXO0+rAUJiPwAk5MIlgVfwPjjHLCL1APmHN94ZdqeYN+NW/mn6I4BvwQYchcLnwFhJMDiYmlRxAzjpKWZkYkUCcZ2I61wi37tLbYyjiN0fHk5Oz3nGSLSzBbNHCF35R7f6K1/hN9PRhek11FrymfQQQKB4+Gl05P2qNRtmETlXW7e+b2z01dfycGNbfFMAbqNyKp9Jp4rzOT8RYFs0njJkc2iqsCObvTsOsDWWqA5C1uFy+Uz/oXJeKwVT4h0RmPUXhi79vuC0Ku6yOffTK3g9lfxfDQAisY516sg5kfOCiJk7HoLt2cf9b/9LANAc7dznm98PagG1fUOZ9IP5uMB8Q4CPoyNvausapkTt3rNMuvdf3C/o6+czhtdwmwAAAABJRU5ErkJggg==</icon>
13+
</dashboard-extension>
14+
<resources>
15+
<resource id="name">
16+
<text locale="en_US">Tableau Viz Multi-Pane Image Sample</text>
17+
</resource>
18+
</resources>
19+
</manifest>

‎Samples/VizImage2/vizImage2.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Viz Image Sample</title>
8+
9+
<!-- jQuery -->
10+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
11+
12+
<!-- Bootstrap -->
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
15+
16+
<!-- Extensions Library (this will be hosted on a CDN eventually) -->
17+
<script src="./lib/tableau.extensions.1.latest.js"></script>
18+
19+
<!-- Our extension's code -->
20+
<script src="./vizImage2.js"></script>
21+
</head>
22+
<body>
23+
<div class="container">
24+
<h4>Tableau Viz Multi-Pane Image Sample</h4>
25+
<div id="viz-options">
26+
<select id="mark-select1" class="form-select" aria-label="Default select example" disabled="true">
27+
<option selected disabled>Mark Type 1</option>
28+
<option value="bar">Bar</option>
29+
<option value="line">Line</option>
30+
<option value="area">Area</option>
31+
<option value="square">Square</option>
32+
<option value="circle">Circle</option>
33+
<option value="text">Text</option>
34+
</select>
35+
<select id="mark-select2" class="form-select" aria-label="Default select example" disabled="true">
36+
<option selected disabled>Mark Type 2</option>
37+
<option value="bar">Bar</option>
38+
<option value="line">Line</option>
39+
<option value="area">Area</option>
40+
<option value="square">Square</option>
41+
<option value="circle">Circle</option>
42+
<option value="text">Text</option>
43+
</select>
44+
<!-- See all color palettes available: https://tableau.github.io/extensions-api/docs/trex_tableau_viz_ref.html -->
45+
<select id="color-select" class="form-select" aria-label="Default select example" disabled="true">
46+
<option selected disabled>Color Palette</option>
47+
<option value="green_orange_cyan_yellow_10_0">Green, Orange, Cyan, Yellow</option>
48+
<option value="tableau20_10_0">Tableau 20</option>
49+
<option value="summer_10_0">Summer</option>
50+
<option value="winter_10_0">Winter</option>
51+
<option value="color_blind_10_0">Color Blind</option>
52+
</select>
53+
</div>
54+
<hr>
55+
<div id="viz-container"></div>
56+
</div>
57+
</body>
58+
</html>

‎Samples/VizImage2/vizImage2.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
'use strict';
2+
3+
// Wrap everything in an anonymous function to avoid polluting the global namespace
4+
(function () {
5+
$(document).ready(function () {
6+
tableau.extensions.initializeAsync().then(function () {
7+
addVizImage(tableau.MarkType.Bar, tableau.MarkType.Bar, 'tableau20_10_0' );
8+
9+
let markSelector1 = $('#mark-select1');
10+
let markSelector2 = $('#mark-select2');
11+
let colorSelector = $('#color-select');
12+
13+
markSelector1.prop('disabled', false);
14+
markSelector2.prop('disabled', false);
15+
colorSelector.prop('disabled', false);
16+
17+
// updating viz images with new values upon a selector change.
18+
markSelector1.change(function () {
19+
addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val() );
20+
});
21+
markSelector2.change(function () {
22+
addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val() );
23+
});
24+
colorSelector.change(function () {
25+
addVizImage(markSelector1.val(), markSelector2.val(), colorSelector.val());
26+
});
27+
});
28+
});
29+
30+
function addVizImage (markType1, markType2, colorType) {
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+
],
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,
74+
},
75+
{
76+
mark: markType2,
77+
color: { field: 'Category', type: tableau.VizImageEncodingType.Discrete, palette: { name: colorType } },
78+
},
79+
],
80+
};
81+
82+
// defaulting values if null.
83+
if (markType1 === null) {
84+
vizInputSpec.markType1 = tableau.MarkType.Bar;
85+
}
86+
if (markType2 === null) {
87+
vizInputSpec.markType2 = tableau.MarkType.Bar;
88+
}
89+
if (colorType === null) {
90+
vizInputSpec.colorType = 'tableau20_10_0';
91+
}
92+
93+
// making call to create viz image from the input specifications.
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');
98+
image.src = url;
99+
image.style.maxWidth = '100%';
100+
image.style.maxHeight = '100%';
101+
image.className = 'center-block';
102+
var vizApiElement = document.getElementById('viz-container');
103+
// clearing UI and adding in new viz.
104+
vizApiElement.innerHTML = '';
105+
vizApiElement.appendChild(image);
106+
image.addEventListener('load', function () { return URL.revokeObjectURL(url); }, { once: true });
107+
}, function (err) {
108+
console.log(err);
109+
});
110+
}
111+
})();

0 commit comments

Comments
 (0)