Support Scatter Line Charts

[moberwasserlechner]

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

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

[moberwasserlechner]

Example usage:

  ScatterChartConfig config = new ScatterChartConfig();
        config
            .data()
                .addDataset(new ScatterDataset().label("My First dataset").xAxisID("x-axis-1").yAxisID("y-axis-1"))
                .addDataset(new ScatterDataset().label("My Second  dataset").xAxisID("x-axis-1").yAxisID("y-axis-2"))
                .and();
        config.
            options()
                .responsive(true)
                .hover()
                    .mode(Mode.SINGLE)
                    .and()
                .title()
                    .display(true)
                    .text("Chart.js Scatter Chart - Multi Axis")
                    .and()
                .scales()
                    .add(Axis.X, new LinearScale().position(Position.BOTTOM).gridLines().zeroLineColor("rgba(0,0,0,1)").and())
                    .add(Axis.Y, new LinearScale().display(true).position(Position.LEFT).id("y-axis-1"))
                    .add(Axis.Y, new LinearScale().display(true).position(Position.RIGHT).id("y-axis-2").ticks().reverse(true).and().gridLines().drawOnChartArea(false).and())
                    .and()
               .done();

        for (Dataset<?, ?> ds : config.data().getDatasets()) {
            ScatterDataset lds = (ScatterDataset) ds;
            lds.borderColor(randomColor(.4));
            lds.backgroundColor(randomColor(.1));
            lds.pointBorderColor(randomColor(.7));
            lds.pointBackgroundColor(randomColor(.5));
            lds.pointBorderWidth(1);
            for (int i = 0; i < 7; i++) {
                lds.addData(randomScalingFactor(), randomScalingFactor());
            }
        }

        ChartJs lineChart = new ChartJs(config);
        lineChart.setJsLoggingEnabled(true);
        lineChart.setWidth(50, Unit.PERCENTAGE);

        lineChart.addClickListener((a,b) -> {
            ScatterDataset dataset = (ScatterDataset) config.data().getDatasets().get(a);
            Notification.show("ScatterDataset at idx:" + a + "; Data: idx=" + b + "; Value=" + dataset.getData().get(b), Type.TRAY_NOTIFICATION);
        });
        return lineChart; 

Produces: