moberwasserlechner / vaadin-chartjs Goto Github PK

View Code? Open in Web Editor NEW

56.0 56.0 36.0 4.9 MB

Vaadin 8 wrapper for ChartJS v2.x library

License: MIT License

Java 62.56% JavaScript 37.34% CSS 0.10%

chart chartjs vaadin vaadin-addon vaadin-chartjs vaadin8

vaadin-chartjs's People

Contributors

Stargazers

Watchers

vaadin-chartjs's Issues

Download Behavior

Hi, nice add-on!

I observed some stranger behavior on "download as PNG" feature:

http://vaadin-demos.qqjtxeeuih.eu-central-1.elasticbeanstalk.com:5600/#!pie-chart-download

On Chrome I don't need to make nothing (press the download button), only use second mouse button and use "Save image" option.

On Safari (MacOS 10.12.1) I couldn't download, and demo notifications never disappears.

What is the correct behavior for this example?

Element configuration

http://www.chartjs.org/docs/#chart-configuration-element-configuration

  window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    // Elements options apply to all of the options unless overridden in a dataset
                    // In this case, we are setting the border of each bar to be 2px wide and green
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                            borderColor: 'rgb(0, 255, 0)',
                            borderSkipped: 'bottom'
                        }
                    },
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart'
                    }
                }
            });

        };

Support Axis formating/customization

Include on Ticks config the userCallback property:

http://stackoverflow.com/questions/36918887/chart-js-2-0-formatting-y-axis-with-currency-and-thousands-separator

Example:

https://jsfiddle.net/4sLxyfya/7/

Legend configuration

http://www.chartjs.org/docs/#chart-configuration-legend-configuration

Chart image download

A user wants to download the current chart by clicking a button (vaadin button).

It looks like I have to call a js function on the connector using com.vaadin.ui.AbstractJavaScriptComponent.callFunction(String, Object...) and then call the server with a function registered by com.vaadin.ui.AbstractJavaScriptComponent.addFunction(String, JavaScriptFunction)

I havenot found a method, which can retrieve the return value of a javascript function.

Resources:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
https://github.com/chartjs/Chart.js/search?utf8=%E2%9C%93&q=toBase64Image

    this.getImageDataUrl= function() {
         // call on function registered by server side component
         self.sendImageDataUrl(chartjs.toBase64Image());
    }

Demo server does not work anymore

I think Vaadin and Jelastic ended their cooperation for addon devs because there isn't anything on this cooperation on Vaadin's website anymore.

Chart size problem

When set the chart size using setSizeFull(), i expect to see the chart sized correctly, but instead it overflows and some part is not seen on the screen.

Multiple series in one chart

How to build a chart with mixed multiple series? Example bar+line chart is here
https://jsfiddle.net/carnecro/0xzgmkav/.

Resolve configuration to json in attach()

If I construct the ChartJs component on init of the view using @PostConstruct (Vaadin Spring). I'm not able to add Datasets when the actual data is availiable.

Therefore the configuration will be resolve in the components attach() method.

Furthermore I added a default constructor for ChartJs and configure method to set the ChartConfig implementation.

Support radar chart

http://www.chartjs.org/docs/#radar-chart
http://www.chartjs.org/docs/#scales-radial-linear-scale

Missing Fontawesome Icons in Live Demo

The icons are missing at http://moberwasserlechner.jelastic.servint.net/vaadin-chartjs/

Maybe its vaadin 7.7.0

Stretched chart after refreshData()

When I trigger refreshData() chart is is stretched.
Browser refresh, browser resize ... all is perfect.

What am I dooing wrong?

Vaadin 7.7.9
vaadin-chartjs 0.4.0

A bit of source code

   private void buildChart() {
           
      configChart = new LineChartConfig();
      
      configChart.data()
              .addDataset(new LineDataset().label("qwerty").backgroundColor("rgba(151,187,145,0.5)"))
              .and()
              .options()
              .responsive(true)
              .title()
              .display(true)
              .and()
              .tooltips()
              .and()
              .scales()
              .add(Axis.X, new DefaultScale()
                      .stacked(true))
              .add(Axis.Y, new DefaultScale()
                      .stacked(true))
              .and()
              .done();

      
      
      Dataset<?, ?> ds = configChart.data().getDatasetAtIndex(0);
      chartLineDataSet = (LineDataset) ds;
      
      
      chart = new ChartJs(configChart);
      chart.setJsLoggingEnabled(true);
      chart.setSizeFull();
   }

   private void chartDataRefresh(Long offset) {
      dataSNR = crDrI122Repo.getAllSnrs();
      
      dataTaskDateString = Util.dateArrayToStringarray(crDrI122Repo.getAllTaskDates());
      configChart.data().labels(dataTaskDateString);

      chartLineDataSet.dataAsList(Util.floatListToDoubleList(dataSNR));
      
      chart.configure(configChart);
      chart.refreshData();
      
   }

after reload

ps. vaadin chart js = great job

Prepare Release 1.0.0

Global options

Nearly every configuration in Chartjs can be set globally and is therefore assigned to every chart on the page.

See http://www.chartjs.org/docs/#chart-configuration-global-configuration as starting point.

Question about ChartUtils

Hello, First of all a BIG thank you for the add-on. It is Great.

I have one question, where I can find the "ChartUtils", where are included. I can import all the libraries
except this one.

Thanks again
Elias

[FEATURE] Add support to fill between datasets

Chart.js 2.6 added the possibility to fill between data in a more advanced way.

see chartjs/Chart.js#4008

Support smith chart plugin

[FEATURE]: Add zeroLineBorderDash options to Gridline

see chartjs/Chart.js#4019

Refactor FillMode to represent Chartjs

Not deprecated but replaced because 1.0.0 already has breaking changes.

chartjs/Chart.js#4008

Use Vaadin Chartjs on a HA environment

HI,

When trying to deploy an application on a HA environment, Vaadin-Chartjs configuration objects complain about non-serializable objects.

Caused by: org.springframework.core.serializer.support.SerializationFailedException: Failed to serialize object using DefaultSerializer; nested exception is java.io.NotSerializableException: com.byteowls.vaadin.chartjs.config.BarChartConfig
	at org.springframework.core.serializer.support.SerializingConverter.convert(SerializingConverter.java:68) ~[spring-core-4.3.6.RELEASE.jar:4.3.6.RELEASE]
	at org.springframework.core.serializer.support.SerializingConverter.convert(SerializingConverter.java:35) ~[spring-core-4.3.6.RELEASE.jar:4.3.6.RELEASE]
	at org.springframework.data.redis.serializer.JdkSerializationRedisSerializer.serialize(JdkSerializationRedisSerializer.java:90) ~[spring-data-redis-1.7.7.RELEASE.jar:na]
	... 38 common frames omitted
Caused by: java.io.NotSerializableException: com.byteowls.vaadin.chartjs.config.BarChartConfig
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1184) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.defaultWriteFields(ObjectOutputStream.java:1548) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeSerialData(ObjectOutputStream.java:1509) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeOrdinaryObject(ObjectOutputStream.java:1432) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1178) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeObject(ObjectOutputStream.java:348) ~[na:1.8.0_121]
	at java.util.HashMap.internalWriteEntries(HashMap.java:1784) ~[na:1.8.0_121]
	at java.util.HashMap.writeObject(HashMap.java:1362) ~[na:1.8.0_121]
	at sun.reflect.GeneratedMethodAccessor123.invoke(Unknown Source) ~[na:na]
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_121]
	at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_121]
	at java.io.ObjectStreamClass.invokeWriteObject(ObjectStreamClass.java:1028) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeSerialData(ObjectOutputStream.java:1496) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeOrdinaryObject(ObjectOutputStream.java:1432) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1178) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.defaultWriteFields(ObjectOutputStream.java:1548) ~[na:1.8.0_121]
	at java.io.ObjectOutputStream.writeSerialData(ObjectOutputStream.java:1509) ~[na:1.8.0_121]

Is the system prepared for view serialization ?

Create base vaadin addon structure

This includes

Gradle Wrapper setup
Gradle multi project with addon and demo
Demo basics (Servlet and UI Class)

Support Time Scale

http://www.chartjs.org/docs/#scales-time-scale

Different labels on the X-axis (scaleLabel) and in the tooltip (tooltipLabel)

Hi,

Is there currently a way to do this kind of customization, directly or using an override? I need to display dates without hours in the scale but the full label in the tooltip.

See the jsfiddle below, someone did something similar in javascript, but I don't think that your wrapper implements tooltipTemplate yet.

https://jsfiddle.net/7z1s1feg/

Thanks in advance.

Include Link to Github in every Demo example

Because the demo example code only shows a part of the class a Link should bring the user to the full class on Github.

Support Scatter Line Charts

Configuring this variant of a line chart is not supported in the initial release.

http://www.chartjs.org/docs/#line-chart-scatter-line-charts

Add dataset getter methods

Upgrade to Chart.js 2.4

https://github.com/chartjs/Chart.js/releases/tag/v2.4.0

TODO

Upgrade the lib
Add new features

Generate background colors based on a given color

Use a algorithm like the ones described in http://devmag.org.za/2012/07/29/how-to-choose-colours-procedurally-algorithms/

Spring Boot Demo

Base the demo on spring boot because its easier to debug and develop.

Support custom JSON properties

Some plugins, like this:

http://jsfiddle.net/s9tu1c9y/55/

,needs to work with custom structures/properties.

This is a enhancement request.

Check Vaadin 8 compatibility

Support polar area chart

http://www.chartjs.org/docs/#polar-area-chart
http://www.chartjs.org/docs/#scales-radial-linear-scale

Upgrade to ChartsJs 2.2.1

Implement features according to release notes or changelog.

Update data after component already initialised

http://stackoverflow.com/questions/21137768/passing-a-object-from-server-to-client-with-vaadin
https://vaadin.com/wiki/-/wiki/Main/Integrating%20a%20JavaScript%20library%20as%20an%20extension

