pepstock-org / Charba

J2CL and GWT Charts library based on CHART.JS
https://pepstock-org.github.io/Charba-Wiki/docs
Apache License 2.0
62 stars 6 forks source link

Combo TimeSeries #16

Closed nseb closed 5 years ago

nseb commented 5 years ago

Hi ,

it's possible to make chart combo time series like Chart.js (https://www.chartjs.org/samples/latest/scales/time/combo.html).

stockiNail commented 5 years ago

@nesb yes, it is. See in the showcase, in "Other charts --> Combo Bar Line".

Here is the picture: combo

here is the source in the GITHUB of showcase.

nseb commented 5 years ago

@stockiNail Thanks , I see the code , but If used CartesianTimeAxis , my code not working :

` LineDataset dataset1 = new LineDataset(); dataset1.setLabel("dataset 1"); dataset1.setFill(Fill.origin);

    BarDataset dataset2 = weatherChart.newDataset();

    DataPoint[] points = new DataPoint[trackWeathers.size()];
    DataPoint[] rainPoints = new DataPoint[trackWeathers.size()];
    int idx = 0;
    for (TrackWeather trackWeather : trackWeathers) {
        DataPoint dataPoint=  new DataPoint();
        dataPoint.setT(trackWeather.getWeather().getDate());
        dataPoint.setX(trackWeather.getWeather().getTemp());
        points[idx] =dataPoint;

        DataPoint rainPoint=  new DataPoint();
        rainPoint.setT(trackWeather.getWeather().getDate());
        rainPoint.setX(trackWeather.getWeather().getPressure());
        rainPoints[idx] =rainPoint;

        idx++;
    }

    dataset1.setDataPoints(points);
    dataset2.setDataPoints(rainPoints);

    CartesianTimeAxis axis = new CartesianTimeAxis(weatherChart);
    axis.setDistribution(ScaleDistribution.series);
    axis.getTicks().setSource(TickSource.data);
    axis.getTime().setUnit(TimeUnit.day);

    weatherChart.getData().setDatasets(dataset1 , dataset2);

    weatherChart.getOptions().getScales().setXAxes(axis);

    weatherChart.draw();`

result :

image

stockiNail commented 5 years ago

@nseb Here is the code and below the result.

Don't set the value by setX but by setY.

I have added the type of datasets to have the line and bar datasets, otherwise with timeseries it will use only bar.

LineDataset dataset1 = new LineDataset();
dataset1.setType(ChartType.line);
dataset1.setLabel("dataset 1");

IsColor color3 = Colors.ALL[3];

dataset1.setBackgroundColor(color3.toHex());
dataset1.setBorderColor(color3.toHex());
dataset1.setFill(Fill.nofill);

long time = System.currentTimeMillis();

BarDataset dataset2 = chart.newDataset();
dataset2.setType(ChartType.bar);
dataset2.setLabel("dataset 2");

DataPoint[] points = new DataPoint[AMOUNT_OF_POINTS];
DataPoint[] rainPoints = new DataPoint[AMOUNT_OF_POINTS];
int idx = 0;
for (int i=0; i<AMOUNT_OF_POINTS; i++){
        DataPoint dataPoint=  new DataPoint();
        dataPoint.setT(new Date(time));
        dataPoint.setY(100 * Math.random());
        points[idx] = dataPoint;

        DataPoint rainPoint=  new DataPoint();
        rainPoint.setT(new Date(time));
        rainPoint.setY(100 * Math.random());
        rainPoints[idx] =rainPoint;

       idx++;
       time = time + DAY;
}

dataset1.setDataPoints(points);
dataset2.setDataPoints(rainPoints);

CartesianTimeAxis axis = new CartesianTimeAxis(chart);
axis.setDistribution(ScaleDistribution.series);
axis.getTicks().setSource(TickSource.data);
axis.getTime().setUnit(TimeUnit.day);

chart.getData().setDatasets(dataset1, dataset2);

chart.getOptions().getScales().setXAxes(axis);

timeseries

nseb commented 5 years ago

@stockiNail , sorry I'm tired, my mistake is stupid

Here Result : image

stockiNail commented 5 years ago

@nseb Sorry but I don't understand if the result as you expected. It seems you are using multiple axes.

nseb commented 5 years ago

@stockiNail yes, it's good, I still have to work on it, I want to add pressure and humidity. These are weather data for a kart track