Beautiful and interactive javascript charts for Java-based web applications.

Overview

Wicked Charts

Beautiful and interactive JavaScript charts for Java-based web applications.

Build Status

What is Wicked Charts?

Wicked Charts is a Java wrapper of the Chart.js and Highcharts JavaScript libraries. The Chart.js and Highcharts libraries provide eye-pleasing charts using HTML5 (see Highcharts demo and Chart.js Samples). With Wicked Charts, you can configure a chart in Java and display it in any web application based on Apache Wicket or JSF. Or you can use the Chart.js or Highcharts Java wrappers to integrate it in web applications built with other java web frameworks.

Please note that while Wicked Charts is licensed under Apache 2.0 License, Highcharts itself is only free for non-commercial use. Chart.js, however, is licensed under the MIT license and is free to use. See here: Highcharts shop And here: Chart.js license

How does it work?

For a quick start on how to use Wicked Charts in your Wicket or JSF application, visit the Getting Started page.

Your web framework is not supported?

If your Java-based framework of choice is not supported by Wicked Charts, feel free to get in touch with us. It shouldn't be much work to get the basic features also working for your framework (most of the work has already been done).

Want to contribute?

Feel free to clone this repository and submit pull requests. We'll see to get them merged into the main project.

Adding Wicked-Charts as a dependency

Depending on what web framework you use, add one of the following dependencies to your Gradle/Maven build:

Wicket 8.x

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-wicket8:3.2.1'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket8</artifactId>
  <version>3.2.1</version>
  <type>pom</type>
</dependency>

Wicket 7.x

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-wicket7:3.2.1'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket7</artifactId>
  <version>3.2.1</version>
  <type>pom</type>
</dependency>

Wicket 6.x

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-wicket6:3.2.1'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket6</artifactId>
  <version>3.2.1</version>
  <type>pom</type>
</dependency>

Wicket 1.5.x

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-wicket15:3.2.1'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket15</artifactId>
  <version>3.2.1</version>
  <type>pom</type>
</dependency>

Wicket 1.4.x

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-wicket14:3.2.1'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket14</artifactId>
  <version>3.2.1</version>
  <type>pom</type>
</dependency>

JSF 2.1

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-jsf21:3.2.1'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-jsf21</artifactId>
  <version>3.2.1</version>
  <type>pom</type>
</dependency>

Java Wrappers

If you want to use the Java abstraction and JSON serializer of the Chart.js or Highcharts options (for example to add them to an application built with a different web framework than Wicket ot JSF), add the following dependencies:

Gradle:

repositories {
    jcenter()
}

dependencies {
  compile 'de.adesso.wicked-charts:chartjs-wrapper:3.2.1'
  compile 'de.adesso.wicked-charts:highcharts-wrapper:3.2.1'
}

Maven:

<dependencies>
    <dependency>
      <groupId>de.adesso.wicked-charts</groupId>
      <artifactId>chartjs-wrapper</artifactId>
      <version>3.2.1</version>
      <type>pom</type>
    </dependency>
    
    <dependency>
      <groupId>de.adesso.wicked-charts</groupId>
      <artifactId>highcharts-wrapper</artifactId>
      <version>3.2.1</version>
      <type>pom</type>
    </dependency>
</dependencies>

Latest snapshot release

Gradle:

repositories {
    maven { url 'https://oss.jfrog.org/artifactory/oss-snapshot-local' }
}

dependencies {
  compile 'de.adesso.wicked-charts:wicked-charts-wicket8:3.2.1-SNAPSHOT'
}

Maven:

<dependency>
  <groupId>de.adesso.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket8</artifactId>
  <version>3.2.1-SNAPSHOT</version>
  <type>pom</type>
