Theme in charts

[gjvolpi]

I bought the adamantium theme, but not was applied in charts. How apply theme in the charts?

[mert.sincan]

You need to call JS function with model.setExtender("JSfunction") in bean and add jqplot features according to the needs.(http://www.jqplot.com/docs/files/jqPlotOptions-txt.html)

Chart Demo codes in Adamantium Dashboard.xhtml;

Code: Select all

//JS code
function skinChart() {
    this.cfg.shadow = false;
    this.cfg.title = '';
    this.cfg.seriesColors = ['#FF4081', '#FB8C00', '#43A047', '#8E24AA'];
    this.cfg.grid = {
        background: '#ffffff',
        borderColor: '#ffffff',
        gridLineColor: '#F5F5F5',
        shadow: false
    };
    this.cfg.axesDefaults = {
        rendererOptions: {
            textColor: '#666F77'
        }
    };
    this.cfg.seriesDefaults = {
        shadow: false,
        lineWidth:1,
        markerOptions: {
            shadow: false,
            size:7,
            style:'circle'
        }
    }
}

Code: Select all

//first example in bean.java 
    private BarChartModel initBarModel() {
        BarChartModel model = new BarChartModel();
        
        
        ChartSeries series1 = new ChartSeries();
        series1.setLabel("MapX");

        series1.set(0, 2);
        series1.set(2, 1);
        series1.set(3, 9.6);
        series1.set(4.5, 7.5);
        series1.set(5, 9);
        series1.set(7, 4);

        ChartSeries series2 = new ChartSeries();
        series2.setLabel("SportX");

        series2.set(1, 2);
        series2.set(3, 6);
        series2.set(4, 4);
        series2.set(5, 2);
        series2.set(6, 9);
        
        ChartSeries series3 = new ChartSeries();
        series3.setLabel("LightX");

        series3.set(-0.5, 4);
        series3.set(2, 9);
        series3.set(5, 5);
        series3.set(6, 7);
        series3.set(7, 1);
        
        ChartSeries series4 = new ChartSeries();
        series4.setLabel("InstaX");

        series4.set(-0.5, 1);
        series4.set(0, 7);
        series4.set(3.5, 2.5);
        series4.set(6, 4);
        series4.set(7.5, 2);

        model.addSeries(series1);
        model.addSeries(series2);
        model.addSeries(series3);
        model.addSeries(series4);
        
        model.setExtender("skinChart");
        
        return model;
    }

//xhtml
<p:chart type="bar" model="#{chartView.barModel}" style="height:270px;" responsive="true"/>

Code: Select all

//second example in bean.java
lineModel1 = initLinearModel();
lineModel1.setTitle("Linear Chart");
lineModel1.setLegendPosition("e");
lineModel1.setExtender("skinChart");
lineModel1.setAnimate(true);
Axis yAxis = lineModel1.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(10);

//xhtml
<p:chart type="line" model="#{chartView.lineModel1}" style="height:270px;" responsive="true"/>

[gjvolpi]

Thank you. It worked in the line charts and bar charts. Should work in pie charts too? In my case the pie charts gave error. Any idea?

[mert.sincan]

Example for Pie Chart;

Code: Select all

/* JS */
function skinPie() {
    this.cfg.seriesColors = ['#FF4081', '#FB8C00', '#43A047', '#8E24AA'];
    this.cfg.grid = {
        background: '#ffffff',
        borderColor: '#eaeaea',
        gridLineColor: '#e5ebf0',
        shadow: false,
        borderWidth: 0
    };
    this.cfg.seriesDefaults.shadow = false;
}

//xhtml
<p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px" />

//java
private void createPieModel1() {
        pieModel1 = new PieChartModel();
        
        pieModel1.set("Brand 1", 540);
        pieModel1.set("Brand 2", 325);
        pieModel1.set("Brand 3", 702);
        pieModel1.set("Brand 4", 421);
        
        pieModel1.setTitle("Simple Pie");
        pieModel1.setLegendPosition("w");
        pieModel1.setExtender("skinPie");
}

You can change the colors or values in skinPie function.(http://www.jqplot.com/docs/files/jqPlotOptions-txt.html)

[gjvolpi]

Done, Thank you!

[mert.sincan]

Glad to hear, thanks