{"id":2663,"date":"2023-02-12T09:50:12","date_gmt":"2023-02-12T14:50:12","guid":{"rendered":"https:\/\/www.dpriver.com\/blog\/?p=2663"},"modified":"2023-02-23T10:24:03","modified_gmt":"2023-02-23T15:24:03","slug":"wiget","status":"publish","type":"post","link":"https:\/\/www.dpriver.com\/blog\/wiget\/","title":{"rendered":"Embed the data lineage generated by SQLFlow on your own website"},"content":{"rendered":"\n<p>If you are looking for a tool to dynamically embed your data lineage into your own website, <a href=\"https:\/\/www.gudusoft.com\/sqlflow-widget\/\">SQLFlow Widget<\/a> would be a good choice.<\/p>\n\n\n\n<p>The SQLFlow Widget is a Javascript library that enables instantaneous data lineage visualisation on your website. SQLFlow Widget works together with the Gudu SQLFlow backend in order to visualize the data lineage and provides an actionable diagram.<\/p>\n\n\n\n<p>The SQLFlow widget is shipped together with <a href=\"https:\/\/www.gudusoft.com\/sqlflow-on-premise-version\/\">the SQLFlow On-Premise version<\/a>. Once the SQLFlow Widget is installed on your server, you can access the SQLFlow widget with the Url: <a href=\"https:\/\/127.0.0.1\/widget\">https:\/\/127.0.0.1\/widget<\/a>. Currently there are no online demos available.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"847\" src=\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-5.png\" alt=\"\" class=\"wp-image-2664\" srcset=\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-5.png 600w, https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-5-213x300.png 213w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<ul><li>Visualize the lineage of the SQL queries.<\/li><\/ul>\n\n\n\n<ul><li>Show specific table\/column lineage graphics on the web page.<\/li><\/ul>\n\n\n\n<ul><li>Package the data lineage into a standalone web app.<\/li><\/ul>\n\n\n\n<ul><li>Shipped together with the <a href=\"https:\/\/www.gudusoft.com\/sqlflow-on-premise-version\/\">SQLFlow On-Premise<\/a> version.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Files<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 jquery.min.js\n\u251c\u2500\u2500 sqlflow.widget.2.4.9.css\n\u2514\u2500\u2500 sqlflow.widget.2.4.9.js\n\u2514\u2500\u2500 1\\\n\u2514\u2500\u2500 2\\\n\u2514\u2500\u2500 3\\\n\u2514\u2500\u2500 ...<\/code><\/pre>\n\n\n\n<p>Please note that the version number in the file may change. Folders from number 1 to number 15 are example codes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setup<a href=\"https:\/\/app.gitbook.com\/o\/8tYHSVB0mG81POwyVWfj\/s\/HPaNIbjpxIoccnaNkyJQ\/4.-sqlflow-widget\/get-started#setup\"><\/a><\/h2>\n\n\n\n<p>Import the <code>sqlflow.widget.2.4.9.js<\/code> in index.html. During the execution of the JS, a new iframe will be created. The <code>css<\/code> is statically imported by <code>js<\/code> and will be embedded into the iframe so no additional css import is required.<\/p>\n\n\n\n<p>jquery is optional and is included here only for the demostration purpose.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en-us\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;title&gt;demo\uff1avisualize sqltext&lt;\/title&gt;\n        &lt;script src=\"\/widget\/jquery.min.js\"&gt;&lt;\/script&gt;\n        &lt;script src=\"\/widget\/sqlflow.widget.3.0.4.js?t=1667100085601\"&gt;&lt;\/script&gt;\n        &lt;script src=\"index.js\"&gt;&lt;\/script&gt;\n        &lt;style&gt;\n            body {\n                padding: 20px;\n            }\n\n            h1 {\n                margin-top: 20px;\n                font-size: 24px;\n            }\n        &lt;\/style&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n        &lt;h1&gt;demo\uff1avisualize sqltext&lt;\/h1&gt;\n        &lt;div id=\"sqlflow\"&gt;&lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Insert the following code in index.js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(async () =&gt; {\n    \/\/ get a instance of SQLFlow\n    const sqlflow = await SQLFlow.init({\n        container: document.getElementById('sqlflow'),\n        width: 1000,\n        height: 315,\n        apiPrefix: 'http:\/\/xxx.com\/api',\n        token: '', \/\/ input your token\n    });\n\n    \/\/ set dbvendor property\n    sqlflow.vendor.set('oracle');\n\n    \/\/ set sql text property\n    sqlflow.sqltext.set(`CREATE VIEW vsal \n    AS \n      SELECT a.deptno                  \"Department\", \n             a.num_emp \/ b.total_count \"Employees\", \n             a.sal_sum \/ b.total_sal   \"Salary\" \n      FROM   (SELECT deptno, \n                     Count()  num_emp, \n                     SUM(sal) sal_sum \n              FROM   scott.emp \n              WHERE  city = 'NYC' \n              GROUP  BY deptno) a, \n             (SELECT Count()  total_count, \n                     SUM(sal) total_sal \n              FROM   scott.emp \n              WHERE  city = 'NYC') b \n    ;`);\n\n    sqlflow.visualize();\n});<\/code><\/pre>\n\n\n\n<p>With the above code we will have a result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"419\" src=\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-6-1024x419.png\" alt=\"\" class=\"wp-image-2666\" srcset=\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-6-1024x419.png 1024w, https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-6-300x123.png 300w, https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-6-768x314.png 768w, https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/\u56fe\u7247-6.png 1029w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>If you are looking for a tool to dynamically embed your data lineage into your own website, SQLFlow Widget would be a good choice. The SQLFlow Widget is a Javascript library that enables instantaneous data lineage visualisation on your website. SQLFlow Widget works together with the Gudu SQLFlow backend in order to visualize the data lineage and provides an actionable diagram. The SQLFlow widget is shipped together with the SQLFlow On-Premise version. Once the SQLFlow Widget is installed on your server, you can access the SQLFlow widget with the Url: https:\/\/127.0.0.1\/widget. Currently there are no online demos available. Visualize the\u2026<\/p>\n","protected":false},"author":6,"featured_media":2674,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[93],"tags":[],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Embed the data lineage generated by SQLFlow on your own website<\/title>\n<meta name=\"description\" content=\"Embed the data lineage generated by SQLFlow on your own website widget\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dpriver.com\/blog\/wiget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed the data lineage generated by SQLFlow on your own website\" \/>\n<meta property=\"og:description\" content=\"Embed the data lineage generated by SQLFlow on your own website widget\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dpriver.com\/blog\/wiget\/\" \/>\n<meta property=\"og:site_name\" content=\"SQL and Data Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-12T14:50:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-23T15:24:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/SQL-Metadata-Sources_700_988_white-600x847-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"leo gu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"leo gu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/#organization\",\"name\":\"SQL and Data Blog\",\"url\":\"https:\/\/www.dpriver.com\/blog\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2022\/07\/sqlpp-character.png\",\"contentUrl\":\"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2022\/07\/sqlpp-character.png\",\"width\":251,\"height\":72,\"caption\":\"SQL and Data Blog\"},\"image\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/#website\",\"url\":\"https:\/\/www.dpriver.com\/blog\/\",\"name\":\"SQL and Data Blog\",\"description\":\"SQL related blog for database professional\",\"publisher\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dpriver.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/wiget\/\",\"url\":\"https:\/\/www.dpriver.com\/blog\/wiget\/\",\"name\":\"Embed the data lineage generated by SQLFlow on your own website\",\"isPartOf\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/#website\"},\"datePublished\":\"2023-02-12T14:50:12+00:00\",\"dateModified\":\"2023-02-23T15:24:03+00:00\",\"description\":\"Embed the data lineage generated by SQLFlow on your own website widget\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/wiget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dpriver.com\/blog\/wiget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/wiget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dpriver.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed the data lineage generated by SQLFlow on your own website\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/wiget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/wiget\/\"},\"author\":{\"name\":\"leo gu\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/#\/schema\/person\/9e80d249b6da4e572bd8590b0789bc14\"},\"headline\":\"Embed the data lineage generated by SQLFlow on your own website\",\"datePublished\":\"2023-02-12T14:50:12+00:00\",\"dateModified\":\"2023-02-23T15:24:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/wiget\/\"},\"wordCount\":228,\"publisher\":{\"@id\":\"https:\/\/www.dpriver.com\/blog\/#organization\"},\"articleSection\":[\"SQLFlow\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/#\/schema\/person\/9e80d249b6da4e572bd8590b0789bc14\",\"name\":\"leo gu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dpriver.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/24976e2e4ca7dd476652bb26bd09392b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/24976e2e4ca7dd476652bb26bd09392b?s=96&d=mm&r=g\",\"caption\":\"leo gu\"},\"url\":\"https:\/\/www.dpriver.com\/blog\/author\/guyuanhao\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embed the data lineage generated by SQLFlow on your own website","description":"Embed the data lineage generated by SQLFlow on your own website widget","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dpriver.com\/blog\/wiget\/","og_locale":"en_US","og_type":"article","og_title":"Embed the data lineage generated by SQLFlow on your own website","og_description":"Embed the data lineage generated by SQLFlow on your own website widget","og_url":"https:\/\/www.dpriver.com\/blog\/wiget\/","og_site_name":"SQL and Data Blog","article_published_time":"2023-02-12T14:50:12+00:00","article_modified_time":"2023-02-23T15:24:03+00:00","og_image":[{"width":600,"height":847,"url":"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2023\/02\/SQL-Metadata-Sources_700_988_white-600x847-1.png","type":"image\/png"}],"author":"leo gu","twitter_card":"summary_large_image","twitter_misc":{"Written by":"leo gu","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.dpriver.com\/blog\/#organization","name":"SQL and Data Blog","url":"https:\/\/www.dpriver.com\/blog\/","sameAs":[],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dpriver.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2022\/07\/sqlpp-character.png","contentUrl":"https:\/\/www.dpriver.com\/blog\/wp-content\/uploads\/2022\/07\/sqlpp-character.png","width":251,"height":72,"caption":"SQL and Data Blog"},"image":{"@id":"https:\/\/www.dpriver.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.dpriver.com\/blog\/#website","url":"https:\/\/www.dpriver.com\/blog\/","name":"SQL and Data Blog","description":"SQL related blog for database professional","publisher":{"@id":"https:\/\/www.dpriver.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dpriver.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dpriver.com\/blog\/wiget\/","url":"https:\/\/www.dpriver.com\/blog\/wiget\/","name":"Embed the data lineage generated by SQLFlow on your own website","isPartOf":{"@id":"https:\/\/www.dpriver.com\/blog\/#website"},"datePublished":"2023-02-12T14:50:12+00:00","dateModified":"2023-02-23T15:24:03+00:00","description":"Embed the data lineage generated by SQLFlow on your own website widget","breadcrumb":{"@id":"https:\/\/www.dpriver.com\/blog\/wiget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dpriver.com\/blog\/wiget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dpriver.com\/blog\/wiget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dpriver.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Embed the data lineage generated by SQLFlow on your own website"}]},{"@type":"Article","@id":"https:\/\/www.dpriver.com\/blog\/wiget\/#article","isPartOf":{"@id":"https:\/\/www.dpriver.com\/blog\/wiget\/"},"author":{"name":"leo gu","@id":"https:\/\/www.dpriver.com\/blog\/#\/schema\/person\/9e80d249b6da4e572bd8590b0789bc14"},"headline":"Embed the data lineage generated by SQLFlow on your own website","datePublished":"2023-02-12T14:50:12+00:00","dateModified":"2023-02-23T15:24:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dpriver.com\/blog\/wiget\/"},"wordCount":228,"publisher":{"@id":"https:\/\/www.dpriver.com\/blog\/#organization"},"articleSection":["SQLFlow"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dpriver.com\/blog\/#\/schema\/person\/9e80d249b6da4e572bd8590b0789bc14","name":"leo gu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dpriver.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/24976e2e4ca7dd476652bb26bd09392b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24976e2e4ca7dd476652bb26bd09392b?s=96&d=mm&r=g","caption":"leo gu"},"url":"https:\/\/www.dpriver.com\/blog\/author\/guyuanhao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/posts\/2663"}],"collection":[{"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/comments?post=2663"}],"version-history":[{"count":4,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/posts\/2663\/revisions"}],"predecessor-version":[{"id":2676,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/posts\/2663\/revisions\/2676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/media\/2674"}],"wp:attachment":[{"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/media?parent=2663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/categories?post=2663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpriver.com\/blog\/wp-json\/wp\/v2\/tags?post=2663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}