Giter VIP home page Giter VIP logo

j2chartjs's Introduction

j2ChartJs

j2ChartJs allows generating configuration objects for the fantastic Chart.js JavaScript library from your Java code.

Maven Central

<dependency>
  <groupId>de.yanwittmann</groupId>
  <artifactId>j2chartjs</artifactId>
  <version>1.1</version>
</dependency>

Sample usage

Java: Build any of the available chart types and export to json.

BarChartDataset dataset = new BarChartDataset()
    .addData(12, 32, 8, 45, 27, 23)
    .setLabel("Sample Dataset")
    .setBackgroundColor(ChartColors.BACKGROUNDS)
    .setBorderColor(ChartColors.BORDERS)
    .addBorderWidth(1);

BarChartData data = new BarChartData()
    .addDataset(dataset)
    .addLabels("Entry 1", "Entry 2", "Entry 3", "Entry 4", "Entry 5", "Entry 6");

ChartOptions options = new ChartOptions()
    .setTitle(new TitleOption().setText("Sample Chart").setDisplay(true));

BarChart chart = new BarChart()
    .setChartOptions(options)
    .setChartData(data);

JSONObject jsonChartConfiguration = chart.build();

HTML: Link to a ChartJs script with version >= 3.0 and define a canvas.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<canvas id="canvasId" style="border: gray 2px solid;">

JavaScript: Load the exported JSON configuration together with the canvas element into a chart object.

var ctx = document.getElementById('canvasId');
new Chart(ctx, jsonChartConfiguration);

Quick Charts

Quick charts take away a lot of the configuration overhead and let you focus on your data.
Java: Also export to JSON when the chart is ready.

new QuickBarChart()
    .addDataset("Data 1", 10, 20, 30)
    .addDataset("Data 2", 34, 22, 14)
    .addLabels("Point 1", "Point 2", "Point 3")
    .setTitle("Quick chart")
    .setGridLinesVisible(false)
    .setBeginAtZero(true)
    .build();

Compatibility

Supports only ChartJs 3.x.
Might work for older versions but not all features will be supported there.

JavaDoc

Find the JavaDoc on javadoc.io.

License

j2ChartJs is licensed under the Apache 2.0 license

j2chartjs's People

Contributors

yanwittmann avatar

Stargazers

avatar

Watchers

avatar

Forkers

riko-l

j2chartjs's Issues

Smart add to JSON Object for every type

Make it so that when building the JSON objects for the chart configuration, elements only get added via the smartAddToJsonObject() function in the Util class.

LineCharts with no label defined for every datapoint won't render 

LineChartDataset dataset = new LineChartDataset();
LineChartData data = new LineChartData().addDataset(dataset);
for (int i = 0; i < 10; i++) {
    dataset.addData(new Random().nextInt(10 + 86));
    dataset.addPointBackgroundColor(new Random().nextInt(2) == 1 ? Color.RED : Color.BLUE);
}
ChartOptions options = new ChartOptions().setResponsive(false);
System.out.println(new LineChart().setChartOptions(options).setChartData(data).toString());

Maybe make it so that empty labes are being added when none are defined so that the data can render?

Do not cast Number to Double

Alongside

    public ScatterChartDatapoint(Object x, Object y) {
        this.x = Double.parseDouble(String.valueOf(x));
        this.y = Double.parseDouble(String.valueOf(y));
    }

also provide

    public ScatterChartDatapoint(Number x, Number y) {
        this.x = x;
        this.y = y;
    }

to allow for arbitrary position numbers. The same goes for the BubbleChartDatapoint class.

Replace repetitive color/attribute listing for datasets with function

For example, this configuration

