<div dir="ltr">Hi Paul and Esteban, <div><br><div>thank you. Yes, I already figured it out and I had another point to find out for my dashboard:</div><div>How to create a bar graph with labels centered(!) below(!) the bars like this: </div><div><br></div><div><a href="http://goo.gl/zIQ4TY" target="_blank" rel="nofollow" link="external">http://goo.gl/zIQ4TY</a>.</div></div><div><br></div><div>I created an example and if you want, you can add it to your examples.</div><div>code below.</div><div><br></div><div>Regards</div><div>Sabine</div><div><br></div><div><div>renderExampleBarGraph2On: html</div><div><span class="" style="white-space:pre"> </span>| graph xAxis |</div><div><span class="" style="white-space:pre"> </span>html div</div><div><span class="" style="white-space:pre"> </span>class: 'chart';</div><div><span class="" style="white-space:pre"> </span>id: html nextId.</div><div><span class="" style="white-space:pre"> </span>graph := Rickshaw graph element: html lastId.</div><div><span class="" style="white-space:pre"> </span>graph beBar.</div><div><span class="" style="white-space:pre"> </span>graph</div><div><span class="" style="white-space:pre"> </span>addSeriesNamed: 'Demo'</div><div><span class="" style="white-space:pre"> </span>color: 'steelblue'</div><div><span class="" style="white-space:pre"> </span>elements:</div><div><span class="" style="white-space:pre"> </span>{(1 @ 49).</div><div><span class="" style="white-space:pre"> </span>(2 @ 38).</div><div><span class="" style="white-space:pre"> </span>(3 @ 30).</div><div><span class="" style="white-space:pre"> </span>(4 @ 32).</div><div><span class="" style="white-space:pre"> </span>(5 @ 22).</div><div><span class="" style="white-space:pre"> </span> </div><div><span class="" style="white-space:pre"> </span> }.</div><div><span class="" style="white-space:pre"> </span>graph optionAt: 'height' put: '250'.</div><div><span class="" style="white-space:pre"> </span>graph optionAt: 'width' put: '300'.</div><div><span class="" style="white-space:pre"> </span>html div</div><div><span class="" style="white-space:pre"> </span>class: 'xaxis';</div><div><span class="" style="white-space:pre"> </span>style: 'margin-left: 25px;';</div><div><span class="" style="white-space:pre"> </span>id: html nextId.</div><div><span class="" style="white-space:pre"> </span>xAxis := graph xAxis element: html lastId.</div><div><span class="" style="white-space:pre"> </span>xAxis</div><div><span class="" style="white-space:pre"> </span>optionAt: 'tickFormat'</div><div><span class="" style="white-space:pre"> </span>put:</div><div><span class="" style="white-space:pre"> </span>('switch (x) {case 1: return ''Jan'';case 2: return ''Feb'';case 3: return ''Mar'';case 4: return ''Apr'';case 5: return ''May''}'</div><div><span class="" style="white-space:pre"> </span>asFunction: #('x')).</div><div><span class="" style="white-space:pre"> </span>xAxis optionAt: 'orientation' put: 'bottom'.</div><div><span class="" style="white-space:pre"> </span>xAxis optionAt: 'ticks' put: '5'.</div><div><span class="" style="white-space:pre"> </span>html script: graph , xAxis</div></div></div><div class="gmail_extra"><br><div class="gmail_quote">2014-09-18 22:18 GMT+02:00 Esteban A. Maringolo [via Smalltalk] <span dir="ltr"><<a href="/user/SendEmail.jtp?type=node&node=4779310&i=0" target="_top" rel="nofollow" link="external">[hidden email]</a>></span>:<br><blockquote style='border-left:2px solid #CCCCCC;padding:0 1em' class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><span class="">
sh*t!
<br>I didn't see your last post Sabine. I'm sorry! :(
<br><br>Paul's suggestion should work fine.
<br><br><br>Regards!
<br><br><br>Esteban A. Maringolo
<br><br><br></span>2014-09-18 1:34 GMT-03:00 Paul DeBruicker <<a href="http://user/SendEmail.jtp?type=node&node=4778835&i=0" rel="nofollow" link="external" target="_blank">[hidden email]</a>>:
<div><div><div class="h5"><div class='shrinkable-quote'><br>> Hi Sabine,
<br>>
<br>>
<br>>
<br>> This works:
<br>>
<br>>
<br>> xAxis
<br>> optionAt: 'tickFormat'
<br>> put:
<br>> ('switch (x) {case 1: return ''Sun'';case 2: return ''Mon'';case 3:
<br>> return ''Tue'';case 4: return ''Wed'';case 5: return ''Thu'';case 6: return
<br>> ''Fri'';case 7: return ''Sat'';}'
<br>> asFunction: #('x')).
<br>>
<br>>
<br>>
<br>>
<br>> Hope you've already figured it out.
<br>>
<br>>
<br>> Paul
<br>>
<br>>
<br>>
<br>>
<br>>
<br>>
<br>>
<br>> Sabine Knöfel wrote
<br>>> Hi Esteban,
<br>>>
<br>>> I just tried your wrapper for rickshaw and it is great. I am excited about
<br>>> it and I will use it for creating a dashboard for my application. Thank
<br>>> you for implementing this!
<br>>>
<br>>> There is one point, I did not succeed with:
<br>>> Putting labels/strings at the x axis instead of numbers.
<br>>> e.g. a bar graph with "Monday", "Tuesday" etc. in the x axis instead of
<br>>> 1,2,3
<br>>>
<br>>> This post describes exactly my problem:
<br>>> <a href="http://stackoverflow.com/questions/13266941/display-custom-labels-on-x-axis-with-rickshaw-js-library/14652472#14652472" rel="nofollow" link="external" target="_blank">http://stackoverflow.com/questions/13266941/display-custom-labels-on-x-axis-with-rickshaw-js-library/14652472#14652472</a><br>>>
<br>>> I extended one of your examples and tried to add the tickformat option.
<br>>> But this did not work. I have spent some time with other experiments to
<br>>> solve this but in the end I did not succeed.
<br>>>
<br>>> So, I ask you for help ;-)
<br>>>
<br>>> This ist my code which does not work, it displays the function code
<br>>> instead of "Mon", "Tue" etc..
<br>>>
<br>>> renderExampleStackedBarGraph3On: html
<br>>> | graph theAxis|
<br>>> html div
<br>>> class: 'chart';
<br>>> id: html nextId.
<br>>> graph := Rickshaw graph element: html lastId.
<br>>> graph beBar.
<br>>> graph
<br>>> addSeries:
<br>>> (RickshawSeries
<br>>> color: 'steelblue'
<br>>> elements:
<br>>> {(1 @ 40).
<br>>> (2@ 49).
<br>>> (3@ 38).
<br>>> (4 @ 30).
<br>>> (5 @ 32)});
<br>>> addSeriesNamed: 'With name'
<br>>> color: 'lightblue'
<br>>> elements:
<br>>> {(1 @ 40).
<br>>> (2@ 49).
<br>>> (3@ 38).
<br>>> (4 @ 30).
<br>>> (5 @ 32)}.
<br>>> theAxis := graph xAxis.
<br>>> theAxis optionAt: 'pixelsPerTick' put: '400'.
<br>>> theAxis optionAt: 'tickFormat' put: 'function(x) {switch (x) {case 1:
<br>>> return ''Mon'';case 2: return ''Tue'';case 3: return ''Wed'';case 4:
<br>>> return ''Thu'';case 5: return ''Fri'';case 6: return ''Sat'';case 7:
<br>>> return ''Sun'';}}'.
<br>>> html script: graph asJavascript , theAxis asJavascript
<br>>> #################
<br>>> the other example was
<br>>> e.g. <a href="http://code.shutterstock.com/rickshaw/examples/x_axis.html" rel="nofollow" link="external" target="_blank">http://code.shutterstock.com/rickshaw/examples/x_axis.html</a><br>>> with:
<br>>> theTimeAxis optionAt: 'tickFormat' put: 'function(n) {var map = {0:
<br>>> ''zero'',1: ''first'',2: ''second'',3: ''third''};return map[n];}'.
<br>>>
<br>>> but this does not work either.
<br>>>
<br>>> regards
<br>>> Sabine
<br>>
<br>>
<br>>
<br>>
<br>>
<br>> --
<br>> View this message in context: <a href="http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4778714.html" rel="nofollow" link="external" target="_blank">http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4778714.html</a><br>> Sent from the Seaside General mailing list archive at Nabble.com.
<br>> _______________________________________________
<br>> seaside mailing list
</div></div></div>> <a href="http://user/SendEmail.jtp?type=node&node=4778835&i=1" rel="nofollow" link="external" target="_blank">[hidden email]</a>
<br>> <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" rel="nofollow" link="external" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a></div>_______________________________________________
<br>seaside mailing list
<br><a href="http://user/SendEmail.jtp?type=node&node=4778835&i=2" rel="nofollow" link="external" target="_blank">[hidden email]</a>
<br><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" rel="nofollow" link="external" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
<br>
<br>
<hr noshade size="1" color="#cccccc">
<div style="color:#444;font:12px tahoma,geneva,helvetica,arial,sans-serif">
<div style="font-weight:bold">If you reply to this email, your message will be added to the discussion below:</div>
<a href="http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4778835.html" target="_blank" rel="nofollow" link="external">http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4778835.html</a>
</div>
<div style="color:#666;font:11px tahoma,geneva,helvetica,arial,sans-serif;margin-top:.4em;line-height:1.5em">
To start a new topic under Seaside General, email <a href="/user/SendEmail.jtp?type=node&node=4779310&i=1" target="_top" rel="nofollow" link="external">[hidden email]</a> <br>
To unsubscribe from Seaside, <a href="" target="_blank" rel="nofollow" link="external">click here</a>.<br>
<a href="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" rel="nofollow" style="font:9px serif" target="_blank" link="external">NAML</a>
</div></blockquote></div><br></div>
<br/><hr align="left" width="300" />
View this message in context: <a href="http://forum.world.st/ANN-Rickshaw-js-charting-library-for-Seaside-tp4749681p4779310.html">Re: [ANN] Rickshaw.js charting library for Seaside</a><br/>
Sent from the <a href="http://forum.world.st/Seaside-General-f86180.html">Seaside General mailing list archive</a> at Nabble.com.<br/>