• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.       min-height: 500px;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body>
    21.   <div id='myChart'></div>
    22.   <script>
    23.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    24.     var myConfig = {
    25.       graphset: [{
    26.           type: "area",
    27.           title: {
    28.             mediaRules: [{
    29.                 maxWidth: 399,
    30.                 text: "New vs. Updates",
    31.                 fontSize: 10,
    32.                 fontColor: "#fff",
    33.                 textAlign: "left",
    34.                 paddingLeft: "11%",
    35.                 backgroundColor: "#007AFF",
    36.                 height: "18%"
    37.               },
    38.               {
    39.                 minWidth: 399,
    40.                 maxWidth: 768,
    41.                 text: "Downloads vs. Updates",
    42.                 height: "20%",
    43.                 marginTop: "2%",
    44.                 fontSize: 11,
    45.                 fontColor: "#fff",
    46.                 textAlign: "center",
    47.                 backgroundColor: "#007AFF",
    48.               },
    49.               {
    50.                 minWidth: 768,
    51.                 maxWidth: 1024,
    52.                 text: "New Downloads vs. Updates",
    53.                 height: "16%",
    54.                 marginTop: "2%",
    55.                 fontSize: 12,
    56.                 textAlign: "center",
    57.                 backgroundColor: "none"
    58.               },
    59.               {
    60.                 minWidth: 1024,
    61.                 text: "New Downloads vs. Updates",
    62.                 height: "16%",
    63.                 marginTop: "2%",
    64.                 fontSize: 12,
    65.                 textAlign: "left",
    66.                 paddingLeft: "16%"
    67.               }
    68.             ]
    69.           },
    70.           subtitle: {
    71.             mediaRules: [{
    72.                 maxWidth: 399,
    73.                 visible: false
    74.               },
    75.               {
    76.                 minWidth: 399,
    77.                 maxWidth: 768,
    78.                 visible: false
    79.               },
    80.               {
    81.                 minWidth: 768,
    82.                 maxWidth: 1024,
    83.                 text: "iOS",
    84.                 fontSize: 8,
    85.                 fontColor: "#fff",
    86.                 height: "12%",
    87.                 marginTop: "18%",
    88.                 textAlign: "center",
    89.                 backgroundColor: '#007AFF'
    90.               },
    91.               {
    92.                 minWidth: 1024,
    93.                 text: "iOS",
    94.                 fontSize: 9,
    95.                 fontColor: "#fff",
    96.                 height: "13%",
    97.                 marginTop: "19%",
    98.                 textAlign: "left",
    99.                 paddingLeft: "16%",
    100.                 backgroundColor: "#007AFF",
    101.               }
    102.             ]
    103.           },
    104.           legend: {
    105.             backgroundColor: "none",
    106.             borderWidth: 0,
    107.             borderColor: "none",
    108.             shadow: 0,
    109.             toggleAction: "remove",
    110.             item: {
    111.               fontColor: "#444"
    112.             },
    113.             mediaRules: [{
    114.                 minWidth: 10,
    115.                 maxWidth: 1024,
    116.                 visible: false
    117.               },
    118.               {
    119.                 minWidth: 1024,
    120.                 align: "left",
    121.                 verticalAlign: "middle"
    122.               }
    123.             ]
    124.           },
    125.           scaleX: {
    126.             lineColor: "none",
    127.             item: {
    128.               visible: false
    129.             },
    130.             tick: {
    131.               visible: false
    132.             }
    133.           },
    134.           scaleY: {
    135.             lineColor: "none",
    136.             minValue: 0,
    137.             maxValue: 100,
    138.             item: {
    139.               visible: false
    140.             },
    141.             tick: {
    142.               visible: false
    143.             },
    144.             guide: {
    145.               visible: false
    146.             }
    147.           },
    148.           plot: {
    149.             aspect: "spline",
    150.             marker: {
    151.               visible: false
    152.             },
    153.             tooltip: {
    154.               placement: "node:top",
    155.               offsetY: 0
    156.             }
    157.           },
    158.           plotarea: {
    159.             mediaRules: [{
    160.                 maxWidth: 399,
    161.                 margin: "45% 5% 5% 5%"
    162.               },
    163.               {
    164.                 minWidth: 399,
    165.                 maxWidth: 768,
    166.                 margin: "40% 5% 5% 5%"
    167.               },
    168.               {
    169.                 minWidth: 768,
    170.                 maxWidth: 1024,
    171.                 margin: "45% 5% 10% 5%"
    172.               },
    173.               {
    174.                 minWidth: 1024,
    175.                 margin: "30% 4% 4% 4%"
    176.               }
    177.             ]
    178.           },
    179.           mediaRules: [{
    180.               maxWidth: 399,
    181.               x: 0,
    182.               y: 0,
    183.               height: "15%",
    184.               width: "50%"
    185.             },
    186.             {
    187.               minWidth: 399,
    188.               maxWidth: 768,
    189.               x: 0,
    190.               y: 0,
    191.               height: "15%",
    192.               width: "50%"
    193.             },
    194.             {
    195.               minWidth: 768,
    196.               maxWidth: 1024,
    197.               x: 0,
    198.               y: 0,
    199.               height: "20%",
    200.               width: "25%"
    201.             },
    202.             {
    203.               minWidth: 1024,
    204.               x: 0,
    205.               y: 0,
    206.               height: "20%",
    207.               width: "25%"
    208.             }
    209.           ],
    210.           series: [{
    211.               values: [35, 42, 67, 89, 25, 34, 67, 85],
    212.               lineColor: "#007AFF",
    213.               backgroundColor: "#5AC8FA",
    214.               legendText: "New",
    215.               legendMarker: {
    216.                 backgroundColor: "#007AFF"
    217.               }
    218.             },
    219.             {
    220.               values: [12, 20, 35, 61, 42, 45, 50, 61],
    221.               lineColor: "#FF2D55",
    222.               backgroundColor: "#FF3B30",
    223.               legendText: "Updates",
    224.               legendMarker: {
    225.                 backgroundColor: "#FF2D55"
    226.               }
    227.             }
    228.           ]
    229.         },
    230.         {
    231.           type: "bar",
    232.           title: {
    233.             mediaRules: [{
    234.                 maxWidth: 399,
    235.                 text: "Paid vs. Free",
    236.                 fontSize: 10,
    237.                 fontColor: "#fff",
    238.                 textAlign: "left",
    239.                 paddingLeft: "11%",
    240.                 backgroundColor: "#007AFF",
    241.                 height: "18%"
    242.               },
    243.               {
    244.                 minWidth: 399,
    245.                 maxWidth: 768,
    246.                 text: "Paid Users vs. Free",
    247.                 height: "20%",
    248.                 marginTop: "2%",
    249.                 fontSize: 11,
    250.                 fontColor: "#fff",
    251.                 textAlign: "center",
    252.                 backgroundColor: "#007AFF"
    253.               },
    254.               {
    255.                 minWidth: 768,
    256.                 maxWidth: 1024,
    257.                 text: "Paid Users vs. Free Users",
    258.                 height: "16%",
    259.                 marginTop: "2%",
    260.                 fontSize: 12,
    261.                 textAlign: "center",
    262.                 backgroundColor: "none"
    263.               },
    264.               {
    265.                 minWidth: 1024,
    266.                 text: "Paid Users vs. Free Users",
    267.                 height: "16%",
    268.                 marginTop: "2%",
    269.                 fontSize: 12,
    270.                 textAlign: "left",
    271.                 paddingLeft: "16%"
    272.               }
    273.             ]
    274.           },
    275.           subtitle: {
    276.             mediaRules: [{
    277.                 maxWidth: 399,
    278.                 visible: false
    279.               },
    280.               {
    281.                 minWidth: 399,
    282.                 maxWidth: 768,
    283.                 visible: false
    284.               },
    285.               {
    286.                 minWidth: 768,
    287.                 maxWidth: 1024,
    288.                 text: "iOS",
    289.                 fontSize: 8,
    290.                 fontColor: "#fff",
    291.                 height: "12%",
    292.                 marginTop: "18%",
    293.                 textAlign: "center",
    294.                 backgroundColor: '#007AFF'
    295.               },
    296.               {
    297.                 minWidth: 1024,
    298.                 text: "iOS",
    299.                 fontSize: 9,
    300.                 fontColor: "#fff",
    301.                 height: "13%",
    302.                 marginTop: "19%",
    303.                 textAlign: "left",
    304.                 paddingLeft: "16%",
    305.                 backgroundColor: "#007AFF"
    306.               }
    307.             ]
    308.           },
    309.           legend: {
    310.             backgroundColor: "none",
    311.             borderWidth: 0,
    312.             borderColor: "none",
    313.             shadow: 0,
    314.             toggleAction: "remove",
    315.             item: {
    316.               fontColor: "#444"
    317.             },
    318.             mediaRules: [{
    319.                 minWidth: 10,
    320.                 maxWidth: 1024,
    321.                 visible: false
    322.               },
    323.               {
    324.                 minWidth: 1024,
    325.                 align: "left",
    326.                 verticalAlign: "middle"
    327.  
    328.               }
    329.             ]
    330.           },
    331.           scaleX: {
    332.             lineColor: "none",
    333.             item: {
    334.               visible: false
    335.             },
    336.             tick: {
    337.               visible: false
    338.             }
    339.           },
    340.           scaleY: {
    341.             lineColor: "none",
    342.             minValue: 0,
    343.             maxValue: 100,
    344.             item: {
    345.               visible: false
    346.             },
    347.             tick: {
    348.               visible: false
    349.             },
    350.             guide: {
    351.               visible: false
    352.             }
    353.           },
    354.           plot: {
    355.             alpha: 0.9,
    356.             borderRadiusTopLeft: 2,
    357.             borderRadiusTopRight: 2,
    358.             tooltip: {
    359.               placement: "node:top",
    360.               offsetY: 0
    361.             }
    362.           },
    363.           plotarea: {
    364.             mediaRules: [{
    365.                 maxWidth: 399,
    366.                 margin: "45% 5% 5% 5%"
    367.               },
    368.               {
    369.                 minWidth: 399,
    370.                 maxWidth: 768,
    371.                 margin: "40% 5% 5% 5%"
    372.               },
    373.               {
    374.                 minWidth: 768,
    375.                 maxWidth: 1024,
    376.                 margin: "45% 5% 10% 5%"
    377.               },
    378.               {
    379.                 minWidth: 1024,
    380.                 margin: "30% 4% 4% 4%"
    381.               }
    382.             ]
    383.           },
    384.           mediaRules: [{
    385.               maxWidth: 399,
    386.               x: "50%",
    387.               y: 0,
    388.               height: "15%",
    389.               width: "50%"
    390.             },
    391.             {
    392.               minWidth: 399,
    393.               maxWidth: 768,
    394.               x: 0,
    395.               y: "15%",
    396.               height: "15%",
    397.               width: "50%"
    398.             },
    399.             {
    400.               minWidth: 768,
    401.               maxWidth: 1024,
    402.               x: "25%",
    403.               y: 0,
    404.               height: "20%",
    405.               width: "25%"
    406.             },
    407.             {
    408.               minWidth: 1024,
    409.               x: "25%",
    410.               y: 0,
    411.               height: "20%",
    412.               width: "25%"
    413.             }
    414.           ],
    415.           series: [{
    416.               values: [35, 42, 67, 89, 25, 34, 67, 85],
    417.               backgroundColor: "#007AFF",
    418.               legendText: "Paid"
    419.             },
    420.             {
    421.               values: [12, 20, 35, 61, 42, 45, 50, 61],
    422.               backgroundColor: "#FF2D55",
    423.               legendText: "Free"
    424.             }
    425.           ]
    426.         },
    427.         {
    428.           type: "area",
    429.           title: {
    430.             mediaRules: [{
    431.                 maxWidth: 399,
    432.                 text: "New vs. Updates",
    433.                 fontSize: 10,
    434.                 fontColor: "#fff",
    435.                 textAlign: "left",
    436.                 paddingLeft: "11%",
    437.                 backgroundColor: "#92C163",
    438.                 height: "18%"
    439.               },
    440.               {
    441.                 minWidth: 399,
    442.                 maxWidth: 768,
    443.                 text: "Downloads vs. Updates",
    444.                 height: "20%",
    445.                 marginTop: "2%",
    446.                 fontSize: 11,
    447.                 fontColor: "#fff",
    448.                 textAlign: "center",
    449.                 backgroundColor: "#92C163"
    450.               },
    451.               {
    452.                 minWidth: 768,
    453.                 maxWidth: 1024,
    454.                 text: "New Downloads vs. Updates",
    455.                 height: "16%",
    456.                 marginTop: "2%",
    457.                 fontSize: 12,
    458.                 textAlign: "center",
    459.                 backgroundColor: "none"
    460.               },
    461.               {
    462.                 minWidth: 1024,
    463.                 text: "New Downloads vs. Updates",
    464.                 height: "16%",
    465.                 marginTop: "2%",
    466.                 fontSize: 12,
    467.                 textAlign: "left",
    468.                 paddingLeft: "16%"
    469.               }
    470.             ]
    471.           },
    472.           subtitle: {
    473.             mediaRules: [{
    474.                 maxWidth: 399,
    475.                 visible: false
    476.               },
    477.               {
    478.                 minWidth: 399,
    479.                 maxWidth: 768,
    480.                 visible: false
    481.               },
    482.               {
    483.                 minWidth: 768,
    484.                 maxWidth: 1024,
    485.                 text: "Andriod",
    486.                 fontSize: 8,
    487.                 fontColor: "#fff",
    488.                 height: "12%",
    489.                 marginTop: "18%",
    490.                 textAlign: "center",
    491.                 backgroundColor: '#92C163'
    492.               },
    493.               {
    494.                 minWidth: 1024,
    495.                 fontSize: 9,
    496.                 text: "Andriod",
    497.                 fontColor: "#fff",
    498.                 height: "13%",
    499.                 marginTop: "19%",
    500.                 textAlign: "left",
    501.                 paddingLeft: "16%",
    502.                 backgroundColor: "#92C163",
    503.               }
    504.             ]
    505.           },
    506.           legend: {
    507.             backgroundColor: "none",
    508.             borderWidth: 0,
    509.             borderColor: "none",
    510.             shadow: 0,
    511.             toggleAction: "remove",
    512.             item: {
    513.               fontColor: "#444"
    514.             },
    515.             mediaRules: [{
    516.                 minWidth: 10,
    517.                 maxWidth: 1024,
    518.                 visible: false
    519.               },
    520.               {
    521.                 minWidth: 1024,
    522.                 align: "left",
    523.                 verticalAlign: "middle"
    524.               }
    525.             ]
    526.           },
    527.           scaleX: {
    528.             lineColor: "none",
    529.             item: {
    530.               visible: false
    531.             },
    532.             tick: {
    533.               visible: false
    534.             }
    535.           },
    536.           scaleY: {
    537.             lineColor: "none",
    538.             minValue: 0,
    539.             maxValue: 300,
    540.             item: {
    541.               visible: false
    542.             },
    543.             tick: {
    544.               visible: false
    545.             },
    546.             guide: {
    547.               visible: false
    548.             }
    549.           },
    550.           plot: {
    551.             aspect: "spline",
    552.             marker: {
    553.               visible: false
    554.             },
    555.             tooltip: {
    556.               placement: "node:top",
    557.               offsetY: 0
    558.             }
    559.           },
    560.           plotarea: {
    561.             backgroundColor: "#fff",
    562.             mediaRules: [{
    563.                 maxWidth: 399,
    564.                 margin: "45% 5% 5% 5%"
    565.               },
    566.               {
    567.                 minWidth: 399,
    568.                 maxWidth: 768,
    569.                 margin: "40% 5% 5% 5%"
    570.               },
    571.               {
    572.                 minWidth: 768,
    573.                 maxWidth: 1024,
    574.                 margin: "45% 5% 10% 5%"
    575.               },
    576.               {
    577.                 minWidth: 1024,
    578.                 margin: "30% 4% 4% 4%"
    579.               }
    580.             ]
    581.           },
    582.           mediaRules: [{
    583.               maxWidth: 399,
    584.               x: 0,
    585.               y: "45%",
    586.               height: "15%",
    587.               width: "50%"
    588.             },
    589.             {
    590.               minWidth: 399,
    591.               maxWidth: 768,
    592.               x: "50%",
    593.               y: 0,
    594.               height: "15%",
    595.               width: "50%"
    596.             },
    597.             {
    598.               minWidth: 768,
    599.               maxWidth: 1024,
    600.               x: "50%",
    601.               y: 0,
    602.               height: "20%",
    603.               width: "25%"
    604.             },
    605.             {
    606.               minWidth: 1024,
    607.               x: "50%",
    608.               y: 0,
    609.               height: "20%",
    610.               width: "25%"
    611.             }
    612.           ],
    613.           series: [{
    614.               values: [210, 251, 263, 235, 248, 254, 210, 199],
    615.               lineColor: "#92C163",
    616.               backgroundColor: "#92C163",
    617.               legendText: "New",
    618.               legendMarker: {
    619.                 lineColor: "#76AA38",
    620.                 backgroundColor: "#92C163",
    621.               }
    622.             },
    623.             {
    624.               values: [162, 187, 196, 140, 154, 132, 165, 141],
    625.               lineColor: '#50584C',
    626.               backgroundColor: '#50584C',
    627.               legendText: "Updates"
    628.             }
    629.           ]
    630.         },
    631.         {
    632.           type: "bar",
    633.           title: {
    634.             mediaRules: [{
    635.                 maxWidth: 399,
    636.                 text: "Paid vs. Free",
    637.                 fontSize: 10,
    638.                 fontColor: "#fff",
    639.                 textAlign: "left",
    640.                 paddingLeft: "11%",
    641.                 backgroundColor: "#90C653",
    642.                 height: "18%"
    643.               },
    644.               {
    645.                 minWidth: 399,
    646.                 maxWidth: 768,
    647.                 text: "Paid Users vs. Free",
    648.                 height: "20%",
    649.                 marginTop: "2%",
    650.                 fontSize: 11,
    651.                 fontColor: "#fff",
    652.                 textAlign: "center",
    653.                 backgroundColor: "#90C653"
    654.               },
    655.               {
    656.                 minWidth: 768,
    657.                 maxWidth: 1024,
    658.                 text: "Paid Users vs. Free Users",
    659.                 height: "16%",
    660.                 marginTop: "2%",
    661.                 fontSize: 12,
    662.                 textAlign: "center",
    663.                 backgroundColor: "none"
    664.               },
    665.               {
    666.                 minWidth: 1024,
    667.                 text: "Paid Users vs. Free Users",
    668.                 height: "16%",
    669.                 marginTop: "2%",
    670.                 fontSize: 12,
    671.                 textAlign: "left",
    672.                 paddingLeft: "16%"
    673.               }
    674.             ]
    675.           },
    676.           subtitle: {
    677.             backgroundColor: "#90C653",
    678.             mediaRules: [{
    679.                 maxWidth: 399,
    680.                 visible: false
    681.               },
    682.               {
    683.                 minWidth: 399,
    684.                 maxWidth: 768,
    685.                 visible: false
    686.               },
    687.               {
    688.                 minWidth: 768,
    689.                 maxWidth: 1024,
    690.                 text: "Andriod",
    691.                 fontSize: 8,
    692.                 fontColor: "#fff",
    693.                 height: "12%",
    694.                 marginTop: "18%",
    695.                 textAlign: "center",
    696.                 backgroundColor: '#90C653'
    697.               },
    698.               {
    699.                 minWidth: 1024,
    700.                 fontSize: 9,
    701.                 text: "Andriod",
    702.                 fontColor: "#fff",
    703.                 height: "13%",
    704.                 marginTop: "19%",
    705.                 textAlign: "left",
    706.                 paddingLeft: "16%",
    707.                 backgroundColor: "#90C653",
    708.               }
    709.             ]
    710.           },
    711.           legend: {
    712.             backgroundColor: "none",
    713.             borderWidth: 0,
    714.             borderColor: "none",
    715.             shadow: 0,
    716.             toggleAction: "remove",
    717.             item: {
    718.               fontColor: "#444"
    719.             },
    720.             mediaRules: [{
    721.                 minWidth: 10,
    722.                 maxWidth: 1024,
    723.                 visible: false
    724.               },
    725.               {
    726.                 minWidth: 1024,
    727.                 align: "left",
    728.                 verticalAlign: "middle"
    729.               }
    730.             ]
    731.           },
    732.           scaleX: {
    733.             lineColor: "none",
    734.             item: {
    735.               visible: false
    736.             },
    737.             tick: {
    738.               visible: false
    739.             }
    740.           },
    741.           scaleY: {
    742.             lineColor: "none",
    743.             minValue: 0,
    744.             maxValue: 100,
    745.             item: {
    746.               visible: false
    747.             },
    748.             tick: {
    749.               visible: false
    750.             },
    751.             guide: {
    752.               visible: false
    753.             }
    754.           },
    755.           plot: {
    756.             alpha: 0.9,
    757.             borderRadiusTopLeft: 2,
    758.             borderRadiusTopRight: 2,
    759.             tooltip: {
    760.               placement: "node:top",
    761.               offsetY: 0
    762.             }
    763.           },
    764.           plotarea: {
    765.             mediaRules: [{
    766.                 maxWidth: 399,
    767.                 margin: "45% 5% 5% 5%"
    768.               },
    769.               {
    770.                 minWidth: 399,
    771.                 maxWidth: 768,
    772.                 margin: "40% 5% 5% 5%"
    773.               },
    774.               {
    775.                 minWidth: 768,
    776.                 maxWidth: 1024,
    777.                 margin: "45% 5% 10% 5%"
    778.               },
    779.               {
    780.                 minWidth: 1024,
    781.                 margin: "30% 4% 4% 4%"
    782.               }
    783.             ]
    784.           },
    785.           mediaRules: [{
    786.               maxWidth: 399,
    787.               x: "50%",
    788.               y: "45%",
    789.               height: "15%",
    790.               width: "50%"
    791.             },
    792.             {
    793.               minWidth: 399,
    794.               maxWidth: 768,
    795.               x: "50%",
    796.               y: "15%",
    797.               height: "15%",
    798.               width: "50%"
    799.             },
    800.             {
    801.               minWidth: 768,
    802.               maxWidth: 1024,
    803.               x: "75%",
    804.               y: 0,
    805.               height: "20%",
    806.               width: "25%"
    807.             },
    808.             {
    809.               minWidth: 1024,
    810.               x: "75%",
    811.               y: 0,
    812.               height: "20%",
    813.               width: "25%"
    814.             }
    815.           ],
    816.           series: [{
    817.               values: [35, 42, 67, 89, 25, 34, 67, 85],
    818.               backgroundColor: "#76AA38",
    819.               lineColor: "#76AA38",
    820.               legendText: "Paid"
    821.             },
    822.             {
    823.               values: [35, 42, 67, 89, 25, 34, 67, 85],
    824.               backgroundColor: "#50584C",
    825.               lineColor: "#50584C",
    826.               legendText: "Free"
    827.             }
    828.           ]
    829.         },
    830.         {
    831.           type: "bar",
    832.           mediaRules: [{
    833.               maxWidth: 399,
    834.               x: 0,
    835.               y: "15%",
    836.               height: "30%",
    837.               width: "100%"
    838.             },
    839.             {
    840.               minWidth: 399,
    841.               maxWidth: 768,
    842.               x: 0,
    843.               y: "30%",
    844.               height: "40%",
    845.               width: "50%"
    846.             },
    847.             {
    848.               minWidth: 768,
    849.               maxWidth: 1024,
    850.               x: 0,
    851.               y: "20%",
    852.               height: "45%",
    853.               width: "50%"
    854.             },
    855.             {
    856.               minWidth: 1024,
    857.               x: 0,
    858.               y: "20%",
    859.               height: "45%",
    860.               width: "50%"
    861.             }
    862.           ],
    863.           title: {
    864.             mediaRules: [{
    865.                 maxWidth: 399,
    866.                 text: "Top 3 Phone Models",
    867.                 fontSize: 12,
    868.                 fontColor: "#fff",
    869.                 textAlign: "left",
    870.                 paddingLeft: "11%",
    871.                 backgroundColor: "#007AFF",
    872.                 height: "13%"
    873.               },
    874.               {
    875.                 minWidth: 399,
    876.                 maxWidth: 768,
    877.                 text: "Top 3",
    878.                 fontSize: 12,
    879.                 fontColor: "#fff",
    880.                 textAlign: "center",
    881.                 paddingLeft: "11%",
    882.                 backgroundColor: "#007AFF",
    883.                 height: "9%"
    884.               },
    885.               {
    886.                 minWidth: 768,
    887.                 maxWidth: 1024,
    888.                 text: "Top 3 Phone Models",
    889.                 fontSize: 12,
    890.                 textAlign: "center",
    891.                 paddingLeft: "11%",
    892.                 backgroundColor: "none",
    893.                 height: "8%"
    894.               },
    895.               {
    896.                 minWidth: 1024,
    897.                 text: "Top 3 Phone Models",
    898.                 fontSize: 12,
    899.                 textAlign: "left",
    900.                 paddingLeft: "11%",
    901.                 backgroundColor: "none",
    902.                 height: "8%"
    903.               }
    904.             ]
    905.           },
    906.           subtitle: {
    907.             mediaRules: [{
    908.                 maxWidth: 399,
    909.                 visible: false
    910.               },
    911.               {
    912.                 minWidth: 399,
    913.                 maxWidth: 768,
    914.                 visible: false
    915.               },
    916.               {
    917.                 minWidth: 768,
    918.                 maxWidth: 1024,
    919.                 text: " ",
    920.                 backgroundColor: '#007AFF',
    921.                 height: "5%",
    922.                 marginTop: "8%"
    923.               },
    924.               {
    925.                 minWidth: 1024,
    926.                 fontSize: 9,
    927.                 text: " ",
    928.                 backgroundColor: '#007AFF',
    929.                 height: "5%",
    930.                 marginTop: "8%"
    931.               }
    932.             ]
    933.           },
    934.           plotarea: {
    935.             mediaRules: [{
    936.                 maxWidth: 399,
    937.                 margin: "20% 5% 20% 10%"
    938.               },
    939.               {
    940.                 minWidth: 399,
    941.                 maxWidth: 768,
    942.                 margin: "15% 5% 20% 15%"
    943.               },
    944.               {
    945.                 minWidth: 768,
    946.                 maxWidth: 1024,
    947.                 margin: "20% 3% 18% 8%"
    948.               },
    949.               {
    950.                 minWidth: 1024,
    951.                 margin: "20% 3% 18% 8%"
    952.               }
    953.             ],
    954.           },
    955.           plot: {
    956.             alpha: 0.9,
    957.             borderRadiusTopLeft: 2,
    958.             borderRadiusTopRight: 2,
    959.             valueBox: {
    960.               placement: "top-in",
    961.               fontColor: "#fff",
    962.               text: "%t"
    963.             },
    964.             tooltip: {
    965.               placement: "node:top",
    966.               offsetY: -5
    967.             }
    968.           },
    969.           scaleX: {
    970.             labels: ["Septemer 2016"],
    971.             item: {
    972.               fontColor: "#333"
    973.             }
    974.           },
    975.           scaleY: {
    976.             multiplier: true,
    977.             step: 2500,
    978.             guide: {
    979.               lineStyle: "solid"
    980.             }
    981.           },
    982.           series: [{
    983.               values: [6845],
    984.               backgroundColor: "#007AFF",
    985.               text: "iPhone<br>6"
    986.             },
    987.             {
    988.               values: [8954],
    989.               backgroundColor: "#FF2D55",
    990.               text: "iPhone<br>6s"
    991.             },
    992.             {
    993.               values: [4251],
    994.               backgroundColor: "#5856D6",
    995.               text: "iPhone<br>7"
    996.             }
    997.           ]
    998.         },
    999.         {
    1000.           type: "bar",
    1001.           mediaRules: [{
    1002.               maxWidth: 399,
    1003.               x: 0,
    1004.               y: "60%",
    1005.               height: "30%",
    1006.               width: "100%"
    1007.             },
    1008.             {
    1009.               minWidth: 399,
    1010.               maxWidth: 768,
    1011.               x: "50%",
    1012.               y: "30%",
    1013.               height: "40%",
    1014.               width: "50%"
    1015.             },
    1016.             {
    1017.               minWidth: 768,
    1018.               maxWidth: 1024,
    1019.               x: "50%",
    1020.               y: "20%",
    1021.               height: "45%",
    1022.               width: "50%"
    1023.             },
    1024.             {
    1025.               minWidth: 1024,
    1026.               x: "50%",
    1027.               y: "20%",
    1028.               height: "45%",
    1029.               width: "50%"
    1030.             }
    1031.           ],
    1032.           title: {
    1033.             mediaRules: [{
    1034.                 maxWidth: 399,
    1035.                 text: "Top 3 Phone Models",
    1036.                 fontSize: 12,
    1037.                 fontColor: "#fff",
    1038.                 textAlign: "left",
    1039.                 paddingLeft: "11%",
    1040.                 backgroundColor: "#90C653",
    1041.                 height: "13%"
    1042.               },
    1043.               {
    1044.                 minWidth: 399,
    1045.                 maxWidth: 768,
    1046.                 text: "Top 3",
    1047.                 fontSize: 12,
    1048.                 fontColor: "#fff",
    1049.                 textAlign: "center",
    1050.                 paddingLeft: "11%",
    1051.                 backgroundColor: "#90C653",
    1052.                 height: "9%"
    1053.               },
    1054.               {
    1055.                 minWidth: 768,
    1056.                 maxWidth: 1024,
    1057.                 text: "Top 3 Phone Models",
    1058.                 fontSize: 12,
    1059.                 textAlign: "center",
    1060.                 paddingLeft: "11%",
    1061.                 backgroundColor: "none",
    1062.                 height: "8%"
    1063.               },
    1064.               {
    1065.                 minWidth: 1024,
    1066.                 text: "Top 3 Phone Models",
    1067.                 fontSize: 12,
    1068.                 textAlign: "left",
    1069.                 paddingLeft: "11%",
    1070.                 backgroundColor: "none",
    1071.                 height: "8%"
    1072.               }
    1073.             ]
    1074.           },
    1075.           subtitle: {
    1076.             mediaRules: [{
    1077.                 maxWidth: 399,
    1078.                 visible: false
    1079.               },
    1080.               {
    1081.                 minWidth: 399,
    1082.                 maxWidth: 768,
    1083.                 visible: false
    1084.               },
    1085.               {
    1086.                 minWidth: 768,
    1087.                 maxWidth: 1024,
    1088.                 text: " ",
    1089.                 backgroundColor: '#90C653',
    1090.                 height: "5%",
    1091.                 marginTop: "8%"
    1092.               },
    1093.               {
    1094.                 minWidth: 1024,
    1095.                 fontSize: 9,
    1096.                 text: " ",
    1097.                 backgroundColor: '#90C653',
    1098.                 height: "5%",
    1099.                 marginTop: "8%"
    1100.               }
    1101.             ]
    1102.           },
    1103.           plotarea: {
    1104.             mediaRules: [{
    1105.                 maxWidth: 399,
    1106.                 margin: "20% 5% 20% 10%"
    1107.               },
    1108.               {
    1109.                 minWidth: 399,
    1110.                 maxWidth: 768,
    1111.                 margin: "15% 5% 20% 15%"
    1112.               },
    1113.               {
    1114.                 minWidth: 768,
    1115.                 maxWidth: 1024,
    1116.                 margin: "20% 3% 18% 8%"
    1117.               },
    1118.               {
    1119.                 minWidth: 1024,
    1120.                 margin: "20% 3% 18% 8%"
    1121.               }
    1122.             ],
    1123.           },
    1124.           plot: {
    1125.             alpha: 0.9,
    1126.             borderRadiusTopLeft: 2,
    1127.             borderRadiusTopRight: 2,
    1128.             valueBox: {
    1129.               placement: "top-in",
    1130.               fontColor: "#fff",
    1131.               text: "%t"
    1132.             },
    1133.             tooltip: {
    1134.               placement: "node:top",
    1135.               offsetY: -5
    1136.             }
    1137.           },
    1138.           scaleX: {
    1139.             labels: ["Septemer 2016"],
    1140.             item: {
    1141.               fontColor: "#333"
    1142.             }
    1143.           },
    1144.           scaleY: {
    1145.             multiplier: true,
    1146.             step: 1000,
    1147.             guide: {
    1148.               lineStyle: "solid"
    1149.             }
    1150.           },
    1151.           series: [{
    1152.               values: [3425],
    1153.               backgroundColor: "#76AA38",
    1154.               text: "Galaxy<br>Note 5"
    1155.             },
    1156.             {
    1157.               values: [2921],
    1158.               backgroundColor: "#50584C",
    1159.               text: "Galaxy<br>S6"
    1160.             },
    1161.             {
    1162.               values: [2745],
    1163.               backgroundColor: "#FFC208",
    1164.               text: "Galaxy<br>S7"
    1165.             }
    1166.           ]
    1167.         },
    1168.         {
    1169.           type: "null",
    1170.           title: {
    1171.             mediaRules: [{
    1172.                 maxWidth: 399,
    1173.                 text: "Limited Mobile View",
    1174.                 fontColor: "#333",
    1175.                 backgroundColor: "#ccc"
    1176.               },
    1177.               {
    1178.                 minWidth: 399,
    1179.                 text: "",
    1180.                 fontColor: "none"
    1181.               },
    1182.               {
    1183.                 minWidth: 768,
    1184.                 maxWidth: 1024,
    1185.                 text: "",
    1186.                 fontColor: "none"
    1187.               },
    1188.               {
    1189.                 minWidth: 1024,
    1190.                 text: "",
    1191.                 fontColor: "none"
    1192.               }
    1193.             ]
    1194.           },
    1195.           mediaRules: [{
    1196.               maxWidth: 399,
    1197.               x: 0,
    1198.               y: "90%",
    1199.               height: "10%",
    1200.               width: "100%"
    1201.             },
    1202.             {
    1203.               minWidth: 399,
    1204.               maxWidth: 768,
    1205.               height: 0,
    1206.               width: 0
    1207.             },
    1208.             {
    1209.               minWidth: 768,
    1210.               maxWidth: 1024,
    1211.               height: 0,
    1212.               width: 0
    1213.             },
    1214.             {
    1215.               minWidth: 1024,
    1216.               height: 0,
    1217.               width: 0
    1218.             }
    1219.           ],
    1220.         },
    1221.         {
    1222.           type: "gauge",
    1223.           backgroundColor: "#007AFF",
    1224.           mediaRules: [{
    1225.               maxWidth: 399,
    1226.               x: -200,
    1227.               y: -200,
    1228.               height: 0,
    1229.               width: 0
    1230.             },
    1231.             {
    1232.               minWidth: 399,
    1233.               maxWidth: 768,
    1234.               x: 0,
    1235.               y: "70%",
    1236.               height: "30%",
    1237.               width: "50%"
    1238.             },
    1239.             {
    1240.               minWidth: 768,
    1241.               maxWidth: 1024,
    1242.               x: 0,
    1243.               y: "65%",
    1244.               height: "35%",
    1245.               width: "50%"
    1246.             },
    1247.             {
    1248.               minWidth: 1024,
    1249.               x: 0,
    1250.               y: "65%",
    1251.               height: "35%",
    1252.               width: "50%"
    1253.             }
    1254.           ],
    1255.           scaleR: {
    1256.             step: 5,
    1257.             center: {
    1258.               size: 6,
    1259.               backgroundColor: "#fff",
    1260.               borderColor: "#007AFF"
    1261.             },
    1262.             ring: {
    1263.               backgroundColor: "#FF2D55",
    1264.               size: 4
    1265.             },
    1266.             markers: [{
    1267.               type: "area",
    1268.               range: [0, 0],
    1269.               backgroundColor: "#FF2D55"
    1270.             }],
    1271.             tick: {
    1272.               placement: "out",
    1273.               lineColor: "#333",
    1274.               size: 5
    1275.             },
    1276.             guide: {
    1277.               lineColor: "#d8d6d6",
    1278.               lineWidth: 1,
    1279.               lineStyle: "solid"
    1280.             },
    1281.             item: {
    1282.               offsetR: -3,
    1283.               fontColor: "#fff"
    1284.             }
    1285.           },
    1286.           plot: {
    1287.             csize: 6,
    1288.             borderWidth: 0
    1289.           },
    1290.           scale: {
    1291.             sizeFactor: 1.1
    1292.           },
    1293.           series: [{
    1294.               values: [6],
    1295.               text: "iPhone 6",
    1296.               backgroundColor: "#007AFF",
    1297.               tooltip: {
    1298.                 backgroundColor: "#007AFF"
    1299.               }
    1300.             },
    1301.             {
    1302.               values: [14],
    1303.               text: "iPhone 6s",
    1304.               backgroundColor: "#FF2D55",
    1305.               tooltip: {
    1306.                 backgroundColor: "#FF2D55"
    1307.               }
    1308.             },
    1309.             {
    1310.               values: [21],
    1311.               text: "iPhone 7",
    1312.               backgroundColor: "#5856D6",
    1313.               tooltip: {
    1314.                 backgroundColor: "#5856D6"
    1315.               }
    1316.             }
    1317.           ]
    1318.         },
    1319.         {
    1320.           type: "gauge",
    1321.           backgroundColor: "#92C163",
    1322.           mediaRules: [{
    1323.               maxWidth: 399,
    1324.               x: -200,
    1325.               y: -200,
    1326.               height: 0,
    1327.               width: 0
    1328.             },
    1329.             {
    1330.               minWidth: 399,
    1331.               maxWidth: 768,
    1332.               x: "50%",
    1333.               y: "70%",
    1334.               height: "30%",
    1335.               width: "50%"
    1336.             },
    1337.             {
    1338.               minWidth: 768,
    1339.               maxWidth: 1024,
    1340.               x: "50%",
    1341.               y: "65%",
    1342.               height: "35%",
    1343.               width: "50%"
    1344.             },
    1345.             {
    1346.               minWidth: 1024,
    1347.               x: "50%",
    1348.               y: "65%",
    1349.               height: "35%",
    1350.               width: "50%"
    1351.             }
    1352.           ],
    1353.           scaleR: {
    1354.             step: 5,
    1355.             center: {
    1356.               size: 6,
    1357.               backgroundColor: "#fff",
    1358.               borderColor: "#84B34C"
    1359.             },
    1360.             ring: {
    1361.               backgroundColor: "#50584C",
    1362.               size: 4
    1363.             },
    1364.             markers: [{
    1365.               type: "area",
    1366.               range: [0, 0],
    1367.               backgroundColor: "#50584C",
    1368.               alpha: 0.9
    1369.             }],
    1370.             tick: {
    1371.               placement: "out",
    1372.               lineColor: "#333",
    1373.               size: 5
    1374.             },
    1375.             guide: {
    1376.               lineColor: "#d8d6d6",
    1377.               lineWidth: 1,
    1378.               lineStyle: "solid"
    1379.             },
    1380.             item: {
    1381.               offsetR: -3,
    1382.               fontColor: "#fff"
    1383.             }
    1384.           },
    1385.           plot: {
    1386.             csize: 5,
    1387.             borderWidth: 0
    1388.           },
    1389.           scale: {
    1390.             sizeFactor: 1.1
    1391.           },
    1392.           series: [{
    1393.               values: [10],
    1394.               backgroundColor: "#84B34C",
    1395.               tooltip: {
    1396.                 backgroundColor: "#84B34C"
    1397.               }
    1398.             },
    1399.             {
    1400.               values: [15],
    1401.               backgroundColor: "#50584C",
    1402.               tooltip: {
    1403.                 backgroundColor: "#50584C"
    1404.               }
    1405.             },
    1406.             {
    1407.               values: [17],
    1408.               backgroundColor: "#FFC208",
    1409.               tooltip: {
    1410.                 backgroundColor: "#FFC208"
    1411.               }
    1412.             }
    1413.           ]
    1414.         }
    1415.       ]
    1416.     };
    1417.  
    1418.     zingchart.render({
    1419.       id: 'myChart',
    1420.       data: myConfig,
    1421.       height: '500', //update to 100%
    1422.       width: '100%'
    1423.     });
    1424.   </script>
    1425. </body>
    1426.  
    1427. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6.   min-height: 500px;
    7. }
    1. var myConfig = {
    2.   graphset: [{
    3.       type: "area",
    4.       title: {
    5.         mediaRules: [{
    6.             maxWidth: 399,
    7.             text: "New vs. Updates",
    8.             fontSize: 10,
    9.             fontColor: "#fff",
    10.             textAlign: "left",
    11.             paddingLeft: "11%",
    12.             backgroundColor: "#007AFF",
    13.             height: "18%"
    14.           },
    15.           {
    16.             minWidth: 399,
    17.             maxWidth: 768,
    18.             text: "Downloads vs. Updates",
    19.             height: "20%",
    20.             marginTop: "2%",
    21.             fontSize: 11,
    22.             fontColor: "#fff",
    23.             textAlign: "center",
    24.             backgroundColor: "#007AFF",
    25.           },
    26.           {
    27.             minWidth: 768,
    28.             maxWidth: 1024,
    29.             text: "New Downloads vs. Updates",
    30.             height: "16%",
    31.             marginTop: "2%",
    32.             fontSize: 12,
    33.             textAlign: "center",
    34.             backgroundColor: "none"
    35.           },
    36.           {
    37.             minWidth: 1024,
    38.             text: "New Downloads vs. Updates",
    39.             height: "16%",
    40.             marginTop: "2%",
    41.             fontSize: 12,
    42.             textAlign: "left",
    43.             paddingLeft: "16%"
    44.           }
    45.         ]
    46.       },
    47.       subtitle: {
    48.         mediaRules: [{
    49.             maxWidth: 399,
    50.             visible: false
    51.           },
    52.           {
    53.             minWidth: 399,
    54.             maxWidth: 768,
    55.             visible: false
    56.           },
    57.           {
    58.             minWidth: 768,
    59.             maxWidth: 1024,
    60.             text: "iOS",
    61.             fontSize: 8,
    62.             fontColor: "#fff",
    63.             height: "12%",
    64.             marginTop: "18%",
    65.             textAlign: "center",
    66.             backgroundColor: '#007AFF'
    67.           },
    68.           {
    69.             minWidth: 1024,
    70.             text: "iOS",
    71.             fontSize: 9,
    72.             fontColor: "#fff",
    73.             height: "13%",
    74.             marginTop: "19%",
    75.             textAlign: "left",
    76.             paddingLeft: "16%",
    77.             backgroundColor: "#007AFF",
    78.           }
    79.         ]
    80.       },
    81.       legend: {
    82.         backgroundColor: "none",
    83.         borderWidth: 0,
    84.         borderColor: "none",
    85.         shadow: 0,
    86.         toggleAction: "remove",
    87.         item: {
    88.           fontColor: "#444"
    89.         },
    90.         mediaRules: [{
    91.             minWidth: 10,
    92.             maxWidth: 1024,
    93.             visible: false
    94.           },
    95.           {
    96.             minWidth: 1024,
    97.             align: "left",
    98.             verticalAlign: "middle"
    99.           }
    100.         ]
    101.       },
    102.       scaleX: {
    103.         lineColor: "none",
    104.         item: {
    105.           visible: false
    106.         },
    107.         tick: {
    108.           visible: false
    109.         }
    110.       },
    111.       scaleY: {
    112.         lineColor: "none",
    113.         minValue: 0,
    114.         maxValue: 100,
    115.         item: {
    116.           visible: false
    117.         },
    118.         tick: {
    119.           visible: false
    120.         },
    121.         guide: {
    122.           visible: false
    123.         }
    124.       },
    125.       plot: {
    126.         aspect: "spline",
    127.         marker: {
    128.           visible: false
    129.         },
    130.         tooltip: {
    131.           placement: "node:top",
    132.           offsetY: 0
    133.         }
    134.       },
    135.       plotarea: {
    136.         mediaRules: [{
    137.             maxWidth: 399,
    138.             margin: "45% 5% 5% 5%"
    139.           },
    140.           {
    141.             minWidth: 399,
    142.             maxWidth: 768,
    143.             margin: "40% 5% 5% 5%"
    144.           },
    145.           {
    146.             minWidth: 768,
    147.             maxWidth: 1024,
    148.             margin: "45% 5% 10% 5%"
    149.           },
    150.           {
    151.             minWidth: 1024,
    152.             margin: "30% 4% 4% 4%"
    153.           }
    154.         ]
    155.       },
    156.       mediaRules: [{
    157.           maxWidth: 399,
    158.           x: 0,
    159.           y: 0,
    160.           height: "15%",
    161.           width: "50%"
    162.         },
    163.         {
    164.           minWidth: 399,
    165.           maxWidth: 768,
    166.           x: 0,
    167.           y: 0,
    168.           height: "15%",
    169.           width: "50%"
    170.         },
    171.         {
    172.           minWidth: 768,
    173.           maxWidth: 1024,
    174.           x: 0,
    175.           y: 0,
    176.           height: "20%",
    177.           width: "25%"
    178.         },
    179.         {
    180.           minWidth: 1024,
    181.           x: 0,
    182.           y: 0,
    183.           height: "20%",
    184.           width: "25%"
    185.         }
    186.       ],
    187.       series: [{
    188.           values: [35, 42, 67, 89, 25, 34, 67, 85],
    189.           lineColor: "#007AFF",
    190.           backgroundColor: "#5AC8FA",
    191.           legendText: "New",
    192.           legendMarker: {
    193.             backgroundColor: "#007AFF"
    194.           }
    195.         },
    196.         {
    197.           values: [12, 20, 35, 61, 42, 45, 50, 61],
    198.           lineColor: "#FF2D55",
    199.           backgroundColor: "#FF3B30",
    200.           legendText: "Updates",
    201.           legendMarker: {
    202.             backgroundColor: "#FF2D55"
    203.           }
    204.         }
    205.       ]
    206.     },
    207.     {
    208.       type: "bar",
    209.       title: {
    210.         mediaRules: [{
    211.             maxWidth: 399,
    212.             text: "Paid vs. Free",
    213.             fontSize: 10,
    214.             fontColor: "#fff",
    215.             textAlign: "left",
    216.             paddingLeft: "11%",
    217.             backgroundColor: "#007AFF",
    218.             height: "18%"
    219.           },
    220.           {
    221.             minWidth: 399,
    222.             maxWidth: 768,
    223.             text: "Paid Users vs. Free",
    224.             height: "20%",
    225.             marginTop: "2%",
    226.             fontSize: 11,
    227.             fontColor: "#fff",
    228.             textAlign: "center",
    229.             backgroundColor: "#007AFF"
    230.           },
    231.           {
    232.             minWidth: 768,
    233.             maxWidth: 1024,
    234.             text: "Paid Users vs. Free Users",
    235.             height: "16%",
    236.             marginTop: "2%",
    237.             fontSize: 12,
    238.             textAlign: "center",
    239.             backgroundColor: "none"
    240.           },
    241.           {
    242.             minWidth: 1024,
    243.             text: "Paid Users vs. Free Users",
    244.             height: "16%",
    245.             marginTop: "2%",
    246.             fontSize: 12,
    247.             textAlign: "left",
    248.             paddingLeft: "16%"
    249.           }
    250.         ]
    251.       },
    252.       subtitle: {
    253.         mediaRules: [{
    254.             maxWidth: 399,
    255.             visible: false
    256.           },
    257.           {
    258.             minWidth: 399,
    259.             maxWidth: 768,
    260.             visible: false
    261.           },
    262.           {
    263.             minWidth: 768,
    264.             maxWidth: 1024,
    265.             text: "iOS",
    266.             fontSize: 8,
    267.             fontColor: "#fff",
    268.             height: "12%",
    269.             marginTop: "18%",
    270.             textAlign: "center",
    271.             backgroundColor: '#007AFF'
    272.           },
    273.           {
    274.             minWidth: 1024,
    275.             text: "iOS",
    276.             fontSize: 9,
    277.             fontColor: "#fff",
    278.             height: "13%",
    279.             marginTop: "19%",
    280.             textAlign: "left",
    281.             paddingLeft: "16%",
    282.             backgroundColor: "#007AFF"
    283.           }
    284.         ]
    285.       },
    286.       legend: {
    287.         backgroundColor: "none",
    288.         borderWidth: 0,
    289.         borderColor: "none",
    290.         shadow: 0,
    291.         toggleAction: "remove",
    292.         item: {
    293.           fontColor: "#444"
    294.         },
    295.         mediaRules: [{
    296.             minWidth: 10,
    297.             maxWidth: 1024,
    298.             visible: false
    299.           },
    300.           {
    301.             minWidth: 1024,
    302.             align: "left",
    303.             verticalAlign: "middle"
    304.  
    305.           }
    306.         ]
    307.       },
    308.       scaleX: {
    309.         lineColor: "none",
    310.         item: {
    311.           visible: false
    312.         },
    313.         tick: {
    314.           visible: false
    315.         }
    316.       },
    317.       scaleY: {
    318.         lineColor: "none",
    319.         minValue: 0,
    320.         maxValue: 100,
    321.         item: {
    322.           visible: false
    323.         },
    324.         tick: {
    325.           visible: false
    326.         },
    327.         guide: {
    328.           visible: false
    329.         }
    330.       },
    331.       plot: {
    332.         alpha: 0.9,
    333.         borderRadiusTopLeft: 2,
    334.         borderRadiusTopRight: 2,
    335.         tooltip: {
    336.           placement: "node:top",
    337.           offsetY: 0
    338.         }
    339.       },
    340.       plotarea: {
    341.         mediaRules: [{
    342.             maxWidth: 399,
    343.             margin: "45% 5% 5% 5%"
    344.           },
    345.           {
    346.             minWidth: 399,
    347.             maxWidth: 768,
    348.             margin: "40% 5% 5% 5%"
    349.           },
    350.           {
    351.             minWidth: 768,
    352.             maxWidth: 1024,
    353.             margin: "45% 5% 10% 5%"
    354.           },
    355.           {
    356.             minWidth: 1024,
    357.             margin: "30% 4% 4% 4%"
    358.           }
    359.         ]
    360.       },
    361.       mediaRules: [{
    362.           maxWidth: 399,
    363.           x: "50%",
    364.           y: 0,
    365.           height: "15%",
    366.           width: "50%"
    367.         },
    368.         {
    369.           minWidth: 399,
    370.           maxWidth: 768,
    371.           x: 0,
    372.           y: "15%",
    373.           height: "15%",
    374.           width: "50%"
    375.         },
    376.         {
    377.           minWidth: 768,
    378.           maxWidth: 1024,
    379.           x: "25%",
    380.           y: 0,
    381.           height: "20%",
    382.           width: "25%"
    383.         },
    384.         {
    385.           minWidth: 1024,
    386.           x: "25%",
    387.           y: 0,
    388.           height: "20%",
    389.           width: "25%"
    390.         }
    391.       ],
    392.       series: [{
    393.           values: [35, 42, 67, 89, 25, 34, 67, 85],
    394.           backgroundColor: "#007AFF",
    395.           legendText: "Paid"
    396.         },
    397.         {
    398.           values: [12, 20, 35, 61, 42, 45, 50, 61],
    399.           backgroundColor: "#FF2D55",
    400.           legendText: "Free"
    401.         }
    402.       ]
    403.     },
    404.     {
    405.       type: "area",
    406.       title: {
    407.         mediaRules: [{
    408.             maxWidth: 399,
    409.             text: "New vs. Updates",
    410.             fontSize: 10,
    411.             fontColor: "#fff",
    412.             textAlign: "left",
    413.             paddingLeft: "11%",
    414.             backgroundColor: "#92C163",
    415.             height: "18%"
    416.           },
    417.           {
    418.             minWidth: 399,
    419.             maxWidth: 768,
    420.             text: "Downloads vs. Updates",
    421.             height: "20%",
    422.             marginTop: "2%",
    423.             fontSize: 11,
    424.             fontColor: "#fff",
    425.             textAlign: "center",
    426.             backgroundColor: "#92C163"
    427.           },
    428.           {
    429.             minWidth: 768,
    430.             maxWidth: 1024,
    431.             text: "New Downloads vs. Updates",
    432.             height: "16%",
    433.             marginTop: "2%",
    434.             fontSize: 12,
    435.             textAlign: "center",
    436.             backgroundColor: "none"
    437.           },
    438.           {
    439.             minWidth: 1024,
    440.             text: "New Downloads vs. Updates",
    441.             height: "16%",
    442.             marginTop: "2%",
    443.             fontSize: 12,
    444.             textAlign: "left",
    445.             paddingLeft: "16%"
    446.           }
    447.         ]
    448.       },
    449.       subtitle: {
    450.         mediaRules: [{
    451.             maxWidth: 399,
    452.             visible: false
    453.           },
    454.           {
    455.             minWidth: 399,
    456.             maxWidth: 768,
    457.             visible: false
    458.           },
    459.           {
    460.             minWidth: 768,
    461.             maxWidth: 1024,
    462.             text: "Andriod",
    463.             fontSize: 8,
    464.             fontColor: "#fff",
    465.             height: "12%",
    466.             marginTop: "18%",
    467.             textAlign: "center",
    468.             backgroundColor: '#92C163'
    469.           },
    470.           {
    471.             minWidth: 1024,
    472.             fontSize: 9,
    473.             text: "Andriod",
    474.             fontColor: "#fff",
    475.             height: "13%",
    476.             marginTop: "19%",
    477.             textAlign: "left",
    478.             paddingLeft: "16%",
    479.             backgroundColor: "#92C163",
    480.           }
    481.         ]
    482.       },
    483.       legend: {
    484.         backgroundColor: "none",
    485.         borderWidth: 0,
    486.         borderColor: "none",
    487.         shadow: 0,
    488.         toggleAction: "remove",
    489.         item: {
    490.           fontColor: "#444"
    491.         },
    492.         mediaRules: [{
    493.             minWidth: 10,
    494.             maxWidth: 1024,
    495.             visible: false
    496.           },
    497.           {
    498.             minWidth: 1024,
    499.             align: "left",
    500.             verticalAlign: "middle"
    501.           }
    502.         ]
    503.       },
    504.       scaleX: {
    505.         lineColor: "none",
    506.         item: {
    507.           visible: false
    508.         },
    509.         tick: {
    510.           visible: false
    511.         }
    512.       },
    513.       scaleY: {
    514.         lineColor: "none",
    515.         minValue: 0,
    516.         maxValue: 300,
    517.         item: {
    518.           visible: false
    519.         },
    520.         tick: {
    521.           visible: false
    522.         },
    523.         guide: {
    524.           visible: false
    525.         }
    526.       },
    527.       plot: {
    528.         aspect: "spline",
    529.         marker: {
    530.           visible: false
    531.         },
    532.         tooltip: {
    533.           placement: "node:top",
    534.           offsetY: 0
    535.         }
    536.       },
    537.       plotarea: {
    538.         backgroundColor: "#fff",
    539.         mediaRules: [{
    540.             maxWidth: 399,
    541.             margin: "45% 5% 5% 5%"
    542.           },
    543.           {
    544.             minWidth: 399,
    545.             maxWidth: 768,
    546.             margin: "40% 5% 5% 5%"
    547.           },
    548.           {
    549.             minWidth: 768,
    550.             maxWidth: 1024,
    551.             margin: "45% 5% 10% 5%"
    552.           },
    553.           {
    554.             minWidth: 1024,
    555.             margin: "30% 4% 4% 4%"
    556.           }
    557.         ]
    558.       },
    559.       mediaRules: [{
    560.           maxWidth: 399,
    561.           x: 0,
    562.           y: "45%",
    563.           height: "15%",
    564.           width: "50%"
    565.         },
    566.         {
    567.           minWidth: 399,
    568.           maxWidth: 768,
    569.           x: "50%",
    570.           y: 0,
    571.           height: "15%",
    572.           width: "50%"
    573.         },
    574.         {
    575.           minWidth: 768,
    576.           maxWidth: 1024,
    577.           x: "50%",
    578.           y: 0,
    579.           height: "20%",
    580.           width: "25%"
    581.         },
    582.         {
    583.           minWidth: 1024,
    584.           x: "50%",
    585.           y: 0,
    586.           height: "20%",
    587.           width: "25%"
    588.         }
    589.       ],
    590.       series: [{
    591.           values: [210, 251, 263, 235, 248, 254, 210, 199],
    592.           lineColor: "#92C163",
    593.           backgroundColor: "#92C163",
    594.           legendText: "New",
    595.           legendMarker: {
    596.             lineColor: "#76AA38",
    597.             backgroundColor: "#92C163",
    598.           }
    599.         },
    600.         {
    601.           values: [162, 187, 196, 140, 154, 132, 165, 141],
    602.           lineColor: '#50584C',
    603.           backgroundColor: '#50584C',
    604.           legendText: "Updates"
    605.         }
    606.       ]
    607.     },
    608.     {
    609.       type: "bar",
    610.       title: {
    611.         mediaRules: [{
    612.             maxWidth: 399,
    613.             text: "Paid vs. Free",
    614.             fontSize: 10,
    615.             fontColor: "#fff",
    616.             textAlign: "left",
    617.             paddingLeft: "11%",
    618.             backgroundColor: "#90C653",
    619.             height: "18%"
    620.           },
    621.           {
    622.             minWidth: 399,
    623.             maxWidth: 768,
    624.             text: "Paid Users vs. Free",
    625.             height: "20%",
    626.             marginTop: "2%",
    627.             fontSize: 11,
    628.             fontColor: "#fff",
    629.             textAlign: "center",
    630.             backgroundColor: "#90C653"
    631.           },
    632.           {
    633.             minWidth: 768,
    634.             maxWidth: 1024,
    635.             text: "Paid Users vs. Free Users",
    636.             height: "16%",
    637.             marginTop: "2%",
    638.             fontSize: 12,
    639.             textAlign: "center",
    640.             backgroundColor: "none"
    641.           },
    642.           {
    643.             minWidth: 1024,
    644.             text: "Paid Users vs. Free Users",
    645.             height: "16%",
    646.             marginTop: "2%",
    647.             fontSize: 12,
    648.             textAlign: "left",
    649.             paddingLeft: "16%"
    650.           }
    651.         ]
    652.       },
    653.       subtitle: {
    654.         backgroundColor: "#90C653",
    655.         mediaRules: [{
    656.             maxWidth: 399,
    657.             visible: false
    658.           },
    659.           {
    660.             minWidth: 399,
    661.             maxWidth: 768,
    662.             visible: false
    663.           },
    664.           {
    665.             minWidth: 768,
    666.             maxWidth: 1024,
    667.             text: "Andriod",
    668.             fontSize: 8,
    669.             fontColor: "#fff",
    670.             height: "12%",
    671.             marginTop: "18%",
    672.             textAlign: "center",
    673.             backgroundColor: '#90C653'
    674.           },
    675.           {
    676.             minWidth: 1024,
    677.             fontSize: 9,
    678.             text: "Andriod",
    679.             fontColor: "#fff",
    680.             height: "13%",
    681.             marginTop: "19%",
    682.             textAlign: "left",
    683.             paddingLeft: "16%",
    684.             backgroundColor: "#90C653",
    685.           }
    686.         ]
    687.       },
    688.       legend: {
    689.         backgroundColor: "none",
    690.         borderWidth: 0,
    691.         borderColor: "none",
    692.         shadow: 0,
    693.         toggleAction: "remove",
    694.         item: {
    695.           fontColor: "#444"
    696.         },
    697.         mediaRules: [{
    698.             minWidth: 10,
    699.             maxWidth: 1024,
    700.             visible: false
    701.           },
    702.           {
    703.             minWidth: 1024,
    704.             align: "left",
    705.             verticalAlign: "middle"
    706.           }
    707.         ]
    708.       },
    709.       scaleX: {
    710.         lineColor: "none",
    711.         item: {
    712.           visible: false
    713.         },
    714.         tick: {
    715.           visible: false
    716.         }
    717.       },
    718.       scaleY: {
    719.         lineColor: "none",
    720.         minValue: 0,
    721.         maxValue: 100,
    722.         item: {
    723.           visible: false
    724.         },
    725.         tick: {
    726.           visible: false
    727.         },
    728.         guide: {
    729.           visible: false
    730.         }
    731.       },
    732.       plot: {
    733.         alpha: 0.9,
    734.         borderRadiusTopLeft: 2,
    735.         borderRadiusTopRight: 2,
    736.         tooltip: {
    737.           placement: "node:top",
    738.           offsetY: 0
    739.         }
    740.       },
    741.       plotarea: {
    742.         mediaRules: [{
    743.             maxWidth: 399,
    744.             margin: "45% 5% 5% 5%"
    745.           },
    746.           {
    747.             minWidth: 399,
    748.             maxWidth: 768,
    749.             margin: "40% 5% 5% 5%"
    750.           },
    751.           {
    752.             minWidth: 768,
    753.             maxWidth: 1024,
    754.             margin: "45% 5% 10% 5%"
    755.           },
    756.           {
    757.             minWidth: 1024,
    758.             margin: "30% 4% 4% 4%"
    759.           }
    760.         ]
    761.       },
    762.       mediaRules: [{
    763.           maxWidth: 399,
    764.           x: "50%",
    765.           y: "45%",
    766.           height: "15%",
    767.           width: "50%"
    768.         },
    769.         {
    770.           minWidth: 399,
    771.           maxWidth: 768,
    772.           x: "50%",
    773.           y: "15%",
    774.           height: "15%",
    775.           width: "50%"
    776.         },
    777.         {
    778.           minWidth: 768,
    779.           maxWidth: 1024,
    780.           x: "75%",
    781.           y: 0,
    782.           height: "20%",
    783.           width: "25%"
    784.         },
    785.         {
    786.           minWidth: 1024,
    787.           x: "75%",
    788.           y: 0,
    789.           height: "20%",
    790.           width: "25%"
    791.         }
    792.       ],
    793.       series: [{
    794.           values: [35, 42, 67, 89, 25, 34, 67, 85],
    795.           backgroundColor: "#76AA38",
    796.           lineColor: "#76AA38",
    797.           legendText: "Paid"
    798.         },
    799.         {
    800.           values: [35, 42, 67, 89, 25, 34, 67, 85],
    801.           backgroundColor: "#50584C",
    802.           lineColor: "#50584C",
    803.           legendText: "Free"
    804.         }
    805.       ]
    806.     },
    807.     {
    808.       type: "bar",
    809.       mediaRules: [{
    810.           maxWidth: 399,
    811.           x: 0,
    812.           y: "15%",
    813.           height: "30%",
    814.           width: "100%"
    815.         },
    816.         {
    817.           minWidth: 399,
    818.           maxWidth: 768,
    819.           x: 0,
    820.           y: "30%",
    821.           height: "40%",
    822.           width: "50%"
    823.         },
    824.         {
    825.           minWidth: 768,
    826.           maxWidth: 1024,
    827.           x: 0,
    828.           y: "20%",
    829.           height: "45%",
    830.           width: "50%"
    831.         },
    832.         {
    833.           minWidth: 1024,
    834.           x: 0,
    835.           y: "20%",
    836.           height: "45%",
    837.           width: "50%"
    838.         }
    839.       ],
    840.       title: {
    841.         mediaRules: [{
    842.             maxWidth: 399,
    843.             text: "Top 3 Phone Models",
    844.             fontSize: 12,
    845.             fontColor: "#fff",
    846.             textAlign: "left",
    847.             paddingLeft: "11%",
    848.             backgroundColor: "#007AFF",
    849.             height: "13%"
    850.           },
    851.           {
    852.             minWidth: 399,
    853.             maxWidth: 768,
    854.             text: "Top 3",
    855.             fontSize: 12,
    856.             fontColor: "#fff",
    857.             textAlign: "center",
    858.             paddingLeft: "11%",
    859.             backgroundColor: "#007AFF",
    860.             height: "9%"
    861.           },
    862.           {
    863.             minWidth: 768,
    864.             maxWidth: 1024,
    865.             text: "Top 3 Phone Models",
    866.             fontSize: 12,
    867.             textAlign: "center",
    868.             paddingLeft: "11%",
    869.             backgroundColor: "none",
    870.             height: "8%"
    871.           },
    872.           {
    873.             minWidth: 1024,
    874.             text: "Top 3 Phone Models",
    875.             fontSize: 12,
    876.             textAlign: "left",
    877.             paddingLeft: "11%",
    878.             backgroundColor: "none",
    879.             height: "8%"
    880.           }
    881.         ]
    882.       },
    883.       subtitle: {
    884.         mediaRules: [{
    885.             maxWidth: 399,
    886.             visible: false
    887.           },
    888.           {
    889.             minWidth: 399,
    890.             maxWidth: 768,
    891.             visible: false
    892.           },
    893.           {
    894.             minWidth: 768,
    895.             maxWidth: 1024,
    896.             text: " ",
    897.             backgroundColor: '#007AFF',
    898.             height: "5%",
    899.             marginTop: "8%"
    900.           },
    901.           {
    902.             minWidth: 1024,
    903.             fontSize: 9,
    904.             text: " ",
    905.             backgroundColor: '#007AFF',
    906.             height: "5%",
    907.             marginTop: "8%"
    908.           }
    909.         ]
    910.       },
    911.       plotarea: {
    912.         mediaRules: [{
    913.             maxWidth: 399,
    914.             margin: "20% 5% 20% 10%"
    915.           },
    916.           {
    917.             minWidth: 399,
    918.             maxWidth: 768,
    919.             margin: "15% 5% 20% 15%"
    920.           },
    921.           {
    922.             minWidth: 768,
    923.             maxWidth: 1024,
    924.             margin: "20% 3% 18% 8%"
    925.           },
    926.           {
    927.             minWidth: 1024,
    928.             margin: "20% 3% 18% 8%"
    929.           }
    930.         ],
    931.       },
    932.       plot: {
    933.         alpha: 0.9,
    934.         borderRadiusTopLeft: 2,
    935.         borderRadiusTopRight: 2,
    936.         valueBox: {
    937.           placement: "top-in",
    938.           fontColor: "#fff",
    939.           text: "%t"
    940.         },
    941.         tooltip: {
    942.           placement: "node:top",
    943.           offsetY: -5
    944.         }
    945.       },
    946.       scaleX: {
    947.         labels: ["Septemer 2016"],
    948.         item: {
    949.           fontColor: "#333"
    950.         }
    951.       },
    952.       scaleY: {
    953.         multiplier: true,
    954.         step: 2500,
    955.         guide: {
    956.           lineStyle: "solid"
    957.         }
    958.       },
    959.       series: [{
    960.           values: [6845],
    961.           backgroundColor: "#007AFF",
    962.           text: "iPhone<br>6"
    963.         },
    964.         {
    965.           values: [8954],
    966.           backgroundColor: "#FF2D55",
    967.           text: "iPhone<br>6s"
    968.         },
    969.         {
    970.           values: [4251],
    971.           backgroundColor: "#5856D6",
    972.           text: "iPhone<br>7"
    973.         }
    974.       ]
    975.     },
    976.     {
    977.       type: "bar",
    978.       mediaRules: [{
    979.           maxWidth: 399,
    980.           x: 0,
    981.           y: "60%",
    982.           height: "30%",
    983.           width: "100%"
    984.         },
    985.         {
    986.           minWidth: 399,
    987.           maxWidth: 768,
    988.           x: "50%",
    989.           y: "30%",
    990.           height: "40%",
    991.           width: "50%"
    992.         },
    993.         {
    994.           minWidth: 768,
    995.           maxWidth: 1024,
    996.           x: "50%",
    997.           y: "20%",
    998.           height: "45%",
    999.           width: "50%"
    1000.         },
    1001.         {
    1002.           minWidth: 1024,
    1003.           x: "50%",
    1004.           y: "20%",
    1005.           height: "45%",
    1006.           width: "50%"
    1007.         }
    1008.       ],
    1009.       title: {
    1010.         mediaRules: [{
    1011.             maxWidth: 399,
    1012.             text: "Top 3 Phone Models",
    1013.             fontSize: 12,
    1014.             fontColor: "#fff",
    1015.             textAlign: "left",
    1016.             paddingLeft: "11%",
    1017.             backgroundColor: "#90C653",
    1018.             height: "13%"
    1019.           },
    1020.           {
    1021.             minWidth: 399,
    1022.             maxWidth: 768,
    1023.             text: "Top 3",
    1024.             fontSize: 12,
    1025.             fontColor: "#fff",
    1026.             textAlign: "center",
    1027.             paddingLeft: "11%",
    1028.             backgroundColor: "#90C653",
    1029.             height: "9%"
    1030.           },
    1031.           {
    1032.             minWidth: 768,
    1033.             maxWidth: 1024,
    1034.             text: "Top 3 Phone Models",
    1035.             fontSize: 12,
    1036.             textAlign: "center",
    1037.             paddingLeft: "11%",
    1038.             backgroundColor: "none",
    1039.             height: "8%"
    1040.           },
    1041.           {
    1042.             minWidth: 1024,
    1043.             text: "Top 3 Phone Models",
    1044.             fontSize: 12,
    1045.             textAlign: "left",
    1046.             paddingLeft: "11%",
    1047.             backgroundColor: "none",
    1048.             height: "8%"
    1049.           }
    1050.         ]
    1051.       },
    1052.       subtitle: {
    1053.         mediaRules: [{
    1054.             maxWidth: 399,
    1055.             visible: false
    1056.           },
    1057.           {
    1058.             minWidth: 399,
    1059.             maxWidth: 768,
    1060.             visible: false
    1061.           },
    1062.           {
    1063.             minWidth: 768,
    1064.             maxWidth: 1024,
    1065.             text: " ",
    1066.             backgroundColor: '#90C653',
    1067.             height: "5%",
    1068.             marginTop: "8%"
    1069.           },
    1070.           {
    1071.             minWidth: 1024,
    1072.             fontSize: 9,
    1073.             text: " ",
    1074.             backgroundColor: '#90C653',
    1075.             height: "5%",
    1076.             marginTop: "8%"
    1077.           }
    1078.         ]
    1079.       },
    1080.       plotarea: {
    1081.         mediaRules: [{
    1082.             maxWidth: 399,
    1083.             margin: "20% 5% 20% 10%"
    1084.           },
    1085.           {
    1086.             minWidth: 399,
    1087.             maxWidth: 768,
    1088.             margin: "15% 5% 20% 15%"
    1089.           },
    1090.           {
    1091.             minWidth: 768,
    1092.             maxWidth: 1024,
    1093.             margin: "20% 3% 18% 8%"
    1094.           },
    1095.           {
    1096.             minWidth: 1024,
    1097.             margin: "20% 3% 18% 8%"
    1098.           }
    1099.         ],
    1100.       },
    1101.       plot: {
    1102.         alpha: 0.9,
    1103.         borderRadiusTopLeft: 2,
    1104.         borderRadiusTopRight: 2,
    1105.         valueBox: {
    1106.           placement: "top-in",
    1107.           fontColor: "#fff",
    1108.           text: "%t"
    1109.         },
    1110.         tooltip: {
    1111.           placement: "node:top",
    1112.           offsetY: -5
    1113.         }
    1114.       },
    1115.       scaleX: {
    1116.         labels: ["Septemer 2016"],
    1117.         item: {
    1118.           fontColor: "#333"
    1119.         }
    1120.       },
    1121.       scaleY: {
    1122.         multiplier: true,
    1123.         step: 1000,
    1124.         guide: {
    1125.           lineStyle: "solid"
    1126.         }
    1127.       },
    1128.       series: [{
    1129.           values: [3425],
    1130.           backgroundColor: "#76AA38",
    1131.           text: "Galaxy<br>Note 5"
    1132.         },
    1133.         {
    1134.           values: [2921],
    1135.           backgroundColor: "#50584C",
    1136.           text: "Galaxy<br>S6"
    1137.         },
    1138.         {
    1139.           values: [2745],
    1140.           backgroundColor: "#FFC208",
    1141.           text: "Galaxy<br>S7"
    1142.         }
    1143.       ]
    1144.     },
    1145.     {
    1146.       type: "null",
    1147.       title: {
    1148.         mediaRules: [{
    1149.             maxWidth: 399,
    1150.             text: "Limited Mobile View",
    1151.             fontColor: "#333",
    1152.             backgroundColor: "#ccc"
    1153.           },
    1154.           {
    1155.             minWidth: 399,
    1156.             text: "",
    1157.             fontColor: "none"
    1158.           },
    1159.           {
    1160.             minWidth: 768,
    1161.             maxWidth: 1024,
    1162.             text: "",
    1163.             fontColor: "none"
    1164.           },
    1165.           {
    1166.             minWidth: 1024,
    1167.             text: "",
    1168.             fontColor: "none"
    1169.           }
    1170.         ]
    1171.       },
    1172.       mediaRules: [{
    1173.           maxWidth: 399,
    1174.           x: 0,
    1175.           y: "90%",
    1176.           height: "10%",
    1177.           width: "100%"
    1178.         },
    1179.         {
    1180.           minWidth: 399,
    1181.           maxWidth: 768,
    1182.           height: 0,
    1183.           width: 0
    1184.         },
    1185.         {
    1186.           minWidth: 768,
    1187.           maxWidth: 1024,
    1188.           height: 0,
    1189.           width: 0
    1190.         },
    1191.         {
    1192.           minWidth: 1024,
    1193.           height: 0,
    1194.           width: 0
    1195.         }
    1196.       ],
    1197.     },
    1198.     {
    1199.       type: "gauge",
    1200.       backgroundColor: "#007AFF",
    1201.       mediaRules: [{
    1202.           maxWidth: 399,
    1203.           x: -200,
    1204.           y: -200,
    1205.           height: 0,
    1206.           width: 0
    1207.         },
    1208.         {
    1209.           minWidth: 399,
    1210.           maxWidth: 768,
    1211.           x: 0,
    1212.           y: "70%",
    1213.           height: "30%",
    1214.           width: "50%"
    1215.         },
    1216.         {
    1217.           minWidth: 768,
    1218.           maxWidth: 1024,
    1219.           x: 0,
    1220.           y: "65%",
    1221.           height: "35%",
    1222.           width: "50%"
    1223.         },
    1224.         {
    1225.           minWidth: 1024,
    1226.           x: 0,
    1227.           y: "65%",
    1228.           height: "35%",
    1229.           width: "50%"
    1230.         }
    1231.       ],
    1232.       scaleR: {
    1233.         step: 5,
    1234.         center: {
    1235.           size: 6,
    1236.           backgroundColor: "#fff",
    1237.           borderColor: "#007AFF"
    1238.         },
    1239.         ring: {
    1240.           backgroundColor: "#FF2D55",
    1241.           size: 4
    1242.         },
    1243.         markers: [{
    1244.           type: "area",
    1245.           range: [0, 0],
    1246.           backgroundColor: "#FF2D55"
    1247.         }],
    1248.         tick: {
    1249.           placement: "out",
    1250.           lineColor: "#333",
    1251.           size: 5
    1252.         },
    1253.         guide: {
    1254.           lineColor: "#d8d6d6",
    1255.           lineWidth: 1,
    1256.           lineStyle: "solid"
    1257.         },
    1258.         item: {
    1259.           offsetR: -3,
    1260.           fontColor: "#fff"
    1261.         }
    1262.       },
    1263.       plot: {
    1264.         csize: 6,
    1265.         borderWidth: 0
    1266.       },
    1267.       scale: {
    1268.         sizeFactor: 1.1
    1269.       },
    1270.       series: [{
    1271.           values: [6],
    1272.           text: "iPhone 6",
    1273.           backgroundColor: "#007AFF",
    1274.           tooltip: {
    1275.             backgroundColor: "#007AFF"
    1276.           }
    1277.         },
    1278.         {
    1279.           values: [14],
    1280.           text: "iPhone 6s",
    1281.           backgroundColor: "#FF2D55",
    1282.           tooltip: {
    1283.             backgroundColor: "#FF2D55"
    1284.           }
    1285.         },
    1286.         {
    1287.           values: [21],
    1288.           text: "iPhone 7",
    1289.           backgroundColor: "#5856D6",
    1290.           tooltip: {
    1291.             backgroundColor: "#5856D6"
    1292.           }
    1293.         }
    1294.       ]
    1295.     },
    1296.     {
    1297.       type: "gauge",
    1298.       backgroundColor: "#92C163",
    1299.       mediaRules: [{
    1300.           maxWidth: 399,
    1301.           x: -200,
    1302.           y: -200,
    1303.           height: 0,
    1304.           width: 0
    1305.         },
    1306.         {
    1307.           minWidth: 399,
    1308.           maxWidth: 768,
    1309.           x: "50%",
    1310.           y: "70%",
    1311.           height: "30%",
    1312.           width: "50%"
    1313.         },
    1314.         {
    1315.           minWidth: 768,
    1316.           maxWidth: 1024,
    1317.           x: "50%",
    1318.           y: "65%",
    1319.           height: "35%",
    1320.           width: "50%"
    1321.         },
    1322.         {
    1323.           minWidth: 1024,
    1324.           x: "50%",
    1325.           y: "65%",
    1326.           height: "35%",
    1327.           width: "50%"
    1328.         }
    1329.       ],
    1330.       scaleR: {
    1331.         step: 5,
    1332.         center: {
    1333.           size: 6,
    1334.           backgroundColor: "#fff",
    1335.           borderColor: "#84B34C"
    1336.         },
    1337.         ring: {
    1338.           backgroundColor: "#50584C",
    1339.           size: 4
    1340.         },
    1341.         markers: [{
    1342.           type: "area",
    1343.           range: [0, 0],
    1344.           backgroundColor: "#50584C",
    1345.           alpha: 0.9
    1346.         }],
    1347.         tick: {
    1348.           placement: "out",
    1349.           lineColor: "#333",
    1350.           size: 5
    1351.         },
    1352.         guide: {
    1353.           lineColor: "#d8d6d6",
    1354.           lineWidth: 1,
    1355.           lineStyle: "solid"
    1356.         },
    1357.         item: {
    1358.           offsetR: -3,
    1359.           fontColor: "#fff"
    1360.         }
    1361.       },
    1362.       plot: {
    1363.         csize: 5,
    1364.         borderWidth: 0
    1365.       },
    1366.       scale: {
    1367.         sizeFactor: 1.1
    1368.       },
    1369.       series: [{
    1370.           values: [10],
    1371.           backgroundColor: "#84B34C",
    1372.           tooltip: {
    1373.             backgroundColor: "#84B34C"
    1374.           }
    1375.         },
    1376.         {
    1377.           values: [15],
    1378.           backgroundColor: "#50584C",
    1379.           tooltip: {
    1380.             backgroundColor: "#50584C"
    1381.           }
    1382.         },
    1383.         {
    1384.           values: [17],
    1385.           backgroundColor: "#FFC208",
    1386.           tooltip: {
    1387.             backgroundColor: "#FFC208"
    1388.           }
    1389.         }
    1390.       ]
    1391.     }
    1392.   ]
    1393. };
    1394.  
    1395. zingchart.render({
    1396.   id: 'myChart',
    1397.   data: myConfig,
    1398.   height: '500', //update to 100%
    1399.   width: '100%'
    1400. });