Upgrade to ChartsJs 2.2.2

Make Java 8 minimum java version

Since Java 7 is not getting any public updates for nearly 1,5 years, I think its save to base addons on Java 8

Check how to show data values on chart

Hello!, sorry for ask this on the issue section, but I don't know where to ask you a question.

Is there a way of how to show the data values ON the chart? for example:

This can be archived with javascript but I don't know how to do it on vaadin.

image taken from this link: http://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js/31632707

Remove fill option from BarDataset and PieDataset

Option was never supported and has no effect on the chart.

com.byteowls.vaadin.chartjs.data.BarDataset
com.byteowls.vaadin.chartjs.data.PieDataset

"Maximum call stack size exceeded" when ?debug console is enabled

ChartJsWidgetset-0.js:21863 Sun Jul 31 20:54:08 GMT+200 2016 com.vaadin.client.ApplicationConfiguration
SEVERE: (RangeError) : Maximum call stack size exceededcom.google.gwt.core.client.JavaScriptException: (RangeError) : Maximum call stack size exceeded
    at Unknown.emptyMethod(ChartJsWidgetset-0.js)
    at Unknown.hasTypeMarker(ChartJsWidgetset-0.js)
    at Unknown.hasJavaObjectVirtualDispatch(ChartJsWidgetset-0.js)
    at Unknown.$init__V__devirtual$(ChartJsWidgetset-0.js)
    at Unknown.Object_0(ChartJsWidgetset-0.js)
    at Unknown.AbstractMap(ChartJsWidgetset-0.js)
    at Unknown.AbstractHashMap(ChartJsWidgetset-0.js)
    at Unknown.HashMap(ChartJsWidgetset-0.js)
    at Unknown.$init_257(ChartJsWidgetset-0.js)
    at Unknown.SimpleEventBus_0(ChartJsWidgetset-0.js)
    at Unknown.HandlerManager$Bus(ChartJsWidgetset-0.js)
    at Unknown.HandlerManager_0(ChartJsWidgetset-0.js)
    at Unknown.HandlerManager(ChartJsWidgetset-0.js)
    at Unknown.createHandlerManager(ChartJsWidgetset-0.js)
    at Unknown.ensureHandlers(ChartJsWidgetset-0.js)
    at Unknown.addDomHandler(ChartJsWidgetset-0.js)
    at Unknown.SimpleTree(ChartJsWidgetset-0.js)
    at Unknown.SimpleTree_0(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_1(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_1(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_1(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_1(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_1(ChartJsWidgetset-0.js)
    at Unknown.dir_3(ChartJsWidgetset-0.js)
    at Unknown.dir_2(ChartJsWidgetset-0.js)

Extract data labels from actual dataset

If I want to show the status feedback of a transactional email service like Amazon's SES in a chart I could either create a separate chart data structure, run through the list of feedback objects and extract the labels from there or integrate some helpers to the addon:

Advise the addon to extract labels from the first dataset:

    DonutChartConfig config = new DonutChartConfig();
    config.data()
       .extractLabelsFromDataset(true)
       .addDataset(dataset);

We create a donut chart config and adivse the chart to extractLabelsFromDataset(true) as soon as the datasets are send to the client side.

Dynamically create a dataset labels

    PieDataset dataset = new PieDataset();
   // dataset.randomBackgroundColors(true);

    String successfullSent = i18n.get("messaging.status.feedback.success");
    for (EmailFeedback f : feedbackList) {
      String desc = f.getFeedbackDescription();
      if (desc == null) {
        desc = successfullSent;
      }
      dataset.addLabeledData(desc, 1d);
    }

Using dataset.addLabeledData(labelName, value); the value will be added to a"label-value map". In case of double data based dataset (like Bar, Line, Polar, Radar and Pie) the value will be added to a existing value and does not replace it.

Make contributing to the project easier

Right now there these problems:

BINTRAY properties are required. For future use with TravisCI use the solution in jopencage.
Gradle Vaadin Plugin pulls in jetty which prevents the spring boot app demo to start.
Currently I commented the gradle-vaadin-plugin section in demo/build.gradle. The commenting might cause the problems in #11
Right now developing vaadin addons only works with Eclipse and the Gradle IDE (http://dist.springsource.com/release/TOOLS/update/e4.6/)
Add step by step setup to contribute section in readme.
I would like to develop in IDEA myself but was not able to get the Gradle multiproject running

Support bubble chart

https://github.com/chartjs/Chart.js/blob/master/docs/08-Bubble-Chart.md

Fill options in LineDataset - String

Is it possible to change fill parameter to string?
LineDataset.java

public LineDataset fill(boolean fill) {
    this.fill = fill;
    return this;
}

This functionality is good to implement :
http://www.chartjs.org/samples/latest/charts/area/line-datasets.html

canvas.setAttribute('width', "100%");

Will investigate.

moberwasserlechner / vaadin-chartjs Goto Github PK

vaadin-chartjs's People

Contributors

Stargazers

Watchers

Forkers

vaadin-chartjs's Issues

Recommend Projects

Recommend Topics

Recommend Org