[Seaside] Re: [ANN] Rickshaw.js charting library for Seaside
Sabine Knöfel
sabine.knoefel at gmail.com
Sun Sep 21 14:00:17 UTC 2014
Hi Paul and Esteban,
thank you. Yes, I already figured it out and I had another point to find
out for my dashboard:
How to create a bar graph with labels centered(!) below(!) the bars like
this:
http://goo.gl/zIQ4TY.
I created an example and if you want, you can add it to your examples.
code below.
Regards
Sabine
renderExampleBarGraph2On: html
| graph xAxis |
html div
class: 'chart';
id: html nextId.
graph := Rickshaw graph element: html lastId.
graph beBar.
graph
addSeriesNamed: 'Demo'
color: 'steelblue'
elements:
{(1 @ 49).
(2 @ 38).
(3 @ 30).
(4 @ 32).
(5 @ 22).
}.
graph optionAt: 'height' put: '250'.
graph optionAt: 'width' put: '300'.
html div
class: 'xaxis';
style: 'margin-left: 25px;';
id: html nextId.
xAxis := graph xAxis element: html lastId.
xAxis
optionAt: 'tickFormat'
put:
('switch (x) {case 1: return ''Jan'';case 2: return ''Feb'';case 3: return
''Mar'';case 4: return ''Apr'';case 5: return ''May''}'
asFunction: #('x')).
xAxis optionAt: 'orientation' put: 'bottom'.
xAxis optionAt: 'ticks' put: '5'.
html script: graph , xAxis
2014-09-18 22:18 GMT+02:00 Esteban A. Maringolo [via Smalltalk] <
ml-node+s1294792n4778835h80 at n4.nabble.com>:
> sh*t!
> I didn't see your last post Sabine. I'm sorry! :(
>
> Paul's suggestion should work fine.
>
>
> Regards!
>
>
> Esteban A. Maringolo
>
>
> 2014-09-18 1:34 GMT-03:00 Paul DeBruicker <[hidden email]
> <http://user/SendEmail.jtp?type=node&node=4778835&i=0>>:
>
> > Hi Sabine,
> >
> >
> >
> > This works:
> >
> >
> > xAxis
> > optionAt: 'tickFormat'
> > put:
> > ('switch (x) {case 1: return ''Sun'';case 2:
> return ''Mon'';case 3:
> > return ''Tue'';case 4: return ''Wed'';case 5: return ''Thu'';case 6:
> return
> > ''Fri'';case 7: return ''Sat'';}'
> > asFunction: #('x')).
> >
> >
> >
> >
> > Hope you've already figured it out.
> >
> >
> > Paul
> >
> >
> >
> >
> >
> >
> >
> > Sabine Knöfel wrote
> >> Hi Esteban,
> >>
> >> I just tried your wrapper for rickshaw and it is great. I am excited
> about
> >> it and I will use it for creating a dashboard for my application. Thank
> >> you for implementing this!
> >>
> >> There is one point, I did not succeed with:
> >> Putting labels/strings at the x axis instead of numbers.
> >> e.g. a bar graph with "Monday", "Tuesday" etc. in the x axis instead of
> >> 1,2,3
> >>
> >> This post describes exactly my problem:
> >>
> http://stackoverflow.com/questions/13266941/display-custom-labels-on-x-axis-with-rickshaw-js-library/14652472#14652472
> >>
> >> I extended one of your examples and tried to add the tickformat option.
> >> But this did not work. I have spent some time with other experiments to
> >> solve this but in the end I did not succeed.
> >>
> >> So, I ask you for help ;-)
> >>
> >> This ist my code which does not work, it displays the function code
> >> instead of "Mon", "Tue" etc..
> >>
> >> renderExampleStackedBarGraph3On: html
> >> | graph theAxis|
> >> html div
> >> class: 'chart';
> >> id: html nextId.
> >> graph := Rickshaw graph element: html lastId.
> >> graph beBar.
> >> graph
> >> addSeries:
> >> (RickshawSeries
> >> color: 'steelblue'
> >> elements:
> >> {(1 @ 40).
> >> (2@ 49).
> >> (3@ 38).
> >> (4 @ 30).
> >> (5 @ 32)});
> >> addSeriesNamed: 'With name'
> >> color: 'lightblue'
> >> elements:
> >> {(1 @ 40).
> >> (2@ 49).
> >> (3@ 38).
> >> (4 @ 30).
> >> (5 @ 32)}.
> >> theAxis := graph xAxis.
> >> theAxis optionAt: 'pixelsPerTick' put: '400'.
> >> theAxis optionAt: 'tickFormat' put: 'function(x) {switch (x)
> {case 1:
> >> return ''Mon'';case 2: return ''Tue'';case 3: return ''Wed'';case 4:
> >> return ''Thu'';case 5: return ''Fri'';case 6: return ''Sat'';case 7:
> >> return ''Sun'';}}'.
> >> html script: graph asJavascript , theAxis asJavascript
> >> #################
> >> the other example was
> >> e.g. http://code.shutterstock.com/rickshaw/examples/x_axis.html
> >> with:
> >> theTimeAxis optionAt: 'tickFormat' put: 'function(n) {var map = {0:
> >> ''zero'',1: ''first'',2: ''second'',3: ''third''};return map[n];}'.
> >>
> >> but this does not work either.
> >>
> >> regards
> >> Sabine
> >
> >
> >
> >
> >
> > --
> > View this message in context:
> http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4778714.html
> > Sent from the Seaside General mailing list archive at Nabble.com.
> > _______________________________________________
> > seaside mailing list
> > [hidden email] <http://user/SendEmail.jtp?type=node&node=4778835&i=1>
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> _______________________________________________
> seaside mailing list
> [hidden email] <http://user/SendEmail.jtp?type=node&node=4778835&i=2>
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
> ------------------------------
> If you reply to this email, your message will be added to the discussion
> below:
>
> http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4778835.html
> To start a new topic under Seaside General, email
> ml-node+s1294792n86180h75 at n4.nabble.com
> To unsubscribe from Seaside, click here
> <http://forum.world.st/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=1310907&code=c2FiaW5lLmtub2VmZWxAZ21haWwuY29tfDEzMTA5MDd8MTA0OTM5MTYx>
> .
> NAML
> <http://forum.world.st/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>
--
View this message in context: http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4779310.html
Sent from the Seaside General mailing list archive at Nabble.com.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20140921/a7905fec/attachment.htm
More information about the seaside
mailing list