Prime Community Forum

Posted: **08 Sep 2017, 16:52**

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

Posted: **12 Sep 2017, 15:14**

You need to add the following custom js code;

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.
Exp; lineModel1.setExtender("skinChart");

Posted: **08 Aug 2018, 20:57**

Love the photography and styling in this campaign from GAP. Its functional but beautiful.

Posted: **13 Aug 2018, 10:01**

?????????

Prime Community Forum

Graphic Styling

Graphic Styling

Re: Graphic Styling

Graphic Styling

Re: Graphic Styling