Code: Select all
<script type="text/javascript">
// Blue : #3E98D3 | Red : #EF3F61 | Green : #2BB673 | Orange : #F15732
function skinChart() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
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'
}
}
}
function skinBar() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinArea() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#EF3F61', '#2BB673'];
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'
}
}
}
function skinBubble() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
renderer: $.jqplot.BubbleRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinZoom() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
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'
}
}
}
function skinPie() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77',
}
};
this.cfg.seriesDefaults = {
renderer: $.jqplot.PieRenderer,
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinDonut() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77',
}
};
this.cfg.seriesDefaults = {
renderer: $.jqplot.DonutRenderer,
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinBarAndLine() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 5,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinMeterGauge() {
this.cfg.title = '';
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 5,
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
shadow: false,
min: 100,
max: 800,
intervals: [200, 300, 400, 500, 600, 700, 800],
intervalColors: ['#3E98D3', '#EF3F61', '#2BB673', '#F15732', '#3E98D3', '#EF3F61', '#2BB673']
}
}
}
function skinMultiAxis() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth:1,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
</script>
<style type="text/css">
.jqplot-target, .jqplot-axis {
color: #546E7A;
}
</style>
And you need to add the above custom js method using setExtender method to model.