Graphic Styling

Locked
User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

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
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

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

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");

MichaelJem
Posts: 4
Joined: 13 Jun 2018, 20:59
Location: Virgin Islands
Contact:

08 Aug 2018, 20:57

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

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

13 Aug 2018, 10:01

?????????

Locked

Return to “Atlas”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests