You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@zeppelin.apache.org by Suraj <su...@yahoo.co.in> on 2016/01/21 11:48:54 UTC
Problem in creating sankey diagram
Hi
I am trying to use Sankey diagram fromhttp://github.com/tamc/Sankey/tarball/master in Zeppelin note; however it is not showing any visual. The example used is ‘tamc-Sankey-c6c6909/examples/simple.html’ from the above tar (same is shown below). I am running it with %angular. The example works standalone (in .html without Zeppelin note). The js src & css (in the script below) are from tar link provided above. Any suggestions on how to make it work? Thanks a lot. Regards, Suraj ----------------code-------------------- %angular <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/raphael.js" type="text/javascript"></script> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/jquery.js" type="text/javascript"></script> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/js/sankey.js" type="text/javascript"></script> <link rel="stylesheet" href="file:///media/zeppelin/tamc-Sankey-c6c6909/examples/css/style.css" /> <script type='text/javascript'> $(document).ready(function() { var sankey = new Sankey(); sankey.stack(0,["Top","Bottom"]); sankey.stack(1,["Merge"]); sankey.stack(2,["Good","Bad"]); sankey.setData([["Top",100,"Merge"],["Bottom",50,"Merge"],["Merge",70,"Good"],["Merge",80,"Bad"]]); sankey.draw(); }); </script> <h1 style='width:1000px; text-align: center; margin-bottom: 0'>A very simple Sankey Diagram</h1> <div style='width:1000px; text-align: center; margin-top: 0'>Move your mouse over the diagram to show values</div> <div id='sankey' style="width:1000px;height:1000px"> </div> <!--#yiv1644338845 _filtered #yiv1644338845 {font-family:Calibri;panose-1:2 15 5 2 2 2 4 3 2 4;}#yiv1644338845 #yiv1644338845 p.yiv1644338845MsoNormal, #yiv1644338845 li.yiv1644338845MsoNormal, #yiv1644338845 div.yiv1644338845MsoNormal {margin:0in;margin-bottom:.0001pt;font-size:11.0pt;font-family:"Calibri", "sans-serif";}#yiv1644338845 a:link, #yiv1644338845 span.yiv1644338845MsoHyperlink {color:blue;text-decoration:underline;}#yiv1644338845 a:visited, #yiv1644338845 span.yiv1644338845MsoHyperlinkFollowed {color:purple;text-decoration:underline;}#yiv1644338845 span.yiv1644338845EmailStyle17 {font-family:"Arial", "sans-serif";color:windowtext;}#yiv1644338845 span.yiv1644338845EmailStyle18 {font-family:"Arial", "sans-serif";color:#1F497D;}#yiv1644338845 .yiv1644338845MsoChpDefault {font-size:10.0pt;} _filtered #yiv1644338845 {margin:1.0in 1.0in 1.0in 1.0in;}#yiv1644338845 div.yiv1644338845WordSection1 {}-->
Re: Problem in creating sankey diagram
Posted by TEJA SRIVASTAV <te...@gmail.com>.
Another problem that we might face is during the bad bandwidth connection
the script loading might take time. So we run up into a issue were the
sankey code that you are stated might start executing even before the
library is loaded.
Make a ajax call and wrap your code inside the promise to ensure that ur
code is executed after the library is loaded
I have made changes in my repo were i create a util class.
Would love to contribute back
On Fri, Jan 22, 2016 at 2:33 PM, Suraj <su...@yahoo.co.in> wrote:
> That resolves it. Thanks Anthony and Corneau!
>
> Sent from Yahoo Mail on Android
> <https://overview.mail.yahoo.com/mobile/?.src=Android>
>
> On Thu, 21 Jan, 2016 at 9:06 PM, Anthony Corbacho
> <an...@apache.org> wrote:
>
> Hi,
>
> The problem is that you try to load a js file from raw githubusercontent,
> and it will not work because of the mime of the content, if you look closer
> to the response you get, you will notice that the file mime is plain text
> instead of js. You should use cdn.rawgit instead.
>
> cdn.rawgit.com/tamc/Sankey/master/js/sankey.js
> On Jan 22, 2016 12:22 AM, "Suraj" <su...@yahoo.co.in> wrote:
>
>> Yes, problem seems to be with loading .js src files. However, if I
>> provide hosted links like
>> https://raw.githubusercontent.com/tamc/Sankey/master/js/sankey.js , it's
>> still failing.
>>
>> Accessing of local files works in standalone html/js. Isn't there a way
>> to access local js src from Zeppelin note?
>>
>>
>> Sent from Yahoo Mail on Android
>> <https://overview.mail.yahoo.com/mobile/?.src=Android>
>>
>> On Thu, 21 Jan, 2016 at 8:08 PM, Corneau Damien
>> <co...@gmail.com> wrote:
>>
>> Hi,
>> I don't think the file path for the .js files can be reached this way.
>> You would need to point to a hosted file.
>> On Jan 21, 2016 7:52 PM, "Suraj" <su...@yahoo.co.in> wrote:
>>
>>> Hi
>>>
>>>
>>>
>>> I am trying to use Sankey diagram from
>>> http://github.com/tamc/Sankey/tarball/master in Zeppelin note; however
>>> it is not showing any visual. The example used is
>>> ‘tamc-Sankey-c6c6909/examples/simple.html’ from the above tar (same is
>>> shown below). I am running it with %angular. The example works standalone
>>> (in .html without Zeppelin note). The js src & css (in the script below)
>>> are from tar link provided above.
>>> Any suggestions on how to make it work? Thanks a lot.
>>>
>>> Regards,
>>> Suraj
>>>
>>> ----------------code--------------------
>>> %angular
>>> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/raphael.js"
>>> type="text/javascript"></script>
>>> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/jquery.js"
>>> type="text/javascript"></script>
>>> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/js/sankey.js"
>>> type="text/javascript"></script>
>>> <link rel="stylesheet" href="
>>> file:///media/zeppelin/tamc-Sankey-c6c6909/examples/css/style.css" />
>>> <script type='text/javascript'>
>>> $(document).ready(function() {
>>> var sankey = new Sankey();
>>>
>>> sankey.stack(0,["Top","Bottom"]);
>>> sankey.stack(1,["Merge"]);
>>> sankey.stack(2,["Good","Bad"]);
>>>
>>>
>>> sankey.setData([["Top",100,"Merge"],["Bottom",50,"Merge"],["Merge",70,"Good"],["Merge",80,"Bad"]]);
>>> sankey.draw();
>>> });
>>> </script>
>>> <h1 style='width:1000px; text-align: center; margin-bottom: 0'>A very
>>> simple Sankey Diagram</h1>
>>> <div style='width:1000px; text-align: center; margin-top: 0'>Move your
>>> mouse over the diagram to show values</div>
>>> <div id='sankey' style="width:1000px;height:1000px">
>>>
>>> </div>
>>>
>>
--
With regards,
Teja Srivastav
+91 9066 82 32 80
Re: Problem in creating sankey diagram
Posted by Suraj <su...@yahoo.co.in>.
That resolves it. Thanks Anthony and Corneau!
Sent from Yahoo Mail on Android
On Thu, 21 Jan, 2016 at 9:06 PM, Anthony Corbacho<an...@apache.org> wrote:
Hi,
The problem is that you try to load a js file from raw githubusercontent, and it will not work because of the mime of the content, if you look closer to the response you get, you will notice that the file mime is plain text instead of js. You should use cdn.rawgit instead.
cdn.rawgit.com/tamc/Sankey/master/js/sankey.js
On Jan 22, 2016 12:22 AM, "Suraj" <su...@yahoo.co.in> wrote:
Yes, problem seems to be with loading .js src files. However, if I provide hosted links likehttps://raw.githubusercontent.com/tamc/Sankey/master/js/sankey.js , it's still failing.
Accessing of local files works in standalone html/js. Isn't there a way to access local js src from Zeppelin note?
Sent from Yahoo Mail on Android
On Thu, 21 Jan, 2016 at 8:08 PM, Corneau Damien<co...@gmail.com> wrote:
Hi,
I don't think the file path for the .js files can be reached this way. You would need to point to a hosted file.
On Jan 21, 2016 7:52 PM, "Suraj" <su...@yahoo.co.in> wrote:
Hi
I am trying to use Sankey diagram fromhttp://github.com/tamc/Sankey/tarball/master in Zeppelin note; however it is not showing any visual. The example used is ‘tamc-Sankey-c6c6909/examples/simple.html’ from the above tar (same is shown below). I am running it with %angular. The example works standalone (in .html without Zeppelin note). The js src & css (in the script below) are from tar link provided above. Any suggestions on how to make it work? Thanks a lot. Regards, Suraj ----------------code-------------------- %angular <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/raphael.js" type="text/javascript"></script> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/jquery.js" type="text/javascript"></script> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/js/sankey.js" type="text/javascript"></script> <link rel="stylesheet" href="file:///media/zeppelin/tamc-Sankey-c6c6909/examples/css/style.css" /> <script type='text/javascript'> $(document).ready(function() { var sankey = new Sankey(); sankey.stack(0,["Top","Bottom"]); sankey.stack(1,["Merge"]); sankey.stack(2,["Good","Bad"]); sankey.setData([["Top",100,"Merge"],["Bottom",50,"Merge"],["Merge",70,"Good"],["Merge",80,"Bad"]]); sankey.draw(); }); </script> <h1 style='width:1000px; text-align: center; margin-bottom: 0'>A very simple Sankey Diagram</h1> <div style='width:1000px; text-align: center; margin-top: 0'>Move your mouse over the diagram to show values</div> <div id='sankey' style="width:1000px;height:1000px"> </div>
Re: Problem in creating sankey diagram
Posted by Anthony Corbacho <an...@apache.org>.
Hi,
The problem is that you try to load a js file from raw githubusercontent,
and it will not work because of the mime of the content, if you look closer
to the response you get, you will notice that the file mime is plain text
instead of js. You should use cdn.rawgit instead.
cdn.rawgit.com/tamc/Sankey/master/js/sankey.js
On Jan 22, 2016 12:22 AM, "Suraj" <su...@yahoo.co.in> wrote:
> Yes, problem seems to be with loading .js src files. However, if I provide
> hosted links like
> https://raw.githubusercontent.com/tamc/Sankey/master/js/sankey.js , it's
> still failing.
>
> Accessing of local files works in standalone html/js. Isn't there a way to
> access local js src from Zeppelin note?
>
>
> Sent from Yahoo Mail on Android
> <https://overview.mail.yahoo.com/mobile/?.src=Android>
>
> On Thu, 21 Jan, 2016 at 8:08 PM, Corneau Damien
> <co...@gmail.com> wrote:
>
> Hi,
> I don't think the file path for the .js files can be reached this way. You
> would need to point to a hosted file.
> On Jan 21, 2016 7:52 PM, "Suraj" <su...@yahoo.co.in> wrote:
>
>> Hi
>>
>>
>>
>> I am trying to use Sankey diagram from
>> http://github.com/tamc/Sankey/tarball/master in Zeppelin note; however
>> it is not showing any visual. The example used is
>> ‘tamc-Sankey-c6c6909/examples/simple.html’ from the above tar (same is
>> shown below). I am running it with %angular. The example works standalone
>> (in .html without Zeppelin note). The js src & css (in the script below)
>> are from tar link provided above.
>> Any suggestions on how to make it work? Thanks a lot.
>>
>> Regards,
>> Suraj
>>
>> ----------------code--------------------
>> %angular
>> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/raphael.js"
>> type="text/javascript"></script>
>> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/jquery.js"
>> type="text/javascript"></script>
>> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/js/sankey.js"
>> type="text/javascript"></script>
>> <link rel="stylesheet" href="
>> file:///media/zeppelin/tamc-Sankey-c6c6909/examples/css/style.css" />
>> <script type='text/javascript'>
>> $(document).ready(function() {
>> var sankey = new Sankey();
>>
>> sankey.stack(0,["Top","Bottom"]);
>> sankey.stack(1,["Merge"]);
>> sankey.stack(2,["Good","Bad"]);
>>
>>
>> sankey.setData([["Top",100,"Merge"],["Bottom",50,"Merge"],["Merge",70,"Good"],["Merge",80,"Bad"]]);
>> sankey.draw();
>> });
>> </script>
>> <h1 style='width:1000px; text-align: center; margin-bottom: 0'>A very
>> simple Sankey Diagram</h1>
>> <div style='width:1000px; text-align: center; margin-top: 0'>Move your
>> mouse over the diagram to show values</div>
>> <div id='sankey' style="width:1000px;height:1000px">
>>
>> </div>
>>
>
Re: Problem in creating sankey diagram
Posted by Suraj <su...@yahoo.co.in>.
Yes, problem seems to be with loading .js src files. However, if I provide hosted links likehttps://raw.githubusercontent.com/tamc/Sankey/master/js/sankey.js , it's still failing.
Accessing of local files works in standalone html/js. Isn't there a way to access local js src from Zeppelin note?
Sent from Yahoo Mail on Android
On Thu, 21 Jan, 2016 at 8:08 PM, Corneau Damien<co...@gmail.com> wrote:
Hi,
I don't think the file path for the .js files can be reached this way. You would need to point to a hosted file.
On Jan 21, 2016 7:52 PM, "Suraj" <su...@yahoo.co.in> wrote:
Hi
I am trying to use Sankey diagram fromhttp://github.com/tamc/Sankey/tarball/master in Zeppelin note; however it is not showing any visual. The example used is ‘tamc-Sankey-c6c6909/examples/simple.html’ from the above tar (same is shown below). I am running it with %angular. The example works standalone (in .html without Zeppelin note). The js src & css (in the script below) are from tar link provided above. Any suggestions on how to make it work? Thanks a lot. Regards, Suraj ----------------code-------------------- %angular <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/raphael.js" type="text/javascript"></script> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/jquery.js" type="text/javascript"></script> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/js/sankey.js" type="text/javascript"></script> <link rel="stylesheet" href="file:///media/zeppelin/tamc-Sankey-c6c6909/examples/css/style.css" /> <script type='text/javascript'> $(document).ready(function() { var sankey = new Sankey(); sankey.stack(0,["Top","Bottom"]); sankey.stack(1,["Merge"]); sankey.stack(2,["Good","Bad"]); sankey.setData([["Top",100,"Merge"],["Bottom",50,"Merge"],["Merge",70,"Good"],["Merge",80,"Bad"]]); sankey.draw(); }); </script> <h1 style='width:1000px; text-align: center; margin-bottom: 0'>A very simple Sankey Diagram</h1> <div style='width:1000px; text-align: center; margin-top: 0'>Move your mouse over the diagram to show values</div> <div id='sankey' style="width:1000px;height:1000px"> </div>
Re: Problem in creating sankey diagram
Posted by Corneau Damien <co...@gmail.com>.
Hi,
I don't think the file path for the .js files can be reached this way. You
would need to point to a hosted file.
On Jan 21, 2016 7:52 PM, "Suraj" <su...@yahoo.co.in> wrote:
> Hi
>
>
>
> I am trying to use Sankey diagram from
> http://github.com/tamc/Sankey/tarball/master in Zeppelin note; however
> it is not showing any visual. The example used is
> ‘tamc-Sankey-c6c6909/examples/simple.html’ from the above tar (same is
> shown below). I am running it with %angular. The example works standalone
> (in .html without Zeppelin note). The js src & css (in the script below)
> are from tar link provided above.
> Any suggestions on how to make it work? Thanks a lot.
>
> Regards,
> Suraj
>
> ----------------code--------------------
> %angular
> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/raphael.js"
> type="text/javascript"></script>
> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/ext/jquery.js"
> type="text/javascript"></script>
> <script src="file:///media/zeppelin/tamc-Sankey-c6c6909/js/sankey.js"
> type="text/javascript"></script>
> <link rel="stylesheet" href="
> file:///media/zeppelin/tamc-Sankey-c6c6909/examples/css/style.css" />
> <script type='text/javascript'>
> $(document).ready(function() {
> var sankey = new Sankey();
>
> sankey.stack(0,["Top","Bottom"]);
> sankey.stack(1,["Merge"]);
> sankey.stack(2,["Good","Bad"]);
>
>
> sankey.setData([["Top",100,"Merge"],["Bottom",50,"Merge"],["Merge",70,"Good"],["Merge",80,"Bad"]]);
> sankey.draw();
> });
> </script>
> <h1 style='width:1000px; text-align: center; margin-bottom: 0'>A very
> simple Sankey Diagram</h1>
> <div style='width:1000px; text-align: center; margin-top: 0'>Move your
> mouse over the diagram to show values</div>
> <div id='sankey' style="width:1000px;height:1000px">
>
> </div>
>