Есть такой код с выпадающим списком и скриптом , который отрисовует графики:
<ul class="navigation">
<a class="main" href="#url">Choose year</a>
<li class="n1"><input type="button" value="2010" data-block-id="chart_div"></li>
<li class="n2"><input type="button" value="2011" data-block-id="chart_div1"></li>
<li class="n3"><input type="button" value="2012" data-block-id="chart_div2"></li>
<li class="n4"><input type="button" value="2013" data-block-id="chart_div3"></li>
<li class="n5"><input type="button" value="2014" data-block-id="chart_div4"></li>
</ul>
<script language="javascript" type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart2010);
google.charts.setOnLoadCallback(drawChart2011);
google.charts.setOnLoadCallback(drawChart2012);
google.charts.setOnLoadCallback(drawChart2013);
google.charts.setOnLoadCallback(drawChart2014);
google.charts.setOnLoadCallback(drawChart2015);
google.charts.setOnLoadCallback(drawChart2016);
google.charts.setOnLoadCallback(drawChart2017);
function drawChart2017() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'asd');
data.addColumn({type: 'string', role: 'tooltip','p': {'html': true}});
data.addRows([
['Wizoria', new Date(2017,01,18),createCustomHTMLContent('Wizoria','Mirgorod','2')],
['Wizoria', new Date(2017,01,18),createCustomHTMLContent('Wizoria','Mirgorod','1')],
['Bumer', new Date(2017,02,21),createCustomHTMLContent('Bumer','Kiev','3')],
['Olimp', new Date(2017,05,02),createCustomHTMLContent('Olimp','Krivoj-rog','Big')],
['Apelsin', new Date(2017,05,05),createCustomHTMLContent('Apelsin','Sevastopol','4')],
['Raketa', new Date(2017,05,05),createCustomHTMLContent('Raketa','Evpatoriya','3')],
['Dolmen', new Date(2017,05,10),createCustomHTMLContent('Dolmen','Harkov','1')],
['Dolmen', new Date(2017,05,11),createCustomHTMLContent('Dolmen','Harkov','4')],
['Dolmen', new Date(2017,05,11),createCustomHTMLContent('Dolmen','Harkov','2')],
['Sputnik', new Date(2017,09,01),createCustomHTMLContent('Sputnik','Nezhyn','2')],
['Sputnik', new Date(2017,09,01),createCustomHTMLContent('Sputnik','Nezhyn','1')]
]);
var options = {
legend: {position: 'none'},
height: 450,
lineWidth:4,
curveType: 'function',
lineDashStyle:[15,2,3,3],
pointSize:10,
colors:['#af0000'],
tooltip: {isHtml: true,trigger:'selection'},
hAxis:{
textPosition:'none'
},
vAxis:{
textStyle : {
fontSize: 14,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div7'));
chart.draw(data, options);
}
function drawChart2016() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'asd');
data.addColumn({type: 'string', role: 'tooltip','p': {'html': true}});
data.addRows([
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','1')],
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','2')],
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','3')],
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','4')],
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','5')],
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','6')],
['Smart Cinema SEC Sky Park', new Date(2016,04,04),createCustomHTMLContent('Smart Cinema SEC Sky Park','Vinnica','7')],
['Adrenalin City', new Date(2016,04,26),createCustomHTMLContent('Adrenalin City','Luck','Blue')],
['Premiera', new Date(2016,05,04),createCustomHTMLContent('Premiera','Pervomajsk','1')],
['City', new Date(2016,05,06),createCustomHTMLContent('City','Chervonograd','1')],
['SEC New Way Wizoria', new Date(2016,05,17),createCustomHTMLContent('SEC New Way Wizoria','Harkov','1')],
['SEC New Way Wizoria', new Date(2016,05,17),createCustomHTMLContent('SEC New Way Wizoria','Harkov','2')],
['SEC New Way Wizoria', new Date(2016,05,17),createCustomHTMLContent('SEC New Way Wizoria','Harkov','3')],
['SEC New Way Wizoria', new Date(2016,05,17),createCustomHTMLContent('SEC New Way Wizoria','Harkov','4')],
['SEC New Way Wizoria', new Date(2016,05,17),createCustomHTMLContent('SEC New Way Wizoria','Harkov','5')],
['SEC New Way Wizoria', new Date(2016,05,17),createCustomHTMLContent('SEC New Way Wizoria','Harkov','6')],
['Dolmen', new Date(2016,05,17),createCustomHTMLContent('Dolmen','Harkov','1')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','1')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','2')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','3')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','4')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','5')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','6')],
['SEC Dafi Multiplex', new Date(2016,05,27),createCustomHTMLContent('SEC Dafi Multiplex','Harkov','7')],
['Moscow', new Date(2016,06,02),createCustomHTMLContent('Moscow','Odessa','7')],
['Kinoland', new Date(2016,06,06),createCustomHTMLContent('Kinoland','Harkov','4')],
['Kinoland', new Date(2016,06,06),createCustomHTMLContent('Kinoland','Harkov','5')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','4DX')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 1')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 2')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 3')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 4')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 5')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 6')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 7')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','Cinetech+ 8')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','VIP 1')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','VIP 2')],
['SEC Bloсkbuster Planeta Kino', new Date(2016,06,12),createCustomHTMLContent('SEC Bloсkbuster Planeta Kino','Kyiv','VIP 3')],
['SEC Ocean Plaza Cinema Citi', new Date(2016,08,08),createCustomHTMLContent('SEC Ocean Plaza Cinema Citi','Kyiv','1')],
['Oktyabr', new Date(2016,11,09),createCustomHTMLContent('Oktyabr','Bilhorod-Dnistrovskui','2')],
['SEC Konkord Wizoria', new Date(2016,11,16),createCustomHTMLContent('SEC Konkord Wizoria','Poltava','1')],
['SEC Konkord Wizoria', new Date(2016,11,16),createCustomHTMLContent('SEC Konkord Wizoria','Poltava','2')],
['SEC Konkord Wizoria', new Date(2016,11,16),createCustomHTMLContent('SEC Konkord Wizoria','Poltava','3')],
['SEC Billa Prime', new Date(2016,11,17),createCustomHTMLContent('SEC Billa Prime','Nikopol','1')],
['Pobeda', new Date(2016,12,03),createCustomHTMLContent('Pobeda','Melitopol','3')],
['SEC Lyubava', new Date(2016,12,06),createCustomHTMLContent('SEC Lyubava','Cherkassy','4')],
['SEC Apelsin VIP', new Date(2016,12,08),createCustomHTMLContent('SEC Apelsin VIP','Sevastopol','VIP')],
['SEC Musson', new Date(2016,12,11),createCustomHTMLContent('SEC Musson','Sevastopol','7')],
['SEC Kyiv', new Date(2016,12,20),createCustomHTMLContent('SEC Kyiv','Harkov','3')],
['Wizoria, EC Kolos', new Date(2016,12,25),createCustomHTMLContent('Wizoria, EC Kolos','Poltava','1')],
['Wizoria, EC Kolos', new Date(2016,12,25),createCustomHTMLContent('Wizoria, EC Kolos','Poltava','2')]
]);
var options = {
legend: {position: 'none'},
height: 450,
lineWidth:4,
curveType: 'function',
lineDashStyle:[15,2,3,3],
pointSize:10,
colors:['#af0000'],
tooltip: {isHtml: true,trigger:'selection'},
hAxis:{
textPosition:'none'
},
vAxis:{
textStyle : {
fontSize: 14,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div6'));
chart.draw(data, options);
}
function drawChart2015() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'asd');
data.addColumn({type: 'string', role: 'tooltip','p': {'html': true}});
data.addRows([
['Kyiv', new Date(2015,02,24),createCustomHTMLContent('Kyiv','Harkov','3')],
['Kyiv', new Date(2015,02,24),createCustomHTMLContent('Kyiv','Harkov','6')],
['Dovzhenko', new Date(2015,02,25),createCustomHTMLContent('Dovzhenko','Harkov','4')],
['SEC Dnipro Plaza Multiplex', new Date(2015,04,09),createCustomHTMLContent('SEC Dnipro Plaza Multiplex','Cherkassy','Koen')],
['SEC Lyubava Multiplex', new Date(2015,04,09),createCustomHTMLContent('SEC Lyubava Multiplex','Cherkassy','Strip')],
['SEC TsUM', new Date(2015,05,07),createCustomHTMLContent('SEC TsUM','Dneprodzerzhinsk','3')],
['SEC TsUM', new Date(2015,05,07),createCustomHTMLContent('SEC TsUM','Dneprodzerzhinsk','4')],
['ANGA 3D', new Date(2015,05,13),createCustomHTMLContent('ANGA 3D','Nairoby-Kenia','1')],
['ANGA 3D', new Date(2015,05,13),createCustomHTMLContent('ANGA 3D','Nairoby-Kenia','2')],
['SEC Atmosfera Multiplex', new Date(2015,07,30),createCustomHTMLContent('SEC Atmosfera Multiplex','Kiev','3')],
['SEC Atmosfera Multiplex', new Date(2015,07,30),createCustomHTMLContent('SEC Atmosfera Multiplex','Kiev','4')],
['Zlata', new Date(2015,08,23),createCustomHTMLContent('Zlata','Truskavec','1')],
['SEC Tokyo', new Date(2015,09,22),createCustomHTMLContent('SEC Tokyo','Uzhgorod','2')],
['Planeta Kino IMAX SEC Forum', new Date(2015,09,25),createCustomHTMLContent('Planeta Kino IMAX SEC Forum','Lvov','1')],
['Planeta Kino IMAX SEC Forum', new Date(2015,09,25),createCustomHTMLContent('Planeta Kino IMAX SEC Forum','Lvov','2')],
['Planeta Kino IMAX SEC Forum', new Date(2015,09,25),createCustomHTMLContent('Planeta Kino IMAX SEC Forum','Lvov','3')],
['Planeta Kino IMAX SEC Forum', new Date(2015,09,25),createCustomHTMLContent('Planeta Kino IMAX SEC Forum','Lvov','4 (4DX)')],
['Planeta Kino IMAX SEC Forum', new Date(2015,09,25),createCustomHTMLContent('Planeta Kino IMAX SEC Forum','Lvov','5')],
['Planeta Kino IMAX SEC Forum', new Date(2015,09,25),createCustomHTMLContent('Planeta Kino IMAX SEC Forum','Lvov','6')],
['SEC Terminal', new Date(2015,10,02),createCustomHTMLContent('SEC Terminal','Dzhankoj','4')],
['Poznan', new Date(2015,10,05),createCustomHTMLContent('SEC Terminal','Harkov','1')],
['Poznan', new Date(2015,10,05),createCustomHTMLContent('Poznan','Harkov','2')],
['Savona', new Date(2015,10,22),createCustomHTMLContent('Savona','Mariupol','Red')],
['Poznan', new Date(2015,12,02),createCustomHTMLContent('Poznan','Harkov','1')],
['Poznan', new Date(2015,12,02),createCustomHTMLContent('Poznan','Harkov','3')],
['KinoMario', new Date(2015,12,10),createCustomHTMLContent('KinoMario','Berdichiv','1')],
['Chaplin', new Date(2015,12,26),createCustomHTMLContent('Chaplin','Stryj','4')]
]);
var options = {
legend: {position: 'none'},
height: 450,
lineWidth:4,
curveType: 'function',
lineDashStyle:[15,2,3,3],
pointSize:10,
colors:['#af0000'],
tooltip: {isHtml: true,trigger:'selection'},
hAxis:{
textPosition:'none'
},
vAxis:{
textStyle : {
fontSize: 14,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div5'));
chart.draw(data, options);
}
function drawChart2014() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'asd');
data.addColumn({type: 'string', role: 'tooltip','p': {'html': true}});
data.addRows([
['Planeta Kino IMAX', new Date(2014,01,07),createCustomHTMLContent('Planeta Kino IMAX','Harkov','4')],
['Chaplin', new Date(2014,01,09),createCustomHTMLContent('Chaplin','Dolina','1')],
['Kupecheskij dom', new Date(2014,01,21),createCustomHTMLContent('Kupecheskij dom','Slavyansk','1')],
['SEC Dafi Kronverk', new Date(2014,02,01),createCustomHTMLContent('SEC Dafi Kronverk','Harkov','3')],
['SEC Dafi Kronverk', new Date(2014,02,01),createCustomHTMLContent('SEC Dafi Kronverk','Harkov','4')],
['SEC Dafi Kronverk', new Date(2014,02,01),createCustomHTMLContent('SEC Dafi Kronverk','Harkov','5')],
['SEC Dafi Kronverk', new Date(2014,02,01),createCustomHTMLContent('SEC Dafi Kronverk','Harkov','6 (4DX)')],
['SEC Dafi Kronverk', new Date(2014,02,01),createCustomHTMLContent('SEC Dafi Kronverk','Harkov','7')],
['SEC SKY Mall Kronverk', new Date(2014,02,05),createCustomHTMLContent('SEC SKY Mall Kronverk','Kiev','10')],
['SEC SKY Mall Kronverk', new Date(2014,02,05),createCustomHTMLContent('SEC SKY Mall Kronverk','Kiev','3')],
['SEC SKY Mall Kronverk', new Date(2014,02,05),createCustomHTMLContent('SEC SKY Mall Kronverk','Kiev','4')],
['SEC SKY Mall Kronverk', new Date(2014,02,05),createCustomHTMLContent('SEC SKY Mall Kronverk','Kiev','5')],
['SEC SKY Mall Kronverk', new Date(2014,02,05),createCustomHTMLContent('SEC SKY Mall Kronverk','Kiev','6')],
['SEC SKY Mall Kronverk', new Date(2014,02,05),createCustomHTMLContent('SEC SKY Mall Kronverk','Kiev','9l')],
['SEC Terminal', new Date(2014,05,08),createCustomHTMLContent('SEC Terminal','Dzhankoj','1')],
['Planeta Kino IMAX Kotovskogo', new Date(2014,05,15),createCustomHTMLContent('Planeta Kino IMAX Kotovskogo','Odessa','1')],
['Planeta Kino IMAX Kotovskogo', new Date(2014,05,15),createCustomHTMLContent('Planeta Kino IMAX Kotovskogo','Odessa','2')],
['Planeta Kino IMAX Kotovskogo', new Date(2014,05,15),createCustomHTMLContent('Planeta Kino IMAX Kotovskogo','Odessa','3')],
['Planeta Kino IMAX Kotovskogo', new Date(2014,05,15),createCustomHTMLContent('Planeta Kino IMAX Kotovskogo','Odessa','4')],
['Planeta Kino IMAX Kotovskogo', new Date(2014,05,15),createCustomHTMLContent('Planeta Kino IMAX Kotovskogo','Odessa','5')],
['Pemer city', new Date(2014,05,17),createCustomHTMLContent('Pemer city','Luck','1')],
['Pemer city', new Date(2014,05,17),createCustomHTMLContent('Pemer city','Luck','2')],
['Pemer city', new Date(2014,05,17),createCustomHTMLContent('Pemer city','Luck','3')],
['Pemer city', new Date(2014,05,17),createCustomHTMLContent('Pemer city','Luck','4')],
['SEC Lyubava Multiplex', new Date(2014,05,27),createCustomHTMLContent('SEC Lyubava Multiplex','Cherkassy','Ford')],
['Planeta Kino IMAX Tairova', new Date(2014,05,29),createCustomHTMLContent('Planeta Kino IMAX Tairova','Odessa','1')],
['Planeta Kino IMAX Tairova', new Date(2014,05,29),createCustomHTMLContent('Planeta Kino IMAX Tairova','Odessa','2')],
['Planeta Kino IMAX Tairova', new Date(2014,05,29),createCustomHTMLContent('Planeta Kino IMAX Tairova','Odessa','3')],
['Planeta Kino IMAX Tairova', new Date(2014,05,29),createCustomHTMLContent('Planeta Kino IMAX Tairova','Odessa','4')],
['Planeta Kino IMAX Tairova', new Date(2014,05,29),createCustomHTMLContent('Planeta Kino IMAX Tairova','Odessa','6(4DX)')],
['SEC ART Mall Kinodrom', new Date(2014,07,26),createCustomHTMLContent('SEC ART Mall Kinodrom','Kiev','1')],
['SEC Musson', new Date(2014,10,24),createCustomHTMLContent('SEC Musson','Sevastopol','5')],
['SEC Musson', new Date(2014,10,24),createCustomHTMLContent('SEC Musson','Sevastopol','6')],
['SEC Dnipro Plaza Multiplex', new Date(2014,11,20),createCustomHTMLContent('SEC Dnipro Plaza Multiplex','Cherkassy','de Funes')],
['Crimea', new Date(2014,12,09),createCustomHTMLContent('Crimea','Feodosiya','Small')],
['Konkord',new Date(2014,12,17),createCustomHTMLContent('Konkord','Poltava',2)],
['SEC Rivera Odessa Kino',new Date(2014,12,20),createCustomHTMLContent('SEC Rivera Odessa Kino','Odessa',4)],
['SEC Rivera Odessa Kino', new Date(2014,12,20),createCustomHTMLContent('SEC Rivera Odessa Kino','Odessa',5)],
['Europa', new Date(2014,12,22),createCustomHTMLContent('Europa','Borispil','1')],
['Akura Cent Kinodrom', new Date(2014,12,25),createCustomHTMLContent('Akura Cent Kinodrom','Kiev','1')],
['Ukraina', new Date(2014,12,26),createCustomHTMLContent('Ukraina','Kerch','Red')],
]);
var options = {
legend: {position: 'none'},
height: 450,
lineWidth:4,
curveType: 'function',
lineDashStyle:[15,2,3,3],
pointSize:10,
colors:['#af0000'],
tooltip: {isHtml: true,trigger:'selection'},
hAxis:{
textPosition:'none'
},
vAxis:{
textStyle : {
fontSize: 14,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div4'));
chart.draw(data, options);
}
function drawChart2013() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'asd');
data.addColumn({type: 'string', role: 'tooltip','p': {'html': true}});
data.addRows([
['Savona', new Date(2013,02,15),createCustomHTMLContent('Savona','Mariupol','Green')],
['Savona', new Date(2013,02,15),createCustomHTMLContent('Savona','Mariupol','Blue')],
['SEC Jazz', new Date(2013,02,22),createCustomHTMLContent('SEC Jazz','Severodoneck','Oskar')],
['Cіnema', new Date(2013,04,22),createCustomHTMLContent('Cіnema','Kamyanec-Podolskij',1)],
['SEC Bloсkbuster Multiplex',new Date(2013,04,29),createCustomHTMLContent('SEC Bloсkbuster Multiplex','Kiev',10)],
['Cіnema',new Date(2013,06,04),createCustomHTMLContent('Cіnema','Kamyanec-Podolskij',2)],
['Konkord',new Date(2013,06,06),createCustomHTMLContent('Konkord','Poltava',1)],
['Multiplex SEC Oazis', new Date(2013,06,21),createCustomHTMLContent('Multiplex SEC Oazis','Hmelnickij','Kajdanovskij')],
['SEC Bloсkbuster Multiplex', new Date(2013,06,26),createCustomHTMLContent('SEC Bloсkbuster Multiplex','Kiev','4')],
['Multiplex SEC Komodi', new Date(2013,06,26),createCustomHTMLContent('Multiplex SEC Komodi','Kiev','Grinko')],
['Multiplex SEC Donetsk City', new Date(2013,06,27),createCustomHTMLContent('Multiplex SEC Donetsk City','Doneck','Smoktunovskij')],
['SEC Bloсkbuster Multiplex', new Date(2013,07,05),createCustomHTMLContent('SEC Bloсkbuster Multiplex','Kiev','9')],
['SEC Gorodok', new Date(2013,07,15),createCustomHTMLContent('SEC Gorodok','Priluki','1')],
['Leningrad', new Date(2013,07,29),createCustomHTMLContent('Leningrad','Kiev','Medium')],
['Florence', new Date(2013,07,30),createCustomHTMLContent('Florence','Kiev','2')],
['Florence', new Date(2013,07,30),createCustomHTMLContent('Florence','Kiev','3')],
['SEC Stolitsa', new Date(2013,08,05),createCustomHTMLContent('SEC Stolitsa','Alchevsk','2')],
['Spartak', new Date(2013,08,07),createCustomHTMLContent('Spartak','Simferopol','VIP')],
['Planeta Kino IMAX', new Date(2013,09,04),createCustomHTMLContent('Planeta Kino IMAX','Harkov','3')],
['Planeta Kino IMAX', new Date(2013,09,04),createCustomHTMLContent('Planeta Kino IMAX','Lvov','5')],
['Planeta Kino IMAX', new Date(2013,09,19),createCustomHTMLContent('Planeta Kino IMAX','Sumy','1')],
['Planeta Kino IMAX', new Date(2013,09,19),createCustomHTMLContent('Planeta Kino IMAX','Sumy','2')],
['Planeta Kino IMAX', new Date(2013,09,19),createCustomHTMLContent('Planeta Kino IMAX','Sumy','3')],
['Planeta Kino IMAX', new Date(2013,09,19),createCustomHTMLContent('Planeta Kino IMAX','Sumy','4')],
['Planeta Kino IMAX', new Date(2013,09,19),createCustomHTMLContent('Planeta Kino IMAX','Sumy','5')],
['Planeta Kino IMAX', new Date(2013,09,24),createCustomHTMLContent('Planeta Kino IMAX','Lvov','3')],
['Planeta Kino IMAX', new Date(2013,09,25),createCustomHTMLContent('Planeta Kino IMAX','Harkov','2')],
['Bratislava', new Date(2013,09,30),createCustomHTMLContent('Bratislava','Kiev','1')],
['Leipzig', new Date(2013,09,30),createCustomHTMLContent('Leipzig','Kiev','Small')],
['Russia', new Date(2013,10,03),createCustomHTMLContent('Russia','Harkov','Red')],
['KinoKult', new Date(2013,10,14),createCustomHTMLContent('KinoKult','Doneck','Red')],
['Planeta Kino IMAX', new Date(2013,11,05),createCustomHTMLContent('Planeta Kino IMAX','Odessa','4')],
['SEC Tokyo', new Date(2013,12,10),createCustomHTMLContent('SEC Tokyo','Uzhgorod','1')],
['Pobeda', new Date(2013,12,15),createCustomHTMLContent('Pobeda','Melitopol','2')],
['Crimea', new Date(2013,12,16),createCustomHTMLContent('Crimea','Feodosiya','1')],
['Planeta Kino IMAX', new Date(2013,12,18),createCustomHTMLContent('Planeta Kino IMAX','Harkov','6 (4DX)')],
['Planeta Kino IMAX', new Date(2013,12,19),createCustomHTMLContent('Planeta Kino IMAX','Odessa','1')],
['Rodina', new Date(2013,12,22),createCustomHTMLContent('Rodina','Kramatorsk','1')],
['Sapfir', new Date(2013,12,22),createCustomHTMLContent('Sapfir','Slavyansk','1')],
['Zagreb', new Date(2013,12,25),createCustomHTMLContent('Zagreb','Kiev','1')],
['Lumier', new Date(2013,12,27),createCustomHTMLContent('Lumier','Ladyzhin','1')],
['Domion', new Date(2013,12,28),createCustomHTMLContent('Domion','Uzhgorod','1')]
]);
var options = {
legend: {position: 'none'},
height: 450,
lineWidth:4,
curveType: 'function',
lineDashStyle:[15,2,3,3],
pointSize:10,
colors:['#af0000'],
tooltip: {isHtml: true,trigger:'selection'},
hAxis:{
textPosition:'none'
},
vAxis:{
textStyle : {
fontSize: 14,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div3'));
chart.draw(data, options);
}
function drawChart2012() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'asd');
data.addColumn({type: 'string', role: 'tooltip','p': {'html': true}});
data.addRows([
['SM Galaktika', new Date(2012,02,25),createCustomHTMLContent('SM Galaktika','Kirovograd','Red')],
['SM Galaktika', new Date(2012,03,03),createCustomHTMLContent('SM Galaktika','Poltava',2)],
['Pobeda', new Date(2012,03,07),createCustomHTMLContent('Pobeda','Sumy',1)],
['Multiplex SEC Dnipro Plaza', new Date(2012,03,27),createCustomHTMLContent('Multiplex SEC Dnipro Plaza','Kerch','Green')],
['Raketa',new Date(2012,03,28),createCustomHTMLContent('Raketa','Dnepropetrovsk',1)],
['SM Apelsin',new Date(2012,03,29),createCustomHTMLContent('SM Apelsin','Sverdlovsk',1)],
['Ukraine', new Date(2012,04,13),createCustomHTMLContent('Ukraine','Dnepropetrovsk',4)],
['Multiplex SEC Dnipro Plaza', new Date(2012,05,08),createCustomHTMLContent('Multiplex SEC Dnipro Plaza','Sevastopol','1')],
['Multiplex Salyut', new Date(2012,05,08),createCustomHTMLContent('Multiplex Salyut','Sevastopol','2')],
['SEC Palladium', new Date(2012,05,26),createCustomHTMLContent('SEC Palladium','Sevastopol','3')],
['SEC Palladium', new Date(2012,05,26),createCustomHTMLContent('SEC Palladium','Sevastopol','4')],
['SEC Palladium', new Date(2012,05,26),createCustomHTMLContent('SEC Palladium','Izmail','1')],
['SM Galaktika', new Date(2012,07,14),createCustomHTMLContent('SM Galaktika','Kerch','1')],
['SM Galaktika', new Date(2012,07,14),createCustomHTMLContent('SM Galaktika','Poltava','3')],
['SM TsUM', new Date(2012,07,28),createCustomHTMLContent('SM TsUM','Koreiz','1')],
['SM TsUM', new Date(2012,07,28),createCustomHTMLContent('SM TsUM','Koreiz','1')],
['Dovzhenko', new Date(2012,09,01),createCustomHTMLContent('Dovzhenko','Koreiz','1')],
['Pobeda', new Date(2012,09,02),createCustomHTMLContent('Pobeda','Koreiz','1')],
['Pobeda', new Date(2012,10,14),createCustomHTMLContent('Pobeda','Koreiz','1')],
['Kinodrom', new Date(2012,11,23),createCustomHTMLContent('Kinodrom','Koreiz','1')],
['SEC Ttavriya V', new Date(2012,11,27),createCustomHTMLContent('SEC Ttavriya V','Koreiz','1')],
['SEC Gyuzel', new Date(2012,12,02),createCustomHTMLContent('SEC Gyuzel','Koreiz','1')],
['SEC DepoD', new Date(2012,12,24),createCustomHTMLContent('SEC DepoD','Koreiz','1')],
['SEC DepoD', new Date(2012,12,24),createCustomHTMLContent('SEC DepoD','Koreiz','1')],
['SEC Stolitsa', new Date(2012,12,26),createCustomHTMLContent('SEC Stolitsa','Koreiz','1')],
['Kinomaks 3D', new Date(2012,12,28),createCustomHTMLContent('Kinomaks 3D','Koreiz','1')],
['Spartak', new Date(2012,12,30),createCustomHTMLContent('Spartak','Koreiz','1')]
]);
var options = {
legend: {position: 'none'},
height: 450,
lineWidth:4,
curveType: 'function',
lineDashStyle:[15,2,3,3],
pointSize:10,
colors:['#af0000'],
tooltip: {isHtml: true,trigger:'selection'},
hAxis:{
textPosition:'none'
},
vAxis:{
textStyle : {
fontSize: 14,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
function createCustomHTMLContent(name,city, hall) {
return '<div>' +
'<br/>' +
'<table class="medals_layout" style="font-family:DINPro">' + '<tr>' +
'<td><b>Name: </b>' + name + '</td>'+ '</tr>' + '<tr>' +
'<td><b>City: </b>' + city + '</td>' + '</tr>' + '<tr>' +
'<td><b>Hall: </b>' + hall + '</td>' + '</tr>'+ '</table>' + '</div>';
}
</script>
<div id="charts">
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div id="chart_div1" style="width: 100%; height: 500px;"></div>
<div id="chart_div2" style="width: 100%; height: 500px;"></div>
<div id="chart_div3" style="width: 100%; height: 500px;"></div>
<div id="chart_div4" style="width: 100%; height: 500px;"></div>
<div id="chart_div5" style="width: 100%; height: 500px;"></div>
<div id="chart_div6" style="width: 100%; height: 500px;"></div>
<div id="chart_div7" style="width: 100%; height: 500px;"></div>
</div>
И есть такой код , который при клике должен показывать нужный график:
var $buttons = $(".navigation input");
$buttons.on("click", function() {
alert("hello");
var blockId = $(this).data("blockid");
$("#" + blockId).show();
});
При клике даже hello не выводиться. Скрипт - в отдельном файле, находиться в самом низу страницы. что может быть не так?
Очень сложно понять столько кода, одного блока для примера было бы достаточно.
Раз у вас не выводится даже alert
, есть ошибка в js
, либо ситнаксическая либо логическая.
Посмотрите на jsfiddle.
var $buttons = $(".navigation input");
$buttons.on("click", function() {
var blockId = $(this).data("block-id");
$("#" + blockId).css({visibility:"",position:""});
});
Кстати, вы опечатались, когда брали атрибут block-id
.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Возник такой вопрос: есть блок, где располагается четыре блока в них картинка и под каждой картинкой текстТекст плавает из-за того, что картинки...
Как сделать автоматическое подсвечивание пункта меню и сайт-бара на сайте, что бы он определял на какой стр пользователь и выделял этот пункт...
Есть следующий вопрос: нужна ли синхронизация ресурса,используемых разными потоками, если происходит только чтение ресурса, сам ресурс никак...