</dependency>
Comments
  • Problem with jQuery version

    Problem with jQuery version

    It looks like I'll be very persistent here, please be patient ;-)

    I'am trying to use wicked-charts alongside Kendo UI. Without charts I have loaded jQuery version 2.2.4. When I try to add a wicked chart, jQuery version 1.1.12 is loaded along with 2.2.4 version, which seems to break Kendo UI. I'am getting 'TypeError: jQuery(...).kendoMultiSelect is not a function' error then.

    Not sure, if it is problem of wicked-charts at all?

    opened by VaclavC 18
  • WickedCharts-JSF-1.4.2 not working in IE (8)

    WickedCharts-JSF-1.4.2 not working in IE (8)

    What steps will reproduce the problem?

    1. Create JSF2.1 Project with 'wicked-charts-highcharts-1.4.2.jar' and 'wicked-charts-jsf21-1.4.2.jar'
    2. Create chartbean (from http://wicked-charts.appspot.com/start/?7) and xhtml file (faces) descriped here (https://code.google.com/p/wicked-charts/wiki/GettingStarted)
    3. Run Application and open site in Internet Exlporer 8.

    What is the expected output? What do you see instead? The chart is not shown, because the generated output contains invalid javascript for IE:

    <script type="text/javascript"> 
    /*<![CDATA[*/
    //the following line is not supported in IE
    document.addEventListener("DOMContentLoaded", function onDom(event) {
    var chart1Options = {
      "chart" : {
        "renderTo" : "chart1",
    ...
    

    What version of the product are you using? On what operating system? 'wicked-charts-jsf21-1.4.2.jar' 'wicked-charts-highcharts-1.4.2.jar'

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"</script>
    

    Please provide any additional information below. The Wicked Showcase (with HTML and Wicked - http://wicked-charts.appspot.com/start/?7) works fine in IE 8 (already fixed in Issue 1 ). But my Implementation (see below) generates exactly the issue (1) again:

    Bean:

    @ManagedBean(name = "myBean")
    @SessionScoped
    public class Chart {
        Options options = new Options();
    
        public Chart() {
            initOptions();
        }
    
        private void initOptions() {
            options.setChartOptions(new ChartOptions().setType(SeriesType.LINE));
    
            options.setTitle(new Title("My very own chart."));
    
            options.setxAxis(new Axis().setCategories(Arrays.asList(new String[] {
                    "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
                    "Oct", "Nov", "Dec" })));
    
            options.setyAxis(new Axis().setTitle(new Title("Temperature (C)")));
    
            options.setLegend(new Legend().setLayout(LegendLayout.VERTICAL)
                    .setAlign(HorizontalAlignment.RIGHT)
                    .setVerticalAlign(VerticalAlignment.TOP).setX(-10).setY(100)
                    .setBorderWidth(0));
    
            options.addSeries(new SimpleSeries().setName("Tokyo").setData(
                    Arrays.asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
                            25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));
    
            options.addSeries(new SimpleSeries().setName("New York").setData(
                    Arrays.asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
                            24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));
        }
    
        public Options getOptions() {
            return options;
        }
    
        public void setOptions(Options options) {
            this.options = options;
        }
    
    }
    

    My faces file:

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
        xmlns:wc="http://googlecode.com/wickedcharts"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core">
    <f:view>
        <h:head>
            <script
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
                type="text/javascript"></script>
        </h:head>
        <h:body>
            <script src="http://code.highcharts.com/highcharts.js"
                type="text/javascript"></script>
            <wc:chart id="chart1" options="#{myBean.options}" />
        </h:body>
    </f:view>
    </html>
    
    opened by thombergs 9
  • chartjs-wrapper-3.1 - Color class does not implement serialisable

    chartjs-wrapper-3.1 - Color class does not implement serialisable

    Currently using chart-js-wrapper version 3.1.0 in which the Color class does not implement serialisable

    As a workaround, I extended the color class and implemented serialisable. The application runs fine in sequential manner. But in browser, on clicking back button, wicket application throws an error requesting for Parent color class to implement serialisable. Any suggestions for workaround? Or it would be great if you could release the latest version of the chart-js.wrapper with the changes. Any timeline specified? Really appreciate if you could help in this

    RgbColorSerial is my local class that extends serialisable Error log: java.lang.RuntimeException: Could not deserialize object from byte[] at org.apache.wicket.serialize.java.JavaSerializer.deserialize(JavaSerializer.java:143) Caused by: java.io.InvalidClassException: com.alcatel.ngna.optical.gui.network.statistics.charts.RgbColorSerial; no valid constructor

    opened by pvidhey9 6
  • ChartConfiguration not serializable?

    ChartConfiguration not serializable?

    Hello,

    I'am trying to use wicked-charts according to this example.

    I'am getting error about serialization, however:

    [Wicket-AsyncPageStore-PageSavingThread] ERROR org.apache.wicket.serialize.java.JavaSerializer - Error serializing object class .... SOMETHING ...] org.apache.wicket.core.util.objects.checker.CheckingObjectOutputStream$ObjectCheckException: The object type is not Serializable! A problem occurred while checking object with type: de.adesso.wickedcharts.chartjs.ChartConfiguration

    What I'am doing wrong?

    opened by VaclavC 5
  • client side export: offline mode

    client side export: offline mode

    Is it possible to set the client side export (offline mode) with no fall back to exporting server? if yes, how can I do this in properly?

    Thank you in advance

    opened by dermitdemwolftanzt 5
  • fix(DateTimeLabelFormatSerializer) quote issues

    fix(DateTimeLabelFormatSerializer) quote issues

    Currently the serializer returns

    "dateTimeLabelFormats" : { minute: '%H:%M:%S', day: '%H:%M:%S', week: '%H:%M:%S', year: '%H:%M:%S', second: '%H:%M:%S', hour: '%H:%M:%S' },
    

    which is not not valid json (but ok as json5 though ;)

    opened by age2pierre 4
  • Add support for Highcharts contextButton

    Add support for Highcharts contextButton

    I'm using highcharts-wrapper 3.1.0 to generate a JSON for Highcharts. I want to use the property contextButton of Highcharts https://api.highcharts.com/highcharts/exporting.buttons.contextButton because I just want the options to download PNG, JPG and PDF. I don't want the options to print or download as SVG. On Highcharts documentation I can do that by definnig the property exporting.buttons.contextButton.menuItems as:

    {
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: ["downloadPNG", "downloadPDF", "downloadJPEG"]
                }
            }
        }
    }
    

    I also want to use the other properties of contextButton such as symbol, height, width, symbolX, symbolY, x and y. I didn't find how to do that with highcharts-wrapper classes. I googled it, look into the showcase, downloaded and searched the source code but still got nothing. My impression/conclusion is that contextButton is not yet supported by highcharts-wrapper. Then I would like to request the support for the Highcharts contextButton and its nested properties. The workaround I came up with was to manualy set these properties in my JS code, but that is not very good because I have definition of the Highcharts object in two places, the Java code with most of the definition and thw JS code just for the contextButton.

    opened by fabiocvalente 4
  • Separate PlotOptions for each Series

    Separate PlotOptions for each Series

    I created multi axis stacked column chart through WickedChart . Now I want to set "setPointPadding" for each column series . Kindly help to solve this issue

    opened by chandrahasan 4
  • Add boxplot chart type

    Add boxplot chart type

    Reported by tom.hombergs, Sep 6, 2013 Add the new boxplot chart type.

    Also have a look at Highcharts 3 in general to check if there are other options missing.

    ready for release 
    opened by thombergs 4
  • ShowCase url for latest wicked-charts with chartjs is not working

    ShowCase url for latest wicked-charts with chartjs is not working

    https://wicked-charts-showcase.appspot.com/

    Could you please check this and see if you can get the site up? We need this for reference to create charts on our application

    opened by nikhilmalisetty 3
  • InteractionBehavior.js is not bundled

    InteractionBehavior.js is not bundled

    Hello! I recently discovered an issue with your resource bundling in the final jar files. This package contains an InteractionBehavior.js where the jars from JCenter seem not to contain this file. Ist there an issue with the build?

    Here's a screenshot of the artifact located in my local Maven repository. You can see that the JS is missing.

    wicked-charts

    Best regards!

    highcharts 
    opened by davemaul 3
Releases(v3.2.1)
Owner
adesso SE
adesso SE
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Jan 4, 2023
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Django Class Based Views to generate Ajax charts js parameters.

Django Chartjs Django Chartjs lets you manage charts in your Django application. This is compatible with Chart.js and Highcharts JS libraries. Using a

PeopleDoc 377 Dec 25, 2022
A web application to 🔍inspect your GitHub Profile Stats📊 in a lucid way. Visualization made easy with Charts💡🚀

know-your-gitstats A web application to ?? inspect your GitHub Profile Stats ?? in a lucid way. Visualization made easy with Charts ?? ?? . ✅ Features

Shubham Jadhav 46 Oct 15, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/ Take a look

Flot 5.9k Dec 22, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
Emprise Javascript Charts

EJSChart 100% Powerful, Clean & Functional Javascript Charts Whether at home, a medium sized or enterprise venture, EJSCharts will seamlessly help you

Emprise Corporation 34 Jun 3, 2021
A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: https://mkirschen.de/mk-scripts/mk-charts/ Circle charts To insert a chart all

Marcus Kirschen 6 Dec 14, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022