From decd84ada0694c595017d8784f104010f298e467 Mon Sep 17 00:00:00 2001 From: hybr1dz Date: Fri, 30 Sep 2016 01:11:20 +0300 Subject: [PATCH 1/4] Update chartjs-connector.js --- .../VAADIN/chartjs/chartjs-connector.js | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/addon/src/main/resources/VAADIN/chartjs/chartjs-connector.js b/addon/src/main/resources/VAADIN/chartjs/chartjs-connector.js index 1da53f1..6c3beb6 100644 --- a/addon/src/main/resources/VAADIN/chartjs/chartjs-connector.js +++ b/addon/src/main/resources/VAADIN/chartjs/chartjs-connector.js @@ -74,10 +74,22 @@ window.com_byteowls_vaadin_chartjs_ChartJs = function() { }; - this.updateData = function() { - chartjs.config.data = this.getState().configurationJson.data; - chartjs.update(); - } + this.updateData = function () { + chartjs.config.data = this.getState().configurationJson.data; + chartjs.update(); + }; + + this.pushLabel = function (label) { + chartjs.config.data.labels.push(label); + }; + + this.pushData = function (datasetIndex, data) { + chartjs.config.data.datasets[datasetIndex].data.push(data); + }; + + this.update = function () { + chartjs.update(); + }; // TODO get data from server push and pull }; From d275bdf920a90456ca7db1dfbd7df590b32707a3 Mon Sep 17 00:00:00 2001 From: hybr1dz Date: Fri, 30 Sep 2016 01:14:54 +0300 Subject: [PATCH 2/4] Update ChartJs.java --- .../com/byteowls/vaadin/chartjs/ChartJs.java | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/addon/src/main/java/com/byteowls/vaadin/chartjs/ChartJs.java b/addon/src/main/java/com/byteowls/vaadin/chartjs/ChartJs.java index a312bb3..1dfdd73 100644 --- a/addon/src/main/java/com/byteowls/vaadin/chartjs/ChartJs.java +++ b/addon/src/main/java/com/byteowls/vaadin/chartjs/ChartJs.java @@ -72,6 +72,30 @@ public void refreshData() { } callFunction("updateData"); } + + /** + * Push a new label into the chart. + * @param label new label to add into chart. + */ + public void pushLabel(String label) { + callFunction("pushLabel", label); + } + + /** + * Push new data into the chart. + * @param datasetIndex index number of dataset where to add new data. + * @param data number to add into dataset. + */ + public void pushData(int datasetIndex, Number data) { + callFunction("pushData", datasetIndex, data); + } + + /** + * Call the ChartJS update function. + */ + public void update() { + callFunction("update"); + } /** * @return True if the connector's logs defined messages to "console.log" else logging is disabled. From 5bacefea7f3172f6a1b158e0b8ee9c860b9b7992 Mon Sep 17 00:00:00 2001 From: hybr1dz Date: Fri, 30 Sep 2016 01:16:06 +0300 Subject: [PATCH 3/4] Create LineChartPushDataView.java --- .../demo/ui/charts/LineChartPushDataView.java | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/charts/LineChartPushDataView.java diff --git a/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/charts/LineChartPushDataView.java b/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/charts/LineChartPushDataView.java new file mode 100644 index 0000000..591b999 --- /dev/null +++ b/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/charts/LineChartPushDataView.java @@ -0,0 +1,118 @@ +package com.byteowls.vaadin.chartjs.demo.ui.charts; + +import java.util.ArrayList; +import java.util.List; + +import com.byteowls.vaadin.chartjs.ChartJs; +import com.byteowls.vaadin.chartjs.config.LineChartConfig; +import com.byteowls.vaadin.chartjs.data.Dataset; +import com.byteowls.vaadin.chartjs.data.LineDataset; +import com.byteowls.vaadin.chartjs.demo.ui.AbstractChartView; +import com.byteowls.vaadin.chartjs.demo.ui.ChartUtils; +import com.byteowls.vaadin.chartjs.options.Hover; +import com.byteowls.vaadin.chartjs.options.Position; +import com.byteowls.vaadin.chartjs.options.Tooltips; +import com.byteowls.vaadin.chartjs.options.scale.Axis; +import com.byteowls.vaadin.chartjs.options.scale.CategoryScale; +import com.byteowls.vaadin.chartjs.options.scale.LinearScale; +import com.vaadin.server.FontAwesome; +import com.vaadin.spring.annotation.SpringView; +import com.vaadin.spring.annotation.UIScope; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.Component; +import com.vaadin.ui.VerticalLayout; + +@UIScope +@SpringView +public class LineChartPushDataView extends AbstractChartView { + + private static final long serialVersionUID = -1625380456901210625L; + + @Override + public Component getChart() { + LineChartConfig lineConfig = new LineChartConfig(); + lineConfig.data() + .labels("January", "February", "March", "April", "May", "June", "July") + .addDataset(new LineDataset().label("My First dataset").fill(false)) + .addDataset(new LineDataset().label("My Second dataset").fill(false)) + .addDataset(new LineDataset().label("Hidden dataset").hidden(true)) + .and() + .options() + .responsive(true) + .title() + .display(true) + .text("Chart.js Line Chart") + .and() + .tooltips() + .mode(Tooltips.Mode.LABEL) + .and() + .hover() + .mode(Hover.Mode.DATASET) + .and() + .scales() + .add(Axis.X, new CategoryScale() + .display(true) + .scaleLabel() + .display(true) + .labelString("Month") + .and() + .position(Position.TOP)) + .add(Axis.Y, new LinearScale() + .display(true) + .scaleLabel() + .display(true) + .labelString("Value") + .and() + .ticks() + .suggestedMin(-10) + .suggestedMax(250) + .and() + .position(Position.RIGHT)) + .and() + .done(); + + // add random data for demo + List labels = lineConfig.data().getLabels(); + for (Dataset ds : lineConfig.data().getDatasets()) { + LineDataset lds = (LineDataset) ds; + List data = new ArrayList<>(); + for (int i = 0; i < labels.size(); i++) { + data.add((double) Math.round(Math.random() * 100)); + } + lds.dataAsList(data); + lds.borderColor(ChartUtils.randomColor(0.3)); + lds.backgroundColor(ChartUtils.randomColor(0.5)); + } + + ChartJs chart = new ChartJs(lineConfig); + chart.addClickListener((a,b) -> { + LineDataset dataset = (LineDataset) lineConfig.data().getDatasets().get(a); + ChartUtils.notification(a, b, dataset); + }); + chart.setJsLoggingEnabled(true); + chart.setWidth(100, Unit.PERCENTAGE); + chart.setHeight(100, Unit.PERCENTAGE); + + Button refreshButton = new Button("Push Data", FontAwesome.REFRESH); + refreshButton.addClickListener(e -> pushChartData(chart)); + + VerticalLayout layout = new VerticalLayout(); + layout.setSizeFull(); + layout.addComponent(refreshButton); + layout.addComponent(chart); + layout.setComponentAlignment(refreshButton, Alignment.TOP_CENTER); + layout.setComponentAlignment(chart, Alignment.MIDDLE_CENTER); + layout.setExpandRatio(chart, 1); + return layout; + } + + protected void pushChartData(ChartJs chart) { + chart.pushLabel("pushed data"); + chart.pushData(0, 47); + chart.pushData(1, 74); + chart.pushData(2, 11); + chart.update(); + } + +} From a01f063735ec9d6c0f846964173595e84d71e991 Mon Sep 17 00:00:00 2001 From: hybr1dz Date: Fri, 30 Sep 2016 01:17:09 +0300 Subject: [PATCH 4/4] Update ChartJsDemoUI.java --- .../java/com/byteowls/vaadin/chartjs/demo/ui/ChartJsDemoUI.java | 2 ++ 1 file changed, 2 insertions(+) diff --git a/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/ChartJsDemoUI.java b/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/ChartJsDemoUI.java index 0cf57c8..6f29e8a 100644 --- a/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/ChartJsDemoUI.java +++ b/demo/src/main/java/com/byteowls/vaadin/chartjs/demo/ui/ChartJsDemoUI.java @@ -29,6 +29,7 @@ import com.byteowls.vaadin.chartjs.demo.ui.charts.StackedBarChartView; import com.byteowls.vaadin.chartjs.demo.ui.charts.StackedLineChartView; import com.byteowls.vaadin.chartjs.demo.ui.charts.SteppedLineChartView; +import com.byteowls.vaadin.chartjs.demo.ui.charts.LineChartPushDataView; import com.vaadin.annotations.Theme; import com.vaadin.data.Item; import com.vaadin.data.util.HierarchicalContainer; @@ -81,6 +82,7 @@ public class ChartJsDemoUI extends UI { menuItems.add(new MenuItem(ChartType.LINE, "SkipPoints", SkipPointsLineChartView.class)); menuItems.add(new MenuItem(ChartType.LINE, "Stepped", SteppedLineChartView.class)); menuItems.add(new MenuItem(ChartType.LINE, "CubicInterpolation", CubicInterpolationLineChartView.class)); + menuItems.add(new MenuItem(ChartType.LINE, "Line with push data", LineChartPushDataView.class)); menuItems.add(new MenuItem(ChartType.PIE, "Pie", SinglePieChartView.class)); menuItems.add(new MenuItem(ChartType.PIE, "Donut", MultiDonutChartView.class)); menuItems.add(new MenuItem(ChartType.PIE, "Angled pie", AngledPieChartView.class));