[web2py] Re: how to embed a d3.js script in a view correctly?
Hello, I am new here and tried to get something working. It took some time
until i realitzed its working but only in default/index.html (not in
default/visualisations.html). Most realistic within the next days I will
learn why. No need to reply. But I wanted to return the full code where I
was successful the 1st time with D3. Now I can go ahead in an iterative
way. Regards, Klaus
---
{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
{{extend 'layout.html'}}
d3.select('#mychart').append('svg').append('circle').style("stroke",
"gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
-
Am Samstag, 5. April 2014 21:11:01 UTC+2 schrieb Martina Gruber:
>
> Hi Sihui,
>
> Just add a div with an id after extend layout and then select this id from
> d3.
> If you select "body" and append a circle it will go at the bottom of the
> page.
>
> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
>> {{extend 'layout.html'}}
>>
>>
>>
>>
>> d3.select('#mychart').append('svg').append('circle').style("stroke",
>> "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
>>
>>
>>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/web2py/3047cbc9-2acc-486b-b71a-8893a1e5ee33%40googlegroups.com.
Re: [web2py] Re: how to embed a d3.js script in a view correctly?
*To the first part of your question:*
>From Alain Etkin previous post ...
Try changing your code
to something like
> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
> {{extend 'layout.html'}}
or from your controller:
(model code)
if request.controller in ("d3", "plot"):
response.files.append(...)
(controller code)
if not request.function in ["about", "index", "contact"]:
response.files.append(...)
There is detailed information on static files and the layout in the book
http://www.web2py.com/books/default/chapter/29/05#Page-layout
*To the second part of your question:*
*you have your html directive*
:
> Maybe a dumb question, but how can i use the d3js directives? I put all
> the dependencies in my static folder and wrote in my html file:
>
>
>
>
>
>
>
>
> data="exampleData"
>
> id="exampleId"
> xAxisTickFormat="xAxisTickFormatFunction()"
>
> yAxisTickFormat="yAxisTickFormatFunction()"
> width="550"
>
> height="350"
> showXAxis="true"
>
> showYAxis="true">
>
>
>
>
>
>
> just as in the link you provided. But the next two lines i dont really get:
>
> In the Angular App, include nvd3ChartDirectives as a dependency.
>
> var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
>
> Create an Angular.js Controller, and assign json data to a scope variable.
>
> and what do i have to write in my Controller file?
>
> Thanks for any help :)
>
> Am Montag, 7. April 2014 13:11:42 UTC+2 schrieb Ramos:
>>
>> After all the pain learning d3 and angular i discovered d3js directives
>> for angular.
>>
>> using them inside web2py is easy
>>
>> check one of them here about the line chart
>> http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html
>>
>>
>> 2014-04-05 20:11 GMT+01:00 Martina Gruber :
>>
>>> Hi Sihui,
>>>
>>> Just add a div with an id after extend layout and then select this id
>>> from d3.
>>> If you select "body" and append a circle it will go at the bottom of the
>>> page.
>>>
>>> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
{{extend 'layout.html'}}
d3.select('#mychart').append('svg').append('circle').style("stroke",
"gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
--
>>> Resources:
>>> - http://web2py.com
>>> - http://web2py.com/book (Documentation)
>>> - http://github.com/web2py/web2py (Source code)
>>> - https://code.google.com/p/web2py/issues/list (Report Issues)
>>> ---
>>> You received this message because you are subscribed to the Google
>>> Groups "web2py-users" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to web2py+un...@googlegroups.com.
>>>
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>> --
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to web2py+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [web2py] Re: how to embed a d3.js script in a view correctly?
Maybe a dumb question, but how can i use the d3js directives? I put all the
dependencies in my static folder and wrote in my html file:
just as in the link you provided. But the next two lines i dont really get:
In the Angular App, include nvd3ChartDirectives as a dependency.
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
Create an Angular.js Controller, and assign json data to a scope variable.
and what do i have to write in my Controller file?
Thanks for any help :)
Am Montag, 7. April 2014 13:11:42 UTC+2 schrieb Ramos:
>
> After all the pain learning d3 and angular i discovered d3js directives
> for angular.
>
> using them inside web2py is easy
>
> check one of them here about the line chart
> http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html
>
>
> 2014-04-05 20:11 GMT+01:00 Martina Gruber
> >:
>
>> Hi Sihui,
>>
>> Just add a div with an id after extend layout and then select this id
>> from d3.
>> If you select "body" and append a circle it will go at the bottom of the
>> page.
>>
>> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
>>> {{extend 'layout.html'}}
>>>
>>>
>>>
>>>
>>> d3.select('#mychart').append('svg').append('circle').style("stroke",
>>> "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
>>>
>>>
>>> --
>> Resources:
>> - http://web2py.com
>> - http://web2py.com/book (Documentation)
>> - http://github.com/web2py/web2py (Source code)
>> - https://code.google.com/p/web2py/issues/list (Report Issues)
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "web2py-users" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to web2py+un...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [web2py] Re: how to embed a d3.js script in a view correctly?
After all the pain learning d3 and angular i discovered d3js directives for
angular.
using them inside web2py is easy
check one of them here about the line chart
http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html
2014-04-05 20:11 GMT+01:00 Martina Gruber :
> Hi Sihui,
>
> Just add a div with an id after extend layout and then select this id from
> d3.
> If you select "body" and append a circle it will go at the bottom of the
> page.
>
> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
>> {{extend 'layout.html'}}
>>
>>
>>
>>
>> d3.select('#mychart').append('svg').append('circle').style("stroke",
>> "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
>>
>>
>> --
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to web2py+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: how to embed a d3.js script in a view correctly?
Hi Sihui,
Just add a div with an id after extend layout and then select this id from
d3.
If you select "body" and append a circle it will go at the bottom of the
page.
{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
> {{extend 'layout.html'}}
>
>
>
>
> d3.select('#mychart').append('svg').append('circle').style("stroke",
> "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
>
>
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: how to embed a d3.js script in a view correctly?
Hi Martina,
Thanks for posting this! It's very helpful!
I'm also trying to use d3 in web2py.
I follow your example, it works!
But I don't know how to make to circle appear above the copyright 2013
-- powered by web2py line.
Here's the html file:
{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
{{extend 'layout.html'}}
Here we would like to have some d3.js plots
d3.select('body').append('svg').append('circle').style("stroke",
"gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
What should I add?
Thanks!!
On Tuesday, January 15, 2013 2:33:48 AM UTC-6, Martina Gruber wrote:
>
> Alan and Ramos, thnk you for the answers.
> Based on your recommendations I did the following:
> 1. Created a new app with the wizard (default layout, name: TestD3).
> Views: index,error and visualizations where I want to have the d3 stuff.
> 2. Put the d3 javascript file in static/js
> 3. In View TestD3/views/default/visualizations.html:
>
> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
>{{extend 'layout.html'}}
>
>Here we would like to have some d3.js plots
>
>
> d3.select('body').append('svg').append('circle').style("stroke",
> "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
>
>
> This produced a red circle but the circle below the copyright 2013--
> powered by web2py line.
> Of course I have to select properly because I want to have the circle
> inside:
>
>
>
>
> I ll take some time to dive into web2py and then I will post whatever
> worked with d3.
>
>
>
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: how to embed a d3.js script in a view correctly?
Alan and Ramos, thnk you for the answers.
Based on your recommendations I did the following:
1. Created a new app with the wizard (default layout, name: TestD3). Views:
index,error and visualizations where I want to have the d3 stuff.
2. Put the d3 javascript file in static/js
3. In View TestD3/views/default/visualizations.html:
{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
{{extend 'layout.html'}}
Here we would like to have some d3.js plots
d3.select('body').append('svg').append('circle').style("stroke",
"gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
This produced a red circle but the circle below the copyright 2013--
powered by web2py line.
Of course I have to select properly because I want to have the circle
inside:
I ll take some time to dive into web2py and then I will post whatever
worked with d3.
--
Re: [web2py] Re: how to embed a d3.js script in a view correctly?
>
> {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
>
{{extend 'layout.html'}}
>
That way, the script is only added for the current action (the function
requested by the client), saving client resources
Another way would be adding them conditionally per-controller/function
(model code)
if request.controller in ("d3", "plot"):
response.files.append(...)
(controller code)
if not request.function in ["about", "index", "contact"]:
response.files.append(...)
There is detailed information on static files and the layout in the book
http://www.web2py.com/books/default/chapter/29/05#Page-layout
--
Re: [web2py] Re: how to embed a d3.js script in a view correctly?
Try this,
{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
{{extend 'layout.html'}}
The in the web console try
d3.select('body').append('svg').append('circle').style("stroke",
"gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);
I´m into D3.js too!
2013/1/12 Alan Etkin
> Hi, I am new to web2py and I would like to embed a running (tested with
>> flask)
>> javascript based on d3.js in a web2py view.
>>
>
> If the script can go in the body of the document, you can do this in a
> view:
>
> {{=SCRIPT(_type="text/javascript", _src=URL(c="static", f="js/ script's name>"))}}
>
> Where is stored in the scaffolding app's static/js
> folder
>
> If not, then you can add it to the head by appending the URL(...) to the
> response.files global object in the model
>
> response.files.append(URL(...))
>
> --
>
>
>
>
--
[web2py] Re: how to embed a d3.js script in a view correctly?
>
> Hi, I am new to web2py and I would like to embed a running (tested with
> flask)
> javascript based on d3.js in a web2py view.
>
If the script can go in the body of the document, you can do this in a view:
{{=SCRIPT(_type="text/javascript", _src=URL(c="static", f="js/"))}}
Where is stored in the scaffolding app's static/js
folder
If not, then you can add it to the head by appending the URL(...) to the
response.files global object in the model
response.files.append(URL(...))
--
