Geek asks and answers

Make JFreeChart CategoryPlot look like a Flot.js histogram

Overview

I am trying to imitate the diagram flot.jsshown below in JFreeCharts.

enter image description here

so far I have succeeded in most elements, such as individual color strokes with transparency, x and y grids and background.

enter image description here

Now I need to implement:

  • customized border color
  • solid black graph chart
  • the maximum value of the Y axis directed to the upper diagram

What i have done so far

Individual border colors

For individual colors of the hatch frame, I found the stream " " Adding a color / stroke border to individual bars in the "Chart Table"? ", Which I suggested for using the code

Color borderColor = buildColorMap.get(build);
renderer.setDrawBarOutline(true);
renderer.setSeriesOutlinePaint(iterator, borderColor);

unlike the one I am currently using for all bars

// other colors
renderer.setSeriesOutlinePaint(3, new Color(213, 94, 0));
renderer.setSeriesOutlinePaint(4, new Color(204, 121, 167));
renderer.setSeriesOutlineStroke(0, new BasicStroke(2.5f));

Chart layout

setOutlineStroke, API

. ( 1.0.6). setSeriesOutlineStroke(int, Stroke) setBaseOutlineStroke(Stroke). ALL RendererChangeEvent .

, setBaseOutlineStroke, ( , )!

renderer.setBaseOutlineStroke(new BasicStroke(2.5f), true);

flot.js - Y

y flot.js ( double array, , ):

private static double getHighestArrayValue(double[] array) {
    double max = 0;
    for (int i = 1; i < array.length; i++) {
        if (array[i] > max) {
            max = array[i];
        }
    }
    return max;
}

private static double getRoundedUpMultipleOfTen(double number) {
    return ((number + 9) / 10) * 10;
}

:

CategoryPlot plot = ...

final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
rangeAxis.setRange(0, 
   getRoundedUpMultipleOfTen(getHighestArrayValue(dataValues)));
rangeAxis.setTickUnit(new NumberTickUnit(10));

enter image description here

, 50 , , .

, ( Viral Patel " / PDF IText JFreeChart ":

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Paint;
import java.awt.geom.Rectangle2D;
import java.io.FileOutputStream;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.StandardChartTheme;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.axis.NumberTickUnit;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.chart.renderer.category.CategoryItemRenderer;
import org.jfree.chart.renderer.category.StandardBarPainter;
import org.jfree.data.category.DefaultCategoryDataset;

import com.itextpdf.text.Document;
import com.itextpdf.text.Font;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.pdf.PdfContentByte;
import com.itextpdf.text.pdf.PdfTemplate;
import com.itextpdf.text.pdf.PdfWriter;

public class ChartDemo {
    public static void main(String[] args) {
        writeChartToPDF(generateBarChart(), 800, 500, "D://barchart.pdf");
    }

    public static void writeChartToPDF(JFreeChart chart, int width, int height,
            String fileName) {
        PdfWriter writer = null;
        Document document = new Document(PageSize.A4.rotate(), 0, 0, 0, 0);

        try {
            writer = PdfWriter.getInstance(document, new FileOutputStream(
                    fileName));
            document.open();
            PdfContentByte contentByte = writer.getDirectContent();

            PdfTemplate template = contentByte.createTemplate(width, height);
            Graphics2D graphics2d = template.createGraphics(width, height);
            // controls size of image
            Rectangle2D rectangle2d = new Rectangle2D.Double(10, -10, width,
                    height);

            chart.draw(graphics2d, rectangle2d);

            graphics2d.dispose();
            contentByte.addTemplate(template, 0, 0);

        } catch (Exception e) {
            e.printStackTrace();
        }
        document.close();
    }

    static class CustomRenderer extends BarRenderer {

        private Paint[] colors;

        int transparency = 95;

        // http://www.cookbook-r.com/Graphs/Colors_(ggplot2)/
        public CustomRenderer() {
            this.colors = new Paint[] { new Color(1, 158, 115, transparency),
                    new Color(240, 228, 66, transparency),
                    new Color(0, 114, 178, transparency),
                    new Color(213, 94, 0, transparency),
                    new Color(204, 121, 167, transparency) };
        }

        public Paint getItemPaint(final int row, final int column) {
            return this.colors[column % this.colors.length];
        }
    }

    public static JFreeChart generateBarChart() {

        double[] dataValues = { 40.66, 37.82, 43.16, 32.62, 41.39 };
        Paint[] colors = { new Color(1, 158, 115), new Color(240, 228, 66),
                new Color(0, 114, 178), new Color(213, 94, 0),
                new Color(204, 121, 167) };

        DefaultCategoryDataset dataSet = new DefaultCategoryDataset();
        for (int i = 0; i < dataValues.length; i++) {
            dataSet.setValue(dataValues[i], "Population", (i + 1) * 2 + "");
        }

        ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());
        JFreeChart chart = ChartFactory.createBarChart("", "Team number",
                "Solved problems (%)", dataSet, PlotOrientation.VERTICAL,
                false, true, false);
        chart.setBackgroundPaint(Color.WHITE);

        final CategoryPlot plot = chart.getCategoryPlot();
        ((BarRenderer) plot.getRenderer())
                .setBarPainter(new StandardBarPainter());

        plot.setBackgroundPaint(Color.WHITE);

        plot.setDomainGridlinesVisible(true);
        plot.setRangeGridlinesVisible(true);

        plot.setDomainGridlineStroke(new BasicStroke(0.25f));
        plot.setRangeGridlineStroke(new BasicStroke(0.25f));

        plot.setDomainGridlinePaint(new Color(204, 204, 204));
        plot.setRangeGridlinePaint(new Color(204, 204, 204));

        java.awt.Font fontGraphLabel = new java.awt.Font("Helvetica",
                Font.NORMAL, 12);
        java.awt.Font fontGraphTicks = new java.awt.Font("Helvetica",
                Font.NORMAL, 10);
        plot.getDomainAxis().setLabelFont(fontGraphLabel);
        plot.getRangeAxis().setLabelFont(fontGraphLabel);
        plot.getDomainAxis().setTickLabelFont(fontGraphTicks);
        plot.getRangeAxis().setTickLabelFont(fontGraphTicks);

        CategoryItemRenderer renderer = new CustomRenderer();
        plot.setRenderer(renderer);

        final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
        rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
        rangeAxis.setRange(0,
                getRoundedUpMultipleOfTen(getHighestArrayValue(dataValues)));
        rangeAxis.setTickUnit(new NumberTickUnit(10));

        final BarRenderer renderer1 = (BarRenderer) plot.getRenderer();
        renderer1.setDrawBarOutline(true);
        renderer1.setShadowVisible(false);

        renderer1.setSeriesOutlinePaint(0, new Color(204, 121, 167));
        renderer1.setSeriesOutlinePaint(1, new Color(213, 94, 0));
        renderer1.setSeriesOutlineStroke(0, new BasicStroke(2.5f));

        renderer1.setBaseOutlineStroke(new BasicStroke(10f), true);

        return chart;
    }

    private static double getHighestArrayValue(double[] array) {
        double max = 0;
        for (int i = 1; i < array.length; i++) {
            if (array[i] > max) {
                max = array[i];
            }
        }
        return max;
    }

    private static double getRoundedUpMultipleOfTen(double number) {
        return ((number + 9) / 10) * 10;
    }

}
+3
1

Java, , ( )...

, , :

<div id="placeholder" style="width:300px;height:200px"></div>

$(function() {
    var series = {data: [[0, 5.2], [1, 3], [2, 9.2], [3, 10]],
                  lines: {show: false},
                  bars: {show: true, barWidth: 0.75, align:'center'}}

    somePlot = $.plot("#placeholder", [ series ], {});    
});

, Base64 ( base64FlotCode).

phantomJS script ( phantomJSScript.js), :

var system = require('system');    
var html = system.args[1];    
var page = require('webpage').create();

page.onLoadFinished = function(status) {
    var clipRect = page.evaluate(
        function()
        { 
            var el = document.querySelector('#placeholder');
            return el.getBoundingClientRect();
        }
    );

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('/path/to/myPlot.png');

    phantom.exit();
};

function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

page.content = b64_to_utf8(html);

script :

List<String> args = new ArrayList<String>();
args.add ("/path/to/phamtomjs.exe");
args.add ("/path/to/phantomJSScript.js");
args.add (base64FlotCode);
ProcessBuilder pb = new ProcessBuilder (args);
Process p = pb.start();
p.waitFor();

, phantomJS , -:

var system = require('system');      
var page = require('webpage').create();

page.open('http://www.mywebpage.com', function() {
    var clipRect = page.evaluate(
        function()
        { 
            var el = document.querySelector('#placeholder');
            return el.getBoundingClientRect();
        }
    );

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('/path/to/myPlot.png');

    phantom.exit();
};
+2

More articles:


All Articles