Theme is not appling to charts

Locked
spadinha
Posts: 15
Joined: 17 Apr 2015, 00:23

25 Aug 2015, 20:47

Hello, Im using sentinel theme and layout.
But my charts are not formatting like the dashboard samples...

Can you help me ?

<p:chart type="line" responsive="true"
model="#{bIGeralController.modeloEntidadesCadastradas}" />

I'm just using this way.

regards.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

25 Aug 2015, 23:04

I think you can override Extender function.

Dashboard Exp;
XHTML

Code: Select all

<p:chart type="line" model="#{chartView.lineModel}" style="height:300px;margin-top:10px" responsive="true"/>
chartView.java

Code: Select all

...
private void initLinearModel() {
        lineModel = new LineChartModel();
        lineModel.setTitle("Linear Chart");
        lineModel.setLegendPosition("e");
        lineModel.setExtender("skinChart");
        lineModel.setAnimate(true);
        Axis yAxis = lineModel.getAxis(AxisType.Y);
        yAxis.setMin(0);
        yAxis.setMax(10);

        LineChartSeries series1 = new LineChartSeries();
        series1.setLabel("Series 1");

        series1.set(1, 2);
        series1.set(2, 1);
        series1.set(3, 3);
        series1.set(4, 6);
        series1.set(5, 8);

        LineChartSeries series2 = new LineChartSeries();
        series2.setLabel("Series 2");

        series2.set(1, 6);
        series2.set(2, 3);
        series2.set(3, 2);
        series2.set(4, 7);
        series2.set(5, 9);

        lineModel.addSeries(series1);
        lineModel.addSeries(series2);
}
...
Extender JS

Code: Select all

function skinChart() {
      this.cfg.shadow = false;
      this.cfg.seriesColors = ['#dae8ef', '#27aae1'];
      this.cfg.grid = {
            background: '#f3f5f7',
            borderColor: '#e5ebf0',
            gridLineColor: '#e5ebf0',
            shadow: false
      };
      this.cfg.axesDefaults = {
            rendererOptions: {
               textColor: '#9fadb5'
            }
      };
      this.cfg.seriesDefaults = {
           shadow: false,
           markerOptions: {
              shadow: false
           }
      }
}

spadinha
Posts: 15
Joined: 17 Apr 2015, 00:23

27 Aug 2015, 18:16

Thanks, its working.

But Can I apply dinamically the axis x tickangle ??

regards

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Aug 2015, 14:20

I think you can use setTickAngle function;

//java

Code: Select all

private void initLinearModel() {
        lineModel = new LineChartModel();
        lineModel.setTitle("Linear Chart");
        lineModel.setLegendPosition("e");
        lineModel.setExtender("skinChart");
        lineModel.setAnimate(true);
        Axis yAxis = lineModel.getAxis(AxisType.Y);
        yAxis.setMin(0);
        yAxis.setMax(10);
        Axis xAxis = lineModel.getAxis(AxisType.X);
        xAxis.setTickAngle(-30); // add angle
        
        LineChartSeries series1 = new LineChartSeries();
        series1.setLabel("Series 1");

        series1.set(1, 2);
        series1.set(2, 1);
        series1.set(3, 3);
        series1.set(4, 6);
        series1.set(5, 8);

        LineChartSeries series2 = new LineChartSeries();
        series2.setLabel("Series 2");

        series2.set(1, 6);
        series2.set(2, 3);
        series2.set(3, 2);
        series2.set(4, 7);
        series2.set(5, 9);

        lineModel.addSeries(series1);
        lineModel.addSeries(series2);
    }

Code: Select all

function skinChart() {
    this.cfg.shadow = false;
    this.cfg.seriesColors = ['#dae8ef', '#27aae1'];
    this.cfg.grid = {
        background: '#f3f5f7',
        borderColor: '#e5ebf0',
        gridLineColor: '#e5ebf0',
        shadow: false
    };

    var newTickOptions = {textColor: '#9fadb5'};

    $.extend( this.cfg.axes.xaxis.tickOptions, newTickOptions );
    $.extend( this.cfg.axes.yaxis.tickOptions, newTickOptions );

    this.cfg.seriesDefaults = {
        shadow: false,
        markerOptions: {
            shadow: false
        }
    }
}

spadinha
Posts: 15
Joined: 17 Apr 2015, 00:23

01 Nov 2016, 21:04

Hello.

When I update last version from Sentinel. Charts are not more responsive.

when I collapse the left menu, charts are not reploting and losing the position.

I look the others themes and just Icarus is doing this correctly.

Anyone can help me ??

Regards...

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

15 Nov 2016, 14:47

Please add the following fix into layout.js;

Code: Select all

...
    toggleLeftMenu: function() {
        ...
        $(window).trigger('resize'); /* Please add */
    },
...

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

13 Aug 2018, 10:00

setOptions ??? Could you please attach a sample xhtml page and bean for us?

Locked

Return to “Sentinel”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests