{"id":300,"date":"2009-05-05T21:20:00","date_gmt":"2009-05-05T21:20:00","guid":{"rendered":"http:\/\/www.tutego.de\/blog\/javainsel\/?p=300"},"modified":"2009-05-05T21:20:00","modified_gmt":"2009-05-05T21:20:00","slug":"gwt-charting-bibliothek-gflot-und-charts4j","status":"publish","type":"post","link":"https:\/\/www.tutego.de\/blog\/javainsel\/2009\/05\/gwt-charting-bibliothek-gflot-und-charts4j\/","title":{"rendered":"GWT Charting Bibliothek gflot und charts4j."},"content":{"rendered":"<p>Alles f\u00e4ngt mit <a title=\"http:\/\/jquery.com\/\" href=\"http:\/\/jquery.com\/\">http:\/\/jquery.com\/<\/a> an. Darauf baut auf <a title=\"http:\/\/code.google.com\/p\/flot\/\" href=\"http:\/\/code.google.com\/p\/flot\/\">http:\/\/code.google.com\/p\/flot\/<\/a>, eine JavaScript-Bib. f\u00fcr Chars:<\/p>\n<ul>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/basic.html\">Basic example<\/a> <\/li>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/graph-types.html\">Different graph types<\/a> and <a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/setting-options.html\">setting various options<\/a> <\/li>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/turning-series.html\">Turning series on\/off<\/a> <\/li>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/selection.html\">Selection support and zooming<\/a> and <a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/zooming.html\">zooming with overview<\/a> <\/li>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/time.html\">Plotting time series<\/a> and <a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/visitors.html\">visitors per day with zooming and weekends<\/a> <\/li>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/dual-axis.html\">Dual axis support<\/a> <\/li>\n<li><a href=\"http:\/\/people.iola.dk\/olau\/flot\/examples\/interacting.html\">Interacting with the data<\/a> <\/li>\n<\/ul>\n<p><a title=\"http:\/\/code.google.com\/p\/gflot\/\" href=\"http:\/\/code.google.com\/p\/gflot\/\">http:\/\/code.google.com\/p\/gflot\/<\/a> ist nun der GWT-Aufsatz auf flot.<\/p>\n<p><a href=\"http:\/\/www.scs.carleton.ca\/~adlbatti\/gflot-demo\/GFlotDemo.html\"><img decoding=\"async\" src=\"http:\/\/gflot.googlecode.com\/svn\/site\/demo_icon.png\" \/><\/a><\/p>\n<\/p>\n<p>F\u00fcr eine Bar-Diagramm ist nur folgender Quellcode n\u00f6tig:<\/p>\n<p><\/p>\n<pre class=\"prettyprint\">final String[] MONTH_NAMES = { &quot;jan&quot;, &quot;feb&quot;, &quot;mar&quot;, &quot;apr&quot;, &quot;may&quot;, &quot;jun&quot;, &quot;jul&quot;, &quot;aug&quot;, &quot;sep&quot;, &quot;oct&quot;, &quot;nov&quot;, &quot;dec&quot; };<br \/><br \/>PlotModel model = new PlotModel();<br \/>PlotOptions plotOptions = new PlotOptions();<br \/><br \/>BarSeriesOptions barSeriesOptions = new BarSeriesOptions();<br \/>barSeriesOptions.setShow(true);<br \/>barSeriesOptions.setLineWidth(1);<br \/>barSeriesOptions.setBarWidth(1);<br \/>barSeriesOptions.setAlignment(BarAlignment.CENTER);<br \/><br \/>plotOptions.setDefaultBarsSeriesOptions(barSeriesOptions);<br \/>plotOptions.setLegendOptions(new LegendOptions().setShow(false));<br \/><br \/><br \/><br \/>\/\/ add tick formatter to the options<br \/><br \/>plotOptions.setXAxisOptions(new AxisOptions().setTicks(12).setTickFormatter(new TickFormatter() {<br \/><br \/> public String formatTickValue(double tickValue, Axis axis) {<br \/><br \/>   if (tickValue &gt; 0 &amp;&amp; tickValue &lt;= 12) {<br \/><br \/>     return MONTH_NAMES[(int) (tickValue - 1)];<br \/><br \/>    }<br \/><br \/>    return &quot;&quot;;<br \/><br \/>  }<br \/><br \/>}));<br \/><br \/><br \/>\/\/ create a series<br \/><br \/>SeriesHandler handler = model.addSeries(&quot;Ottawa&#39;s Month Temperatures (Daily Average in &amp;deg;C)&quot;, &quot;blue&quot;);<br \/><br \/><br \/>\/\/ add data<br \/><br \/>handler.add(new DataPoint(1, -10.5));<br \/><br \/>handler.add(new DataPoint(2, -8.6));<br \/>handler.add(new DataPoint(3, -2.4));<br \/>handler.add(new DataPoint(4, 6));<br \/>handler.add(new DataPoint(5, 13.6));<br \/>handler.add(new DataPoint(6, 18.4));<br \/>handler.add(new DataPoint(7, 21));<br \/>handler.add(new DataPoint(8, 19.7));<br \/>handler.add(new DataPoint(9, 14.7));<br \/>handler.add(new DataPoint(10, 8.2));<br \/>handler.add(new DataPoint(11, 1.5));<br \/>handler.add(new DataPoint(12, -6.6));<br \/><br \/>\/\/ create the plot<br \/>SimplePlot plot = new SimplePlot(model, plotOptions);<br \/><br \/>\/\/ put it on a panel<br \/>FlowPanel panel = new FlowPanel();<br \/>panel.add(plot);<br \/><br \/>return panel;<\/pre>\n<p>Eine Alternative dazu ist <a href=\"http:\/\/code.google.com\/p\/charts4j\/\">http:\/\/code.google.com\/p\/charts4j\/<\/a>&nbsp; bzw. <a href=\"http:\/\/code.google.com\/p\/charts4j\/wiki\/GWT_Port\">http:\/\/code.google.com\/p\/charts4j\/wiki\/GWT_Port<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alles f\u00e4ngt mit http:\/\/jquery.com\/ an. Darauf baut auf http:\/\/code.google.com\/p\/flot\/, eine JavaScript-Bib. f\u00fcr Chars: Basic example Different graph types and setting various options Turning series on\/off Selection support and zooming and zooming with overview Plotting time series and visitors per day with zooming and weekends Dual axis support Interacting with the data http:\/\/code.google.com\/p\/gflot\/ ist nun der [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[16,4,15],"tags":[],"class_list":["post-300","post","type-post","status-publish","format-standard","hentry","category-gwt","category-open-source","category-web-frameworks"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":0,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}