Graphic Styling
Hello,
I'm working with the creation of the graphics, but I can not leave them according to your example .. what do I need to do to style them to look like your demo?
Demo: https://imgsafe.org/image/2ad9732cd7
My application: https://imgsafe.org/image/2add020878
Graphic Styling
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You need to add the following custom js code;
And you need to add the above custom js method using setExtender method to model.
Exp; lineModel1.setExtender("skinChart");
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>
Exp; lineModel1.setExtender("skinChart");
Github Profile: https://github.com/mertsincan
-
- Posts: 4
- Joined: 13 Jun 2018, 20:59
- Location: Virgin Islands
- Contact:
Love the photography and styling in this campaign from GAP. Its functional but beautiful.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
?????????
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests