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>
Related
I am taking the exciting running and tested code with different database. I am able to connect to the database and the file did take user id from the database but when I click on button "click here to begin" nothing happens no error log entry was generated. just the Uncaught SyntaxError: Invalid or unexpected token when inspect (ctrl + shift + i) the file.
<!DOCTYPE HTML>
<?php
require("db.php");
$userid = mysqli_real_escape_string($db_connection, $_GET["user_id"]);
$strSQL = "SELECT * FROM `t01_users` where `a01_userid` = '. $userid.' ";
$result = mysqli_query($db_connection, $strSQL) or die(mysqli_error($db_connection));
if (!$result) {
echo("<p>Error performing query: " . mysqli_error($db_connection) . "</p>");
exit();
}
$row = mysqli_fetch_array($result);
?>
<head>
<title>TEST YOUR KNOWLEDGE</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div>
<div>
<h1 class="text-center">TEST YOUR KNOWLEDGE</h1>
<!-- display course title -->
<p class="text-center" id="course_title">Test quiz</p>
</div>
<div>
</div>
<!-- display quiz score -->
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6 text-right">
<span id="your_score"> </span>
</div>
</div>
<!-- quiz part -->
<div id="quiz_part">
<div>
<img src="images/cubic.png">
</div>
<div>
<p class="text-center">This quiz contains <span id="number_of_question">8</span> questions.<br>
<span class="text-center">
You need to achieve a score of at least <span id="pass_percentage">80</span>% to complete the course.</span>
</p>
</div>
<div class="text-center">
<button id="start_quiz">CLICK HERE TO BEGIN</button>
</div>
</div>
<div class="text-right" id="submit_button_div">
</div>
</div>
</div>
<div id="no_check" title="Invalid answer" style="font-family:Calibri;">Please select an answer before submitting.</div>
<div id="correct" title="This is correct." class="dialog">
<div class="correct_content" style="font-family:Calibri;"></div>
</div>
<div id="incorrect" title="This is incorrect." class="dialog">
<div class="incorrect_content" style="font-family:Calibri;"></div>
</div>
<script>
$(document).ready(function () {
var screenWidth, dialogWidth;
screenWidth = window.screen.width;
if ( screenWidth < 500 ) {
dialogWidth = screenWidth * .95;
} else {
dialogWidth = 500;
}
var userid = <?php echo $userid ; ?>;
var flag = 0;
var score = 0;
var current_question_number = 0;
var current_question = "";
var course_title = "";
var number_of_question = 0;
var pass_percentage = 0;
var progress_url = "";
var pass_remark = "";
var failed_remark = "";
var questions = new Array();
$( "#no_check" ).dialog({ autoOpen: false });
$.getJSON( "questions.json", function(data) {
// note: this getJSON access the file asynchronously. must set value inside the block
course_title = data.course_title;
$("#course_title").html(course_title);
number_of_question = data.number_of_question;
$("#number_of_question").html(number_of_question);
pass_percentage = data.pass_percentage;
$("#pass_percentage").html(pass_percentage);
progress_url = data.progress_url
//alert(progress_url);
pass_remark = data.pass_remark;
failed_remark = data.failed_remark;
for(i=0; i<data.question_list.length; i++){
questions[i]=new Array;
questions[i]["question_number"] = data.question_list[i].question_number;
questions[i]["annotation"] = data.question_list[i].annotation;
questions[i]["question"] = data.question_list[i].question;
questions[i]["type"] = data.question_list[i].type;
questions[i]["instruction"] = data.question_list[i].instruction;
choice = new Array();
for (j=0; j<data.question_list[i].choice.length; j++){
var option = new Array();
option["label"] = data.question_list[i].choice[j].label;
//alert(data.question_list[i].choice[j].label);
option["option"] = data.question_list[i].choice[j].option;
choice[j] = option;
}
questions[i]["choice"] = choice;
questions[i]["answer"] = data.question_list[i].answer;
questions[i]["correct_description"] = data.question_list[i].correct_description;
questions[i]["incorrect_description"] = data.question_list[i].incorrect_description;
questions[i]["correct_comment"] = data.question_list[i].correct_comment; //**********************
questions[i]["incorrect_comment"] = data.question_list[i].incorrect_comment; //************************
}
});
$("#start_quiz").on("click", function(){
$("#your_score").html("YOUR SCORE: " + score + " OUT OF " + number_of_question);
current_question = questions[current_question_number];
if (current_question["annotation"] != "" && flag == 0){
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p>" + current_question["annotation"] + "</p>";
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='annotation_continue' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>Click to Continue</button>");
}else{
flag = 0;
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p><span style='color: red;'>" + current_question["type"] + "</span> " + current_question["question"] + " <b>" + current_question["instruction"] + "</b></p><br>";
for (m = 0; m<current_question["choice"].length; m++){
question_html += "<p> <input type='radio' name='choice' value='" + current_question["choice"][m]["label"] + "'> <span class='radio-content'>" + current_question["choice"][m]["option"] + "</span></p>";
}
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='submit_answer' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>SUBMIT</button>");
}
});
$("#submit_button_div").on('click', '#annotation_continue', function(){
flag = 1;
continue_button();
});
// $("#submit_answer").on("click", function(){
$("#submit_button_div").on('click', '#submit_answer', function(){
//current_question_number++;
var answer = current_question["answer"];
var correct_desc = current_question["correct_description"];
var incorrect_desc = current_question["incorrect_description"];
var correct_comment = current_question["correct_comment"]; //************************
var incorrect_comment = current_question["incorrect_comment"]; //************************
var checked_answer = $("input[name='choice']:checked").val();
if (!checked_answer){
//$( "#no_check" ).dialog("open");
dialog = $("#no_check").dialog({
//width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 200,
height: 'auto',
modal : true,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: {
'OK': function () {
agreed = true;
$(this).dialog("close");
}
},
beforeClose: function () {
return agreed;
}
});
dialog.dialog("open");
}else if(checked_answer == answer){
current_question_number++;
//autoOpen : false,
score++;
// submit the new score to server
$.ajax({
method: "POST",
url: progress_url,
data: { a01_userid: userid, userProgress: score }
});
$("#your_score").html("YOUR SCORE: " + score + " OUT OF " + number_of_question);
$(".correct_content").html("<span style='color:green; font-family:Calibri;'>" + correct_desc + "</span> " + correct_comment); //*****************************
$("#correct").dialog({
width: dialogWidth,
height: 'auto',
position: {my: "center", at: "center", of: window},
modal : true,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: [
{
text: "Continue",
class: 'correct_button',
click: function() {
$(this).dialog("close");
}
}
],
beforeClose: function () {
continue_button();
}
}).prev(".ui-dialog-titlebar").css("color","green");
$("#correct").dialog("open", "position", {my: "center", at: "center", of: window});
}else{
current_question_number++;
$(".incorrect_content").html("<span style='color:red; font-family:Calibri;'>" + incorrect_desc + "</span> " + incorrect_comment); //****************
$("#incorrect").dialog({
width: dialogWidth,
height: 'auto',
position: {my: "center", at: "center", of: window},
modal : true,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: [
{
text: "Continue",
class: 'incorrect_button',
click: function() {
$(this).dialog("close");
}
}
],
beforeClose: function () {
continue_button();
}
}).prev(".ui-dialog-titlebar").css("color","red");
$("#incorrect").dialog("open", "position", {my: "center", at: "center", of: window});
}
});
$("#quiz_part").on('click', '#retry_button', function(){
location.reload(true);
});
function continue_button(){
if (current_question_number == number_of_question){
var percentage = score / number_of_question;
var pass = pass_percentage / 100;
if (percentage >= pass){
passed();
}else{
failed();
}
return false;
}
current_question = questions[current_question_number];
if (current_question["annotation"] != "" && flag == 0){
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p>" + current_question["annotation"] + "</p>";
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='annotation_continue' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>Click to Continue</button>");
}else{
flag = 0;
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p><span style='color: red;'>" + current_question["type"] + "</span> " + current_question["question"] + " <b>" + current_question["instruction"] + "</b></p><br>";
for (m = 0; m<current_question["choice"].length; m++){
question_html += "<p> <input type='radio' name='choice' value='" + current_question["choice"][m]["label"] + "'> <span class='radio-content'>" + current_question["choice"][m]["option"] + "</span></p>";
}
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='submit_answer' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>SUBMIT</button>");
}
}
function passed(){
var failed_html = '<div style="width:100%;padding: 1.5vw 0 1vw 0;" class="text-center"> \
<img src="images/success.png" style="width: 70%"> \
</div>';
$("#quiz_part").html(failed_html);
$("#submit_button_div").html("");
}
function failed(){
var failed_html = '<div style="width:100%;padding: 1.5vw 0 1vw 0;" class="text-center"> \
<img src="images/failed.png" style="width: 70%"> \
</div> \
<div style="width:100%;padding: 1vw 0 1vw 0;" class="text-center"> \
<p class="text-center" style="color:#222222;"><b>';
failed_html += failed_remark;
failed_html += '</b></p></div>';
failed_html += '<div style="width:100%;" class="text-center" id="retry_div"> \
<button id="retry_button" style="padding:1vw 3vw; background-color: #293155; font-weight: bold; font-size: 24px; color:#ffffff;" id="start_quiz">CLICK HERE TO RETRY</button> \
</div>';
$("#quiz_part").html(failed_html);
$("#submit_button_div").html("");
}
});
</script>
</body>
</html>
when i click on the error on right corner it shows:
var userid = ***#test.in; //which the userid from the database
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")
i found this guide to create a stock ticker.
I tried to change it into an html table, but i'm stuck.
So, i created the table, but i have big problems to divide each variable.
What i want to accomplish is a table with this columns order:
Symbol: CompName
Price: Price
Change: PriceIcon + ChnageInPrice
%: PercentChnageInPrice
What i've accomplished for now it's just this, all the content in one column (because of the variable StockTickerHTML i guess)
Full Code Link
Can you please help me?
var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
var StockTickerHTML = "";
var StockTickerXML = $.get(flickerAPI, function(xml) {
$(xml).find("quote").each(function () {
Symbol = $(this).attr("symbol");
$(this).find("Name").each(function () {
CompName = $(this).text();
});
$(this).find("LastTradePriceOnly").each(function () {
Price = $(this).text();
});
$(this).find("Change").each(function () {
ChnageInPrice = $(this).text();
});
$(this).find("PercentChange").each(function () {
PercentChnageInPrice = $(this).text();
});
var PriceClass = "GreenText", PriceIcon="up_green";
if(parseFloat(ChnageInPrice) < 0) { PriceClass = "RedText"; PriceIcon="down_red"; }
StockTickerHTML = StockTickerHTML + "<span class='" + PriceClass + "'>";
StockTickerHTML = StockTickerHTML + "<span class='quote'>" + CompName + " </span> ";
StockTickerHTML = StockTickerHTML + parseFloat(Price).toFixed(2) + " ";
StockTickerHTML = StockTickerHTML + "<span class='" + PriceIcon + "'></span>" + parseFloat(Math.abs(ChnageInPrice)).toFixed(2) + " (";
StockTickerHTML = StockTickerHTML + parseFloat( Math.abs(PercentChnageInPrice.split('%')[0])).toFixed(2) + "%)</span> </br>";
});
$("#dvStockTicker").html(StockTickerHTML);
$("#dvStockTicker").jStockTicker({interval: 30, speed: 2});
});
}
One solution could be this :
(see comments in code)
$(window).load(function() {
StockPriceTicker();
setInterval(function() {
StockPriceTicker();
}, 2 * 1000); // <------ we refresh each 2 seconds
});
// we get the table's body where
// the lines will be inserted.
var $body = $('table tbody');
/*
this will be the cache of
our lines, once they are prepared / transformed
as your need, we will join and insert them
in the body of our table.
*/
var Lines = [];
/*
We define a function in charge of creating the HTML
of each row of hour table, and then push them
in the array defined above "Lines".
*/
var addLine = function(symbol, price, change, percent) {
Lines.push('<tr>' +
'<td class="symbol" >' + symbol + '</td>' +
'<td class="price" >' + price + '</td>' +
'<td class="change" >' + change + '</td>' +
'<td class="percent">' + percent + '</td>' +
'</tr>');
};
// this is your function to get data
function StockPriceTicker() {
var Symbol = "",
CompName = "",
Price = "",
ChnageInPrice = "",
PercentChnageInPrice = "";
var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
var StockTickerXML = $.get(flickerAPI, function(xml) {
$(xml).find("quote").each(function() {
Symbol = $(this).attr("symbol");
$(this).find("Name").each(function() {
CompName = $(this).text();
});
$(this).find("LastTradePriceOnly").each(function() {
Price = $(this).text();
});
$(this).find("Change").each(function() {
ChnageInPrice = $(this).text();
});
$(this).find("PercentChange").each(function() {
PercentChnageInPrice = $(this).text();
});
var PriceClass = "GreenText",
PriceIcon = "up_green";
if (parseFloat(ChnageInPrice) < 0) {
PriceClass = "RedText";
PriceIcon = "down_red";
}
/*
We create the html to be inserted on each xml loop.
- First : prepare and transform as you need
- Last : use the function we define above "addLine";
*/
var htmlSymbol,
htmlPrice,
htmlChange,
htmlPercent;
htmlSymbol = "<span class='" + PriceClass + "'>";
htmlSymbol = htmlSymbol + "<span class='quote'>" + CompName + " </span></span>";
htmlPrice = parseFloat(Price).toFixed(2) + " ";
htmlChange = parseFloat(Math.abs(ChnageInPrice)).toFixed(2) + "<span class='" + PriceIcon + "'></span>";
htmlPercent = parseFloat(Math.abs(PercentChnageInPrice.split('%')[0])).toFixed(2) + "%";
// We use here the function defined above.
addLine(htmlSymbol, htmlPrice, htmlChange, htmlPercent);
});
/*
Once the loop of reading the XML
end, we have pushed all html in the array "Lines".
So now we delete the content of our table's body, and
we fill it with all the lines joined.
*/
$body.empty().html(Lines.join(''));
// we reset the content of Lines for the next interval
Lines = [];
});
}
.GreenText {
color: Green;
}
.RedText {
color: Red;
}
.up_green {
background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/up.gif) no-repeat left center;
padding-left: 10px;
margin-right: 5px;
margin-left: 5px;
}
.down_red {
background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/down.gif) no-repeat left center;
padding-left: 10px;
margin-right: 5px;
margin-left: 5px;
}
table {
border: solid;
border-color: #666;
}
td {
padding: 3px;
}
.symbol {
border: solid 3px #DDD;
}
.price {
border: solid 3px aqua;
}
.change {
border: solid 3px yellow;
}
.percent {
border: solid 3px purple;
}
td.price,
td.change,
td.percent {
text-align: right;
}
tbody tr:nth-child(odd){
background-color:#EEF;
}
tbody tr:nth-child(even){
background-color:#AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class='symbol'>Symbol</th>
<th class='price'>Price</th>
<th class='change'>Change</th>
<th class='percent'>%</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
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'
}
I have three dynamically created divs on a page. when the user click on a div, an 'edit text' button appears.
When the user clicks the edit text button, I want a nicedit format bar to appear over the div so the user can edit the text.
I have created most of the code below but am having an issue with removing the format bar from one box when editing another box. Also once a box has been edited it cannot be edited again.
Where am I going wrong?
I have created a jsfiddle so you can see what my problem is - http://jsfiddle.net/j6FLa/7/
and here is the code
<style>
.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
z-index:2
}
.textarea1 {
width: 300px;
height:75px;
padding: 0.5em;
z-index:3;
resize:none;
}
#content {
display: block;
position:absolute;
top:150px;
left:0px;
margin:auto;
z-index:1;
}
.editbutton {
background-color:#CCC;
width:50px;
height:20px;
font-size:10px;
z-index:1003;
}
#myNicPanel {
visibility:hidden;
}
</style>
<script>
var startleft = -100;
var myNicEditor;
for (var m = 1; m < 4; m++) {
startleft = +startleft + 200;
OldTextArea(m, 'draggable', 50, startleft, '150', '150', 'new textbox', m, '5', 'solid', '#ff0000', '5');
}
function OldTextArea(i, id, top, left, width, height, content, zindex, borderwidth, borderstyle, bordercolor, padding) {
id = id + i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate', i);
newdiv.style.position = "absolute";
newdiv.style.top = top + "px";
newdiv.style.left = left + "px";
newdiv.innerHTML = "<br><div id='div" + i + "' name='textarea[" + i + "]' class='textarea1' style='padding:" + padding + "px; border-width:" + borderwidth + "px; border-style:" + borderstyle + "; border-color:" + bordercolor + "; width:" + width + "px; height:" + height + "px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div></div>";
document.getElementById("frmMain").appendChild(newdiv);
var top_button_left_pos = -75;
var area1 = "";
var edit = document.createElement('input');
edit.setAttribute('type', 'button');
edit.setAttribute('value', 'edit this text');
edit.setAttribute('class', 'editbutton');
edit.style.position = "absolute";
edit.style.top = "30px";
edit.style.width = "75px";
edit.style.left = +top_button_left_pos + "px";
edit.style.float = "left";
edit.style.visibility = "hidden";
edit.onclick = function(e) {
if (area1 == "") {
myNicEditor = new nicEditor({
buttonList: ['fontSize', 'fontFamily', 'fontFormat', 'bold', 'italic', 'underline', 'left', 'centre', 'right', 'justify', 'ol', 'ul', 'removeformat', 'indent', 'outdent', 'hr', 'forecolor', 'bgcolor', 'link', 'unlink']
});
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('div' + i);
var contentclick = document.getElementById('span' + i);
contentclick.style.cursor = "select";
contentclick.onmousedown = function(event) {
event.stopPropagation();
e.cancelBubble = true;
};
document.getElementById('myNicPanel').style.position = 'relative';
document.getElementById('myNicPanel').style.top = +top + "px";
document.getElementById('myNicPanel').style.left = +left + "px";
document.getElementById('myNicPanel').style.visibility = 'visible';
area1 = '1';
} else {
area1 = "";
document.getElementById('myNicPanel').style.visibility = 'hidden';
myNicEditor.removeInstance('div' + i);
}
};
newbr = document.createElement('BR');
document.getElementById(id).appendChild(newbr);
document.getElementById(id).appendChild(edit);
$('.dragbox').click(function() {
$(".editbutton").css('visibility', 'hidden');
$(this).find(".editbutton").css('visibility', 'visible');
});
$('.dragbox').focusout(function() {
$(".editbutton").css('visibility', 'hidden');
$('#frmMain').find('#myNicPanel').style.visibility = 'hidden';
});
}
</script>
<div id="myNicPanel" style="width: 600px;"></div>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div19.php" method="post">
<div id="content"></div>
</form>
EDIT
I have managed to get the edit bars to dissapear and reappear when clicking from box to box, but once edited I cannot get the bar to reappear ove that box - http://jsfiddle.net/j6FLa/8/
I managed to get it working by removing the focusout function.