html, body, #radar2 {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

anychart.onDocumentReady(function () {

​

    // set stage

    stage = anychart.graphics.create("radar2");

​

    // set layers

​

    //for the Winter Sales chart

    layer_1 = stage.layer();

    layer_1.zIndex(80);

    //for the Spring Sales chart

    layer_2 = stage.layer();

    //for the buttons

    layer_5 = stage.layer();

    layer_5.zIndex(100);

​

    // set data for the Winter Sales

var names = ['Domestic', 'Internatinal'];

var data_1 = ['93', '7'];

var dataSet_1 = anychart.data.set(data_1);

var palette = anychart.palettes.distinctColors().items(['#64b5f6', '#1976d2']);

var makeBarWithBar = function Gauge (gauge, radius, i, width, without_stroke) {

    var stroke = '5 #e5e4e4';

    if (without_stroke) {

        stroke = null;

        gauge.label(i)

                .text(names[i] + ', <span style="color:#fff">' + data_1[i] + '%</span>')// color: #7c868e

                .useHtml(true);

        gauge.label(i)

                .hAlign('center')

                .vAlign('middle')

                .anchor('right-center')

                .padding(0, 10)

                .height(width / 5 + '%')

                .offsetY(radius + '%')

                .offsetX(0);

    }

    gauge.bar(i).dataIndex(i)

            .radius(radius)

            .width(width)

            .fill(palette.itemAt(i))

            .stroke(null)

            .zIndex(5);

    gauge.bar(i + 100).dataIndex(5)

            .radius(radius)

            .width(width)

            .fill('#ff0000')

            .stroke(stroke)

            .zIndex(4);

​

    return gauge.bar(i)

};

    var gauge = anychart.gauges.circular();

    gauge.title("Winter Sales");

    var title = gauge.title();

    title.fontColor('#fff');

    title.fontSize(18);

    title.fontWeight(600);

    gauge.padding(0, 0, 0, 0);

    gauge.data(dataSet_1);

    gauge.stroke(null);

    gauge.fill(false)

            .stroke(null)

            .padding(0)

            .margin(0)

            .startAngle(0)

            .sweepAngle(270);

​

    var axis = gauge.axis().radius(100).width(1).fill(null);

    axis.scale()

            .minimum(0)

            .maximum(100)

            .ticks({interval: 1})

            .minorTicks({interval: 1});

            axis.labels().enabled(false);

            axis.ticks().enabled(false);

            axis.minorTicks().enabled(false);

            makeBarWithBar(gauge, 100, 0, 17, true);

            makeBarWithBar(gauge, 80, 1, 17, true);

​

    gauge.container(layer_1).draw();

​

    //radar2

    // create data set on our data

    var data_2 = [

      {x:" ", value:0},

      {x:"  ", value:0},

      {x:"   ", value:0},

      {x:"    ", value:0},

      {x:"     ", value:0},

      {x:"      ", value:0},

      {x:"       ", value:0},

      {x:"        ", value:0}

    ];

    // create a chart

    var chart_2 = anychart.radar();

    // create a line series and set the data

    var series_2 = chart_2.area(data_2);

    series_2.stroke(null);

​

    chart_2.title("Porcentaje de Aplicación de Vehículos Inflados");

    var title = chart_2.title();

    title.fontColor('#fff');

    title.fontSize(18);

    title.fontWeight(600);

    chart_2.padding(50, 0, 0, 0);

    series_2.name("%");

    series_2.normal().fill('#12bcc8', 0.7);

    series_2.hovered().fill('#12bcc8', 0.9);

    series_2.selected().fill('#12bcc8', 0.7);

    series_2.normal().stroke('#12bcc8', 0.5);

    series_2.hovered().stroke('#12bcc8', 0.9);

    series_2.selected().stroke('#12bcc8', 0.7);

​

    // turn on chart animation

    chart_2.animation(true);

​

    var background = chart_2.background();

​

    background.stroke('0 #000');

    background.corners(12); 

    background.enabled(true);

    // chart credits false

    var credits = chart_2.credits();

    credits.enabled(false);

​

    // set default series type

    chart_2.defaultSeriesType('area');

​

    // force chart to stack values by Y scale.

    chart_2.yScale().stackMode();

​

    // set yAxis settings

    chart_2.yAxis().stroke('#545f69');

    chart_2.yAxis().ticks().stroke('#545f69');

​

    // set xAxis settings

    var xlabels = chart_2.xAxis().labels();

    xlabels.fontSize(10);

    // var button = document.getElementById("mostrar-clase");

    if (chart_2.requestFullscreen) {

        xlabels.enabled(true);    

    }else{

        xlabels.enabled(false);

    }

​

    // set yAxis labels settings

    chart_2.yAxis().labels()

            .fontColor('#545f69')

            .format('{%Value}%');

​

    // set yScales 

    chart_2.yScale().minimum(0).maximum(100);

​

    // set chart legend settings

    chart_2.legend().enabled(false);

​

    //set title settings

    chart_2.title().fontColor('#fff');

​

    // set container id for the chart

    chart_2.container(layer_2).draw();

});

​

function winter() {

  stage.suspend();

  layer_1.zIndex(1000000);

  layer_2.zIndex(0);

  stage.resume();

};

​

function spring() {

  stage.suspend();

  layer_1.zIndex(0);

  layer_2.zIndex(1000000);

  stage.resume();

};

​