Develop Reference

Change background image url based on javascript array

is it possible to refer to a javascript array value to set a background in css?
i have a table with several cells, and i want the css to take the third value in the array and make it the background, but i cant get it to work, the idea is that whatever value is in the third array "logo.png" will be set as the data-title image.
https://gyazo.com/492a81f25533a73e37f75850c02f55e5 Like this!
var arr = [
// Date...................Link..............Title
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image.png'], //** these "image.png" are the ones i want to be added to the css above**//
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image2.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image3.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image4.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image5.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image6.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image7.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image8.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image9.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image10.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image11.png'],
];
// Remove after 5min
var remAft = 10;
// Get element with ID "timer"
var wrap = document.querySelector('#timer tbody');
// For loop Array "arr"
for (var i = 0; i < arr.length; i++) {
if (checkDate(arr[i][0])) {
// Adds the elements of the table with filled in information
wrap.innerHTML += '<tr><td>' + arr[i][2] + '</td><td id="' + 'demo' + (i + 1) + '"></td></tr>'
// Invokes the function by passing as arguments Date and ID
new myTimers(arr[i][0], 'demo' + (i + 1));
}
}
function checkDate(tim) {
var d = new Date(tim);
var countDownDate = d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance > -60 * 1000 * remAft) {
return true;
} else {
return false;
}
}
function myTimers(tim, ele) {
// Set the date we're counting down to
var d = new Date(tim);
var countDownDate = d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById(ele).innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
if (distance > -60 * 1000 * remAft) {
document.getElementById(ele).innerHTML = "DONE";
document.getElementById(ele).classList.add('dropped');
document.getElementById(ele).style.color = 'tomato';
document.getElementById(ele).style.textDecoration = "line-through";
} else {
clearInterval(x);
var chekEl = document.getElementById(ele);
if (chekEl) {
chekEl.parentElement.remove();
}
}
}
// If days is 0 add class 'endsoon'
if (days === 0) {
document.getElementById(ele).classList.add('endsoon');
}
}, 1000);
}
.dropdown {
width: 600px;
padding: 0px;
padding-top: 100px;
padding-bottom: 150px;
}
table {
border-width: 70px;
border-color: black;
background-color: #DCF5F1;
}
.dropdown {
margin: auto;
}
th {
border: 2px solid black;
}
td {
border: 2px groove black;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: grey;
text-decoration: underline;
}
table {
width: 600px;
table-layout: fixed;
font-size: 20px;
}
table td {
padding: 20px;
font-weight: bold;
font-family: arial;
}
#timer .endsoon {
color: red;
}
[data-title]:hover:after {
opacity: 1;
transition: all 0.5s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #f4c2sc2;
background-image: url(arr[3]); /* HERES THE BACKGROUND-IMAGE Line */
font-size: 20px;
position: absolute;
padding: 20px 5px 2px 5px;
left: -130px;
top: -35px;
height: 60px;
width: 80px;
white-space: nowrap;
opacity: 0;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<div class="dropdown">
<table id="timer">
<tbody>
<tr>
<td class="headtext">TITLE</td>
<td class="headtext">TITLE</td>
</tr>
</tbody>
</table>
</div>

Unfortunately you can't use attr for the background-image yet, therefor you have to go for a bit more ugly way using css variables.
create a css variable for example lets call it --title-bg and set its value for each item style="--title-bg: url('+arr[i][3]+')"
wrap.innerHTML += '<tr><td>' + arr[i][2] + '</td><td id="' + 'demo' + (i + 1) + '"></td></tr>'
in the css set the background image to be that variable
[data-title]:after {
...
background-image: var(--title-bg);
...
}
you can go for a js solution but I think this one is a bit nicer

Tooltip Html for table google visualisation

I would like to show a tooltip in HTML format on a structure with the data of columns 2,3,4 which are hidden.
I can not get the addeventlistener to work when I'm doing an onmouseover on a cell.
I would like the tooltip to be triggered when moving the mouse over the column 'number' (col 1).
<html>
<head>
<style>
div.google-visualization-tooltip {
width: auto;
height:auto;
background-color: red;
color: #000000;
text-align: center;
vertical-align: middle;
}
</style>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable,);
// start chart
function drawTable() {
var data = new google.visualization.DataTable();
// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'number');
data.addColumn('number', 'ok');
data.addColumn('number', 'warnning');
data.addColumn('number', 'nok');
// add data
data.addRows([
['Mike',18,10,3,5],
['Jim', 8,5,2,1],
['Alice', 12,6,3,3],
['Bob', 7,2,4,1],
['Sourav',9,1,0,8],
['Sunil', 16,15,0,1],
['Vinod', 19,14,4,1]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
table.draw(view, {allowHtml: true});
google.visualization.events.addListener(table, 'onmouseover', function(e){
setTooltipContent(data,e.row);
});
}
// set tooltip
function setTooltipContent(data,row) {
if (row != null) {
var content = '<div class="custom-tooltip" ><table border="1"><tr><td>OK</td><td>warnnig</td><td>NOK</td></tr><tr><td>' + data.getValue(row, 2) + '</td><td>' + data.getValue(row, 3) + '</td><td>' + data.getValue(row, 4) + '</td></tr></table></div>'; //generate tooltip content
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
tooltip.innerHTML = content;
}
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>

the table chart only publishes the following events...
'select', 'page', 'sort', 'ready'
also, no container for google-visualization-tooltip exists for a table chart
to get the desired result, we can wait for the chart's 'ready' event,
then listen for the 'mouseover event on the table's container <div>.
as for google-visualization-tooltip, we can just add our own...
see following working snippet...
google.charts.load('current', {packages:['table']});
google.charts.setOnLoadCallback(drawTable);
// start chart
function drawTable() {
var data = new google.visualization.DataTable();
// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'number');
data.addColumn('number', 'ok');
data.addColumn('number', 'warnning');
data.addColumn('number', 'nok');
// add data
data.addRows([
['Mike',18,10,3,5],
['Jim', 8,5,2,1],
['Alice', 12,6,3,3],
['Bob', 7,2,4,1],
['Sourav',9,1,0,8],
['Sunil', 16,15,0,1],
['Vinod', 19,14,4,1]
]);
var container = document.getElementById('table_div');
var table = new google.visualization.Table(container);
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
google.visualization.events.addListener(table, 'ready', function() {
container.addEventListener('mouseover', function (e) {
setTooltipContent(data, e);
});
container.addEventListener('mouseout', function (e) {
setTooltipContent(data, e);
});
});
table.draw(view, {allowHtml: true});
}
// set tooltip
function setTooltipContent(data, e) {
var col = null;
var row = null;
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
if (e.type === 'mouseover') {
if (e.target.tagName === 'TD') {
col = (e.target.cellIndex);
row = (e.target.parentNode.rowIndex - 1);
}
if ((row !== null) && (col === 1)) {
var content = '<div class="custom-tooltip" ><table border="1"><tr><td>OK</td><td>warnnig</td><td>NOK</td></tr><tr><td>' + data.getValue(row, 2) + '</td><td>' + data.getValue(row, 3) + '</td><td>' + data.getValue(row, 4) + '</td></tr></table></div>'; //generate tooltip content
tooltip.innerHTML = content;
tooltip.style.display = 'block';
tooltip.style.left = (e.pageX + 16) + "px";
tooltip.style.top = (e.pageY + 16) + "px";
} else {
tooltip.style.display = 'none';
}
} else {
tooltip.style.display = 'none';
}
}
div.google-visualization-tooltip {
display: none;
position: absolute;
width: auto;
height:auto;
background-color: red;
color: #000000;
text-align: center;
vertical-align: middle;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
<div class="google-visualization-tooltip"></div>
notes
1) the script library jsapi should no longer be used.
<script src="https://www.google.com/jsapi"></script>
see the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statements, see snippet above.
2) when adding event listeners to any google chart, such as 'ready', they should be assigned before drawing the chart...

hide element on click error "unrecognized expression"? [duplicate]

This question already has answers here:
Handling colon in element ID with jQuery
(9 answers)
Closed 5 years ago.
I'm trying to hide some element when click on this element(option value for categoryfilter on Google Chart)
<div class="goog-menuitem goog-option" role="menuitemradio" aria-checked="false" style="user-select: none;" id=":4">Middle East</div>
and
<div class="goog-menuitem goog-option" role="menuitemradio" aria-checked="false" style="user-select: none;" id=":0" aria-hidden="false"><div class="goog-menuitem-content" style="user-select: none;"><div class="goog-menuitem-checkbox" style="user-select: none;"></div>Africa</div></div>
So I wrote this code
google.visualization.events.addListener(namePicker, 'statechange', hidediv);
function hidediv() {
$("#:0.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
$("#:4.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
}
but I got an error
Syntax error, unrecognized expression: #:0.goog-menuitem.goog-option
Runnable Snippet
<html>
<head>
<link rel="stylesheet" href="styles_timeline.css">
</head>
<body width="880">
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
google.charts.load('current', {
'packages': ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
//all
query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
query1.send(drawDashboard);
}
function drawDashboard(response1) {
var data1 = response1.getDataTable();
//set year that<2000 to 2000
for (i = 0; i < data1.getNumberOfRows(); i++) {
var startdate = new Date(data1.getValue(i, 12));
var y = startdate.getFullYear();
if (y < 2000) {
r = data1.getValue(i, 12);
//console.log(i);
startdate.setFullYear(2000);
data1.setValue(i, 12, startdate);
}
}
//set start date to previous row end date - groupByRowLabel
for (var row = 1; row < data1.getNumberOfRows(); row++) {
if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label
if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
}
}
}
var view1 = new google.visualization.DataView(data1);
view1.setColumns([
//index column 0
{
type: 'string',
id: 'Country',
calc: function(dt, row) {
//return countryname statename - policies // USA New York - WEEE
return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
}
},
//index column 1
{
type: 'string',
id: 'region',
calc: function(dt, row) {
return dt.getFormattedValue(row, 8)
}
}
//index column 2
, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function(dt, row) {
var country = dt.getFormattedValue(row, 5)
var policy = dt.getFormattedValue(row, 6)
var dataname = dt.getFormattedValue(row, 8)
var dropname = dt.getFormattedValue(row, 11)
var formatter = new google.visualization.DateFormat({
pattern: "MMMM yyyy"
});
var startdate = formatter.formatValue(dt.getValue(row, 12));
//var startdate = dt.getFormattedValue(row, 12)
var comment = dt.getFormattedValue(row, 15)
//colorValues.push(dt.getFormattedValue(row, 6))
return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
'<div id="header1">Dominant (E)PR policy model:<br></div>' +
'<div id="dropname">' + dropname + '<br><br></div>' +
'<div id ="header2">Since : </div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
'<div id ="comment">' + comment + '<\/div>'
}
},
//style role
{
type: 'string',
id: 'color',
role: 'style',
calc: function(dt, row) {
return dt.getFormattedValue(row, 25)
}
},
//index column 3,4 start-enddate
12, 13,
]);
var chart1 = new google.visualization.ChartWrapper({
chartType: 'Timeline',
//dataTable: 'data1',
containerId: 'colormap1',
options: {
width: 870,
height: 800,
//colors: colorValues,
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontSize: 14,
width: 800,
},
showBarLabels: false
},
hAxis: {
minValue: new Date(2010, 0, 0),
maxValue: new Date(2017, 0, 0)
},
tooltip: {
isHtml: true
},
}
});
var namePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnIndex': '1',
'ui': {
'labelStacking': 'vertical',
'caption': 'Choose a Region',
'cssClass': 'filter',
'selectedValuesLayout': 'aside',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(namePicker, chart1);
// Draw the dashboard.
dashboard.draw(view1);
google.visualization.events.addListener(chart1, 'ready', function() {
var svgParent = colormap1.getElementsByTagName('svg')[0];
svgParent.parentNode.style.top = '40px';
Array.prototype.forEach.call(colormap1.getElementsByTagName('text'), function(text) {
if ((text.getAttribute('text-anchor') === 'end') &&
(parseFloat(text.getAttribute('x')) < 200)) {
text.setAttribute("x", "5");
text.setAttribute("text-anchor", "start");
}
if ((text.getAttribute('text-anchor') === 'middle') && (parseFloat(text.getAttribute('x')) < 850)) {
var groupLabel = text.cloneNode(true);
groupLabel.setAttribute('x', '850');
groupLabel.innerHTML = '2017';
groupLabel.setAttribute('y', '971.05');
groupLabel.setAttribute('font-family', 'Arial');
groupLabel.setAttribute('font-size', '13');
svgParent.appendChild(groupLabel);
}
})
})
google.visualization.events.addListener(chart1, 'select', tableSelectHandler);
function tableSelectHandler() {
var selection = chart1.getChart().getSelection()[0];
var chartDataView = chart1.getDataTable();
var rowindex = chartDataView.getTableRowIndex(selection.row);
var cnid = data1.getValue(rowindex, 0);
var polid = data1.getValue(rowindex, 1);
var strid = data1.getValue(rowindex, 2);
//var sid = (strid) - 1;
var statecode = data1.getValue(rowindex, 4);
//if (selection.length > 0) {
//http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
//}
}
google.visualization.events.addListener(namePicker, 'statechange', hidediv);
function hidediv() {
$("#:0.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
$("#:4.goog-menuitem.goog-option").click(function() {
document.getElementById('2000').hide();
document.getElementById('2010').hide();
document.getElementById('2017').hide();
});
}
}
</script>
<div id="dashboard_div">
<div id="2000" style="z-index:1;position: fixed;top: 70px;left: 168px;font-family: Arial;font-size: 13;color:red;">2000</div>
<div id="2010" style="z-index:1;position: fixed;top: 70px;left: 556px;font-family: Arial;font-size: 13;color:red;">2010</div>
<div id="2017" style="z-index:1;position: fixed;top: 70px;left: 850px;font-family: Arial;font-size: 13;color:red;">2017</div>
<div id="filter_div"></div>
<!--chart_div!-->
<div id='colormap1' style="position:fixed;">
</div>
</div>
</body>
</html>
anyone know how to make this works? thank you.

According to How do I select an element by an ID that has characters used in CSS notation? you need to write:
$("#\\:0.goog-menuitem.goog-option")

To show Gauge charts on dashboard using jquery in asp.net c#

I want to show the live connected calls on dashboard using jquery in c#. As take example as- no of connected calls of different centers. So Let me know can I show live working on calls..
Thanks in advance..
This code had tried..
string str_caption = "Month Wise Sales";
string str_Sub_caption = "No Of Sales";
string x_axis = "Month";
string y_axis = "No. Of Sales";
string str_xml = null;
str_xml = #"<graph caption='" + str_caption + #"' subCaption='" + str_Sub_caption + #"' decimalPrecision='0'
pieSliceDepth='30' formatNumberScale='0' xAxisName='" + x_axis + #"' yAxisName='" + y_axis + #"' rotateNames='1' >";
int i = 0;
foreach (DataRow dr in dt.Rows)
{
str_xml += "<set name='" + dr[0].ToString() + "' value='" + dr[1].ToString() + "' color='" + color[i] + #"' "
+ " link="JavaScript:myJS('" + dr["x_month"].ToString() + ", " + dr["no_of_sales"].ToString() + "'); "/>";
i++;
}
str_xml += "</graph>";
FCLiteral1.Text = FusionCharts.RenderChartHTML("Bootstrap/FusionCharts/FCF_Doughnut2D.swf", "", str_xml, "mygraph1",
graph_width, graph_height, false);
This is aspx code..
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>

After Bit of struggle, I succeed to show live calls using javascript in asp.net c#. This is C sharp code, which I have called on page load.
public void sales_rpt()
{
string sql_data = "Select grp.Group_Name,count(ccls.caller_id) as x_calls from currentcalls as ccls "
+ " inner join group_master as grp on ccls.group_id=grp.ID where ccls.`Status`=1";
ViewState["data"] = sql_data;
DataSet ds = BusinessLogic.GetDataSet(ViewState["data"].ToString());
dt = ds.Tables[0];
str.Append(#"<script type=text/javascript>
google.load( *visualization*, *1*, {packages:[*corechart*], callback:drawChart});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Group_Name');
data.addColumn('number', 'x_calls');
data.addColumn({type: 'string', role: 'style'});
data.addRows(" + dt.Rows.Count + ")");
lbl_grp_name.Text = dt.Rows[0]["Group_Name"].ToString();
for(int i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["Group_Name"].ToString() + "'");
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["x_calls"].ToString() + "'");
}
str.Append(#" var view = new google.visualization.DataView(data);
view.setColumns([0, {
sourceColumn: 1,
calc: function () {return 0;}
}, 2]);
var chart = new google.visualization.ColumnChart(document.getElementById('g2'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
chart.draw(data, {
width: 700,
height: 400,
title: 'Group Name',
color: '#0092CB',
min: 0,
max: '100',
hAxis: {
title: 'Connected Calls',
label: 'No Of Calls'
},
animation: {
duration: 1000
}
});
});
chart.draw(view, {
width: 700,
height: 400,
title: 'Group Name',
color: '#0092CB',
hAxis: {
title: 'Connected Calls',
label: 'No Of Calls'
},
animation: {
duration: 1000
}
});
}
</script>");
FCLiteral1.Text = str.ToString().TrimEnd(',').Replace('*','"');
}
Before above code, you need to add javascript and style of graph on aspx page.
<style>
body {
text-align: left;
}
#g1 {
width:600px; height:400px;
display: inline-block;
margin: 1em;
}
#g2, #g3, #g4 {
width:100px; height:80px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
//JavaScript
<script>
var graph;
window.onload = function () {
var graph = new JustGage({
id: "g2",
value: getRandomInt(0, 100),
min: 0,
max: 100,
title: "Connected Calls",
label: "No of Calls"
});
}
</script>
// Form Code, where you need to call id of of g1,g2,g3.
<div id="g2" class="form-horizontal">
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>

Interactive donut chart Google Charts API

I have created a donut chart from Google Charts API. When clicking on each slice, it should increase by 10 units and decrease the adjacent slice (clockwise) by 10 units. What I have thus far is a alert popup that explains this, but I would like to redraw the chart with the new values.
Here is my code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Option');
data.addColumn('number', 'Value');
data.addRows([
['Option A', 40],
['Option B', 30],
['Option C', 30]
]);
// Set chart options
var options = {
height: 300,
fontName: 'Lato, sans-serif',
title: 'Values per option',
titleTextStyle: {
color: '#5a5a5a',
fontSize: 20,
bold: true,
align: 'center'
},
pieHole: 0.6,
slices: {
0: {color: 'red'},
1: {color: 'blue'},
2: {color: 'green'}
},
legend: {
position: 'bottom',
textStyle: {
color: '#5a5a5a',
fontSize: 14
}
},
enableInteractivity: true,
pieSliceText: 'none'
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem && selectedItem.row <2) {
var activeTrait = data.getValue(selectedItem.row, 0);
activePerc = data.getValue(selectedItem.row, 1);
activePercNew = parseInt(activePerc)+10
adjaceTrait = data.getValue(selectedItem.row+1, 0);
adjacePerc = data.getValue(selectedItem.row+1, 1);
adjacePercNew = parseInt(adjacePerc)-10
alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.');
}
if (selectedItem && selectedItem.row == 2) {
var activeTrait = data.getValue(selectedItem.row, 0);
activePerc = data.getValue(selectedItem.row, 1);
activePercNew = parseInt(activePerc)+10
adjaceTrait = data.getValue(selectedItem.row-2, 0);
adjacePerc = data.getValue(selectedItem.row-2, 1);
adjacePercNew = parseInt(adjacePerc)-10
alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.');
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:800; height:300"></div>
</body>
</html>
I would just like to resize the selected and adjacent slices by clicking on a single slice.