Page 1 of 1
Theme is not appling to charts
Posted: 25 Aug 2015, 20:47
by spadinha
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.
Re: Theme is not appling to charts
Posted: 25 Aug 2015, 23:04
by mert.sincan
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
}
}
}
Re: Theme is not appling to charts
Posted: 27 Aug 2015, 18:16
by spadinha
Thanks, its working.
But Can I apply dinamically the axis x tickangle ??
regards
Re: Theme is not appling to charts
Posted: 28 Aug 2015, 14:20
by mert.sincan
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
}
}
}
Re: Theme is not appling to charts
Posted: 01 Nov 2016, 21:04
by spadinha
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...
Re: Theme is not appling to charts
Posted: 15 Nov 2016, 14:47
by mert.sincan
Please add the following fix into layout.js;
Code: Select all
...
toggleLeftMenu: function() {
...
$(window).trigger('resize'); /* Please add */
},
...
Re: Theme is not appling to charts
Posted: 13 Aug 2018, 10:00
by mert.sincan
setOptions ??? Could you please attach a sample xhtml page and bean for us?