{"data":{"datasets":[{"pointBackgroundColor":["rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(255,0,0)","rgb(0,0,255)"],"borderColor":"rgba(140,140,140,0.419)","data":[9,48,90,87,90,11,40,47,94,60,61,35,87,20,60,59,41,85,74,6,82,35,31,91,89,95,1,66,88,92,27,50,15,72,24,25,36,49,94,3,90,84,37,77,91,21,55,74,4,64,28,56,11,47,70,5,85,95,77,3,55,27,86,43,88,45,7,59,42,32,54,59,73,68,61,90,5,17,67,45,25,32,56,62,1,72,41,32,16,79,30,94,26,60,31,14,34,14,57,93],"label":"Dataset awesome","pointRadius":[1,2,2,3,3,2,2,3,2,1,2,1,2,2,3,2,1,1,2,1,3,3,2,3,2,3,2,3,3,3,2,3,1,3,1,1,1,3,1,1,2,2,1,2,1,1,3,3,3,3,1,2,3,3,3,1,3,3,3,3,3,3,2,2,3,3,3,2,3,2,3,3,2,1,3,3,3,1,2,2,1,3,1,3,1,1,2,1,2,1,2,2,1,3,1,2,3,1,1,3]}],"labels":["entry 0","entry 1","entry 2","entry 3","entry 4","entry 5","entry 6","entry 7","entry 8","entry 9","entry 10","entry 11","entry 12","entry 13","entry 14","entry 15","entry 16","entry 17","entry 18","entry 19","entry 20","entry 21","entry 22","entry 23","entry 24","entry 25","entry 26","entry 27","entry 28","entry 29","entry 30","entry 31","entry 32","entry 33","entry 34","entry 35","entry 36","entry 37","entry 38","entry 39","entry 40","entry 41","entry 42","entry 43","entry 44","entry 45","entry 46","entry 47","entry 48","entry 49","entry 50","entry 51","entry 52","entry 53","entry 54","entry 55","entry 56","entry 57","entry 58","entry 59","entry 60","entry 61","entry 62","entry 63","entry 64","entry 65","entry 66","entry 67","entry 68","entry 69","entry 70","entry 71","entry 72","entry 73","entry 74","entry 75","entry 76","entry 77","entry 78","entry 79","entry 80","entry 81","entry 82","entry 83","entry 84","entry 85","entry 86","entry 87","entry 88","entry 89","entry 90","entry 91","entry 92","entry 93","entry 94","entry 95","entry 96","entry 97","entry 98","entry 99"]},"options":{"responsive":false},"type":"line"}

could be replaced with this one:

{"data":{"datasets":[{"pointBackgroundColor":function(c){if([4,5,11,12,13,15,16,17,21,23,26,28,29,30,38,39,40,43,44,46,47,49,50,51,52,53,54,55,58,59,62,64,67,73,74,75,78,79,80,82,85,86,87,90,93,94,95,96,98,99].indexOf(c.dataIndex)>-1)return'rgb(255,0,0)';return'rgb(0,0,255)';},"borderColor":"rgba(140,140,140,0.419)","data":[91,30,38,31,28,65,37,93,45,35,35,10,42,92,32,25,65,13,30,45,1,13,86,35,37,72,65,64,1,51,35,41,77,3,75,5,6,87,5,23,61,53,54,44,53,16,85,67,16,21,74,14,85,57,20,83,18,9,66,8,6,23,76,55,27,0,61,78,43,66,41,28,27,25,71,65,85,88,94,13,2,68,60,44,67,6,46,44,81,91,47,47,93,16,71,59,38,49,32,82],"label":"Dataset awesome","pointRadius":[3,1,3,2,1,3,3,2,3,3,2,1,2,3,1,3,2,1,2,1,3,3,2,1,3,3,2,2,1,2,2,1,3,2,3,3,2,1,2,2,3,1,3,3,3,1,3,3,3,1,1,3,3,2,1,1,3,1,1,2,2,2,2,2,2,2,1,2,1,3,1,3,1,3,1,1,3,2,2,1,3,2,1,1,3,1,3,2,3,2,3,1,1,1,3,2,3,1,2,2]}],"labels":["entry 0","entry 1","entry 2","entry 3","entry 4","entry 5","entry 6","entry 7","entry 8","entry 9","entry 10","entry 11","entry 12","entry 13","entry 14","entry 15","entry 16","entry 17","entry 18","entry 19","entry 20","entry 21","entry 22","entry 23","entry 24","entry 25","entry 26","entry 27","entry 28","entry 29","entry 30","entry 31","entry 32","entry 33","entry 34","entry 35","entry 36","entry 37","entry 38","entry 39","entry 40","entry 41","entry 42","entry 43","entry 44","entry 45","entry 46","entry 47","entry 48","entry 49","entry 50","entry 51","entry 52","entry 53","entry 54","entry 55","entry 56","entry 57","entry 58","entry 59","entry 60","entry 61","entry 62","entry 63","entry 64","entry 65","entry 66","entry 67","entry 68","entry 69","entry 70","entry 71","entry 72","entry 73","entry 74","entry 75","entry 76","entry 77","entry 78","entry 79","entry 80","entry 81","entry 82","entry 83","entry 84","entry 85","entry 86","entry 87","entry 88","entry 89","entry 90","entry 91","entry 92","entry 93","entry 94","entry 95","entry 96","entry 97","entry 98","entry 99"]},"options":{"responsive":false},"type":"line"}

The large array of colors could be replaced with a function that only stores the indices of the individual colors.
Note that the element that apprears most commonly could be put last with a single return statement to save on extra space.

Write JavaDoc

At least for classes and attributes of options/charts.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.