Google Charts

by Евгений

HTML

<script src="https://www.google.com/jsapi"></script>
<a href="https://developers.google.com/chart/interactive/docs/gallery" target="_blank">gallery</a>
<a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart" target="_blank">linechart</a>
<a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut" target="_blank">donutchart</a>

<div class="left-col">
<div id="chart_div"></div>

<div id="piechart1"></div><div id="piechart2"></div>
<div id="piechart3"></div><div id="piechart4"></div>
</div>

<div class="right-col">
<div id="piechart5"></div>
</div>

CSS

.left-col {
    width: 600px;
    border: 1px solid #ccc;
    margin: 20px auto;
    background: #efefef;
}
.right-col {
    width: 300px;
    border: 1px solid #ccc;
    margin: 20px auto;
}
#chart_div {
    height: 250px;
}
#piechart1,
#piechart2,
#piechart3,
#piechart4 {
    width: 50%;
    display: inline-block
}
#piechart5 {
    height: 500px;
}

JavaScript

var chartTrafficData = [
        ['Month',    'Visitors', 'Pageviews'],
        ['Sep 2013',  793888,     1512737],
        ['Okt 2013',  1114787,    2036394],
        ['Nov 2013',  1207148,    1853621],
        ['Dec 2013',  959142,     1325718],
        ['Jan 2014',  1189578,    2059363],
        ['Feb 2014',  1080982,    2023026],
        ['Mar 2014',  980711,     2119175],
        ['Apr 2014',  916215,     1950608],
        ['May 2014',  1015783,    2182478],
        ['Jun 2014',  1215558,    2620624],
        ['Jul 2014',  1304185,    2699134],
        ['Aug 2014',  1197695,    2577004],
        ['Sep 2014',  987072,     2110252]
    ], 
    chartCountryData = [
        ['Country', 'Value'],
        ['Russia',    82.39],
        ['Ukraine',    6.33],
        ['Belarus',   3.38],
        ['Kazakhstan',  1.89],
        ['Moldova',    0.43],
        ['Germany',   0.39],
        ['Others',     5.19]
    ], 
    chartCityData = [
        ['City',           'Value'],
        ['Moscow',           13.17],
        ['St. Petersburg',   4.64],
        ['Samara',            2.91],
        ['Yekaterinburg',      2.51],
        ['Krasnodar',         2.26],
        ['Rostov-on-Don',    2.04],
        ['Kiev',              1.81],
        ['Nizhny Novgorod',   1.80],
        ['Novosibirsk',       1.61],
        ['Voronezh',           1.57],
        ['Minsk',             1.44],
        ['Kazan',            1.38],
        ['Omsk',              1.34],
        ['Krasnoyarsk',        1.29],
        ['Perm',             1.27],
        ['Saratov',           1.17],
        ['Others',           57.79]
    ], 
    chartGenderData = [
        ['Gender',  'Value'],
        ['Woman',   66.10],
        ['Man',   33.90]
    ], 
    chartAgeData = [
        ['Age', 'Value'],
        ['< 18',   5.10],
        ['18-24', 17.30],
        ['25-34', 43.80],
        ['35-44', 17.50],
        ['> 45',  16.30]
    ],
    chartSourceData = [
        ['Source',      'Value'],
        ['Search...