Develop Reference

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>

How to always show day on google time chart

I'm using timeline chart of google once you hover on data it will show the duration, start and end date but only in Month and Year. If the time span is short like a week it will show the day but if month or year it will show only the month and year.
I want also to show the day but I'm struggling to do that, can't find any instruction. Please see the js fiddle link and code below.
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Target Date', new Date(2016, 10, 15), new Date(2017, 11, 18)],
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Actual Date', new Date(2016, 11, 25), new Date(2017, 11, 30)]
]);
chart.draw(dataTable);
}
https://jsfiddle.net/mt15199/xsnru9oq/

only option to customize the tooltip is to provide your own...
problem there is you must calculate the duration yourself
see the following working snippet for an example...
a tooltip column is added and populated based on the dates found on each row
google.charts.load('current', {
callback: function () {
drawTimeline();
window.addEventListener('resize', drawTimeline, false);
},
packages:['timeline']
});
function drawTimeline() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Target Date', new Date(2016, 10, 15), new Date(2017, 11, 18)],
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Actual Date', new Date(2016, 11, 25), new Date(2017, 11, 30)]
]);
var formatDate = new google.visualization.DateFormat({
pattern: 'MM/dd/yyyy'
});
dataTable.insertColumn(2, { type: 'string', role: 'tooltip', p: {html: true} });
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
var duration = Math.abs(dataTable.getValue(i, 4).getTime() - dataTable.getValue(i, 3).getTime()) / 1000;
var days = Math.floor(duration / 86400);
duration -= days * 86400;
var hours = Math.floor(duration / 3600) % 24;
duration -= hours * 3600;
var minutes = Math.floor(duration / 60) % 60;
duration -= minutes * 60;
var seconds = duration % 60; // in theory the modulus is not required
var tooltip = '';
tooltip += '<div class="ggl-tooltip"><div>';
tooltip += '<span>' + dataTable.getValue(i, 1) + '</span>';
tooltip += '</div><div>';
tooltip += '<span>' + dataTable.getValue(i, 0) + ': </span>';
tooltip += formatDate.formatValue(dataTable.getValue(i, 3)) + ' - ';
tooltip += formatDate.formatValue(dataTable.getValue(i, 4));
tooltip += '</div><div>';
tooltip += '<span>Duration: </span>';
tooltip += days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds';
tooltip += '</div></div>';
dataTable.setValue(i, 2, tooltip);
}
chart.draw(dataTable, {
tooltip: {
isHtml: true
}
});
}
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
}
.ggl-tooltip div {
border: 1px solid #E0E0E0;
padding: 8px 8px 8px 8px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to add HTML text field with value from select list via Javascript

I have select list like this:
$.fn.optionTest = function(opts) {
var option = $.extend({}, $.fn.optionTest.defaults, opts);
$(this).change(function() {
option.holderObject = $(this);
if (option.clearOnChange) {
$(option.actionId).empty();
}
var val = $(this).val();
if ($.fn.optionTest.isArray(val)) {
$.fn.optionTest.parseArray(val, option);
} else {
var label = $(this).children("option:selected").eq(0).text();
$.fn.optionTest.parseContent(val, option, label);
}
$('.' + option.removeLinkOptions.class).click(function(event) {
$.fn.optionTest.removeRow(this, option);
event.preventDefault();
});
$("[type=date]").datepicker({
monthNamesShort: $.datepicker.regional["en"].monthNames,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: "-116:+10",
});
return this;
});
};
$.fn.optionTest.isArray = function(val) {
return Object.prototype.toString.call(val) === '[object Array]';
};
$.fn.optionTest.defaults = {
clearOnChange: false,
actionId: '#action',
indexOptions: {
class: 'field-style field-split25 align-left'
},
rowOptions: {
class: 'certificates',
type: 'text',
name: 'CertificateType[]',
tag: 'ul'
},
CertNoOptions: {
name: 'CertNo[]',
type: 'text',
placeholder: 'Cert No.',
size: 20,
class: 'field-style field-split25 align-left'
},
PlaceofIssueOptions: {
name: 'PlaceofIssueCert[]',
type: 'text',
placeholder: 'Place of Issue',
size: 20,
class: 'field-style field-split25 align-left'
},
fromOptions: {
name: 'FromCert[]',
type: 'date',
placeholder: 'Date of Issue',
size: 20,
class: 'field-style field-split25 align-left'
},
toOptions: {
name: 'ToCert[]',
type: 'date',
placeholder: 'Date of Expire',
size: 20,
class: 'field-style field-split25 align-left'
},
labelOptions: {
class: 'field-style field-split25 align-left',
type: 'text'
},
removeLinkOptions: {
class: 'removeRow',
href: 'javascript:;'
}
};
$.fn.optionTest.parseArray = function(vals, options) {
var selectedOptions = options.holderObject.children("option:selected");
console.log(selectedOptions.eq(0).html());
$.each(vals, function(key, val) {
$.fn.optionTest.parseContent(val, options, selectedOptions.eq(key).text());
});
};
$.fn.optionTest.removeRow = function(elem, options) {
var row = $(elem).closest(".certificates");
row.remove();
$.fn.optionTest.updateRowIndex(options);
};
$.fn.optionTest.updateRowIndex = function(options) {
$("." + options.rowOptions.class).each(function(key, value) {
var index = key + 1;
$(value).attr('rowdataid', index);
$(value).children("." + options.indexOptions.class).html(index);
});
};
$.fn.optionTest.createColumn = function(content) {
var li = $('<li>');
return li.append(content);
}
$.fn.optionTest.parseContent = function(val, options, label) {
var index = $('.' + options.rowOptions.class).length + 1;
var rowData = $.extend({}, options.rowOptions);
var indexData = $.extend({}, options.indexOptions);
rowData.rowDataId = index;
var CertNoData = $.extend({}, options.CertNoOptions);
CertNoData.name = CertNoData.name;
var PlaceofIssueData = $.extend({}, options.PlaceofIssueOptions);
PlaceofIssueData.name = PlaceofIssueData.name;
var DateofIssueData = $.extend({}, options.DateofIssueOptions);
DateofIssueData.name = DateofIssueData.name;
var DateofExpireData = $.extend({}, options.DateofExpireOptions);
DateofExpireData.name = DateofExpireData.name;
var fromData = $.extend({}, options.fromOptions);
fromData.name = fromData.name;
var toData = $.extend({}, options.toOptions);
toData.name = toData.name;
var start_by = "<li><ul class='column'><li>";
var end_by = "</li></ul></li>";
var labelData = $.extend({}, options.labelOptions);
if ($('#' + rowData.id).length == 0) {
var tag = "<" + rowData.tag + ">";
delete rowData['tag'];
var row = $(tag, rowData);
var id = $('<li>', indexData).html(index);
//var label = $('<li>', labelData).html(label);
var label = $.fn.optionTest.createColumn($("<input>", labelData));
label = $(start_by + $(label).html() + end_by);
var CertNo = $.fn.optionTest.createColumn($("<input>", CertNoData));
CertNo = $(start_by + $(CertNo).html() + end_by);
var PlaceofIssue = $.fn.optionTest.createColumn($("<input>", PlaceofIssueData));
PlaceofIssue = $(start_by + $(PlaceofIssue).html() + end_by);
var DateofIssue = $.fn.optionTest.createColumn($("<input>", DateofIssueData));
DateofIssue = $(start_by + $(DateofIssue).html() + end_by);
var DateofExpire = $.fn.optionTest.createColumn($("<input>", DateofExpireData));
DateofExpire = $(start_by + $(DateofExpire).html() + end_by);
var from = $.fn.optionTest.createColumn($("<input>", fromData));
from = $(start_by + $(from).html() + end_by);
var to = $.fn.optionTest.createColumn($("<input>", toData));
to = $(start_by + $(to).html() + end_by);
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions).text("X"));
removeRow = $($(removeRow).html());
// row.append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);
row.append('<input type="hidden" name="RowCertificateType[]" value="' + val + '" />').append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);
$(options.actionId).append(row);
}
};
$(document).ready(function() {
$('#options').optionTest({
actionId: '.action2',
clearOnChange: false
});
});
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<fieldset class="fieldset-borders">
<legend>6. Certificates</legend>
<ul class="header">
<li>
<select id='options' name="CertificateType[]" class="field-style div-format align-left">
<option selected disabled value="0">Select certificates</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="3">OTHER</option>
</select>
</li>
</ul>
<div class="action2" ></div>
</fieldset>
As you see after selecting any option from list It adding some fields. I need to add text field label with value that selected from options.
As in example I have 3 options:
Foo
Bar
OTHER
If I select Foo It should add fields like:
Foo [ ] [ ] [ ] [ ]
If I select Bar It should add fields like:
Bar [ ] [ ] [ ] [ ]
If I select OTHER It should generate only blank fields without value:
[ ] [ ] [ ] [ ] [ ]
For now It adding all blank fields for any selected option.
If I use:
var label = $('<li>', labelData).html(label);
Instead of:
var label = $.fn.optionTest.createColumn($("<input>", labelData));
label = $(start_by + $(label).html() + end_by);
It adding label field with value, but not editable, It's not text field and after adding OTHER It can't be changed.
Have you ideas how can I achieve correct syntax with If? Something like:
If (option selected = 'OTHER') {
var label = $.fn.optionTest.createColumn($("<input>", labelData));
label = $(start_by + $(label).html() + end_by);
}
else {
var label = $('<li>', labelData).html(label);
}

I cannot be certain that I understand your question, but I think what you want is for the selected label to display as the value in the first input field, unless the selected label is "OTHER", in which case the field should have no value property.
If this is correct, we could achieve this by extending our labelData object:
var labelData = $.extend({}, options.labelOptions, {
value: ((label === 'OTHER') ? '' : label)
});

Repeating time on fullcalendar event

I'm trying to make some repeating events on a certain time with full calendar.
For example i want the events to happen from
1-3-2016
until 1-7-2016.
Here is the code that i take all the events.
<script type="text/javascript">
$(document).ready(function()
{
var events=new Array();
var numberofevents = '<?php echo count ($info); ?>';
<?php
foreach($info as $module => $kati) { ?>
var date = new Date('<?php echo $kati['ModuleSchedule_StartTtime']; ?>');
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var time = date.getHours();
var start_date = new Date(year, month, day, time, 0);
var end_date = new Date(year, month, day, time+2, 0);
var ranges = [{ start:"2016/03/01", end:"2016/06/01"}] //range of repeat
var event_name = '<?php echo $kati['ModuleSchedule_Module_Name']; ?>';
var event_description = '<?php echo $kati['ModuleSchedule_Semester_Name'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_Classroom'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_TeacherUserFullName'] ?>';
event = new Object();
event.title = event_name;
event.start = start_date;
event.end = end_date;
event.description = event_description;
event.color = "blue";
event.dow = '<?php echo $kati['ModuleSchedule_DayOfWeek']; ?>';
event.ranges = ranges;
event.allDay = false;
events.push(event);
<?php }
?>
$('#calendar').fullCalendar({
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
weekMode: 'liquid',
weekends: true,
theme: true,
selectable: true,
editable: false,
events: events
});
});
On the line that i take the "ranges" is there any proper way to add then in the event ?
Because for sure what i'm trying to do is wrong here.
Thanks for your time!

Add this to your event object
event.dowend = new Date('2016/7/1');
and on eventRender check if date has reach the dowend and if that's true return false, so the calendar wont create the event
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
var theDate = event.start
var endDate = event.dowend;
if (theDate >= endDate) {
return false;
}
}

I extended the solution and created a jsfiddle [
$(document).ready(function() {
$('#scheduler').fullCalendar({
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
},
defaultView: 'month',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-15T16:00:00',
events: [{
id: 1,
title:"Front End",
start:'10:00',
end: '13:00',
dow: [0, 1, 2, 3, 4, 5, 6],
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
}
]
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet"/>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id='scheduler'></div>
]1 to show you the specific solution that display daily concurrent event only between two dates.
The solution relies on add the two custom dates parameters for the event object:
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
And then add the condition to the eventRender function:
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
}

You can also use ranges. Please check the code below
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title: "My repeating event",
start: '10:00',
end: '14:00',
dow: [1, 2, 3, 4],
ranges: [{
start: moment().startOf('week'), //next two weeks
end: moment().endOf('week').add(7, 'd'),
}, {
start: moment('2018-06-15', 'YYYY-MM-DD'), //all of february
end: moment('2018-06-15', 'YYYY-MM-DD').endOf('month'),
}, ],
}],
eventRender: function(event) {
return (event.ranges.filter(function(range) {
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length) > 0;
},
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js"></script>
<div id='calendar'></div>

How can I use HTML tooltip with trigger:'both' in Google Charts

I have to show HTML tooltip (using Google Charts) when the user click an hover de column bars, I've coded this and it shows the tooltip when the user hover the column bar:
<script type="text/javascript">
var colores = ['#1D1E55', '#859DC4', '#6D165E'];
var indiceColorAsignado = 0;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var propiedadCol = {
type: 'string',
role: 'annotation'
};
var dataTable = google.visualization.arrayToDataTable([
['Id', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}<?php
$aux = $encabezados;
$conta = 1;
foreach ($aux as $key => $value) {
if ($conta < 3) {
unset($aux[$key]);
$conta++;
};
}
$complementoEncabezado = "";
foreach ($aux as $key => $value) {
$complementoEncabezado .= ",'".$value."',propiedadCol";
}
$complementoEncabezado .= "],";
echo $complementoEncabezado;
?>
<?php
$renglodDeDatos = "";
$nombresToolTip = $encabezados;
unset($nombresToolTip['id']);
foreach ($datosAGraficar as $key => $value) {
$conta = 1;
foreach ($value as $llave => $valor) {
if ($conta != 2) {
if ($llave == "id") {
$valoresToolTip = $value;
unset($valoresToolTip['id']);
$renglodDeDatos .= "['".$valor."',contenidoHTML(".json_encode($nombresToolTip).",".json_encode($valoresToolTip).")";
} else {
$renglodDeDatos .= ",".$valor.",''";
}
}
$conta++;
}
$renglodDeDatos .= "],";
}
echo $renglodDeDatos;
?>
]);
var options = {
title: '<?php echo $titulo_grafica; ?> del PGD',
hAxis: {
title: '<?php echo $titulo_grafica ?>',
titleTextStyle: {
color: 'black',
bold:true,
},
},
vAxis: {
title: 'Porcentaje',
titleTextStyle: {
color: 'black',
bold:true,
},
},
// colors: ['#7F6FD2', '#94F29C', '#F8ECBC'],
// colors: ['#AF9965', '#DAC674', '#F3E79A'],
// colors: ['#EE7009', '#0A7AAC', '#504C4B'],
// colors: ['#0A19BB', '#02073A', '#4D5073'],
colors: colores,
// backgroundColor: {
// stroke: 'red',
// strokeWidth: 10,
// },
focusTarget: 'category',
selectionMode: 'multiple',
tooltip: {
isHtml: true,
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
google.visualization.events.addListener(chart, 'select', miFuncion);
var columnas = new Array();
function miFuncion() {
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
var str = dataTable.getFormattedValue(item.row, item.column);
message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
} else if (item.row != null) {
var str = dataTable.getFormattedValue(item.row, 0);
message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
} else if (item.column != null) {
var str = dataTable.getFormattedValue(0, item.column);
var indice = columnas.indexOf(item.column);
if (indice != -1) {
columnas.splice(indice, 1);
for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
dataTable.setValue(j, item.column + 1, '');
};
} else{
columnas.unshift(item.column);
for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
dataTable.setValue(j, item.column + 1, (dataTable.getValue(j, item.column)).toString() + '%');
};
};
console.log('columnas '+columnas);
message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
};
};
if (message == '') {
message = 'nothing';
};
console.log('You selected ' + message);
chart.draw(dataTable, options);
}
function contenidoHTML(nombresToolTip,valoresToolTip) {
var indiceObjeto = 1;
var toolTipHTML = '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">';
for(var elemento in nombresToolTip) {
if (indiceObjeto == 1) {
toolTipHTML += '<b>' + nombresToolTip[elemento] + ':</b> ' + valoresToolTip[elemento] +'<br>';
indiceObjeto++;
} else {
toolTipHTML += '<div style="background-color:'+ colores[indiceColorAsignado] +'; padding-left:5px; color:#FFFFFF;"><b>'+ nombresToolTip[elemento] +':</b> '+ (parseFloat(valoresToolTip[elemento])).toFixed(2) +'%</div>'
indiceColorAsignado++;
};
};
toolTipHTML += '</div>';
console.log('HTML '+toolTipHTML);
// return '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">Nombre <br><hr><div style="background-color:#1D1E55; padding-left:5px; color:#FFFFFF;"><b>Avance real:</b> 1000%</div><div style="background-color:#859DC4; padding-left:5px; color:#FFFFFF;"><b>Grado de cumplimiento:</b> 400%</div><div style="background-color:#6D165E; padding-left:5px; color:#FFFFFF;"><b>Avance promedio:</b> 250%</div></div>';
console.log('indiceColorAsignado '+ indiceColorAsignado);
indiceColorAsignado = 0;
return toolTipHTML;
}
}
</script>
How can I get both events(click and hover) in order to show the HTML tooltip? Thank a lot

Just set the option:
tooltip: {
isHtml: true,
trigger: 'both'
}