Develop Reference

Ajax search with pagination.js and/or PHP

I want to do a search that can be triggered by given a specific URL (I tried with ajax and javascript here but im happy with a php variant also). I have 2 requirement phases (both should be displayed with pagination.js):
When I access eg.: https://<.myDomain.>/search/234x15 to put
the value inside the input and the filter automatically or make the
search over the whole database.
When I would go to eg.: https://<.myDomain.>/search I want to make POST search over the whole database.
My general problem is that I cannot include MySQL or other databases, I am limited to either JSON or objects/arrays (JS/php).
With my current solution processing 900 items using a big JSON file gets me a response after 5-8 seconds which is too long. And I will need to fill in with at least 3500 items.
Here is the solution I made:
<script>
var currentKeywords = $(location).attr('pathname');
var currentKeywordsFiltered = currentKeywords.replaceAll('+',' ');
const toBeSearched = currentKeywordsFiltered.split('/')[2];
$('#search-input').attr('value', toBeSearched);
var myArray = <?php echo json_encode($products_merged) ?>;
$(document).ready(function(){
console.log('Url keyword: ', toBeSearched);
var data = searchTable(toBeSearched, myArray);
buildTable(data);
(function(name) {
var container = $('#pagination-' + name);
container.pagination({
dataSource: data,
locator: 'dataSource',
totalNumber: 50,
pageSize: 20,
showPageNumbers: true,
showPrevious: true,
showNext: true,
showNavigator: true,
showFirstOnEllipsisShow: true,
showLastOnEllipsisShow: true,
ajax: {
beforeSend: function() {
container.prev().html('Loading...');
}
},
callback: function(response, pagination) {
window.console && console.log(22, response, pagination);
var dataHtml = '';
$.each(response, function (index, dataSource) {
dataHtml +=
'<div style="border: 1px solid #888888; border-radius: 5px; margin: 15px;" class="col-md-2">'
+ '<div class="card-body">'
+ '<b>'+ dataSource.title +'</b></h5>'
+ 'Vezi specificatii'
+ '</div>'
+ '</div>';
});
dataHtml += '';
container.prev().html(dataHtml);
}
})
})('demo');
});
$('#search-input').on('keyup', function(){
var value = $(this).val();
console.log('value: ', value);
var data = searchTable(value, myArray);
buildTable(data);
(function(name) {
var container = $('#pagination-' + name);
container.pagination({
dataSource: data,
locator: 'dataSource',
totalNumber: 50,
pageSize: 20,
showPageNumbers: true,
showPrevious: true,
showNext: true,
showNavigator: true,
showFirstOnEllipsisShow: true,
showLastOnEllipsisShow: true,
ajax: {
beforeSend: function() {
container.prev().html('Loading data from db...');
}
},
callback: function(response, pagination) {
window.console && console.log(22, response, pagination);
var dataHtml = '';
$.each(response, function (index, dataSource) {
dataHtml +=
'<div style="border: 1px solid #888888; border-radius: 5px; margin: 15px;" class="col-md-2">'
+ '<div class="card-body">'
+ '<b>'+ dataSource.title +'</b></h5>'
+ 'Vezi specificatii'
+ '</div>'
+ '</div>';
});
dataHtml += '';
container.prev().html(dataHtml);
}
})
})('demo');
});
$(function(){
if(toBeSearched === undefined){
buildTable(myArray);
(function(name) {
var container = $('#pagination-' + name);
container.pagination({
dataSource: myArray,
locator: 'dataSource',
totalNumber: 50,
pageSize: 20,
showPageNumbers: true,
showPrevious: true,
showNext: true,
showNavigator: true,
showFirstOnEllipsisShow: true,
showLastOnEllipsisShow: true,
ajax: {
beforeSend: function() {
container.prev().html('Loading...');
}
},
callback: function(response, pagination) {
window.console && console.log(22, response, pagination);
var dataHtml = '';
$.each(response, function (index, dataSource) {
dataHtml +=
'<div style="border: 1px solid #888888; border-radius: 5px; margin: 15px;" class="col-md-2">'
+ '<div class="card-body">'
+ '<b>'+ dataSource.title +'</b></h5>'
+ 'Vezi specificatii'
+ '</div>'
+ '</div>';
});
dataHtml += '';
container.prev().html(dataHtml);
}
})
})('demo');
}
});
function searchTable(value, data){
var filteredData = [];
for(var i = 0; i < data.length; i++){
value = value.toLowerCase();
var name = data[i].title.toLowerCase();
if(name.includes(value)){
filteredData.push(data[i])
}
}
return filteredData;
}
function buildTable(data){
var table = document.getElementById('myTable');
table.innerHTML = '';
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].title}</td>
<td></td>
<td></td>
</tr>`;
table.innerHTML += row;
}
};
</script>
My question would be which architectural solutions i could go towards or how can I improve my code so it can be more efficient.
PS: I tried doing it first with php submission by grabbing the url and I was ending up in infinite loop using header on processing page.

If I click on Tab, it doesn't response. Why?

Problem is I cannot click the Tabs on the website and If i click on Tabs; it show
Uncaught Type Error: Cannot set properties of null (setting 'value').
Is there any way to fix this? Also, I am a beginner and I don't know how to fix this. Codes are written in PHP and Javascript.
<?php
// session_start();
require("checklogin.php");
$toolsname = "Matrix Setup";
$toolsnamepath = "index.php";
$userlogin = $loginname;
$usrgroup = $_SESSION["usrgrp"];
$str_tab = isset($_POST["str_tab"])? $_POST["str_tab"] : "";
$winwidth = isset($_POST["winwidth"])? $_POST["winwidth"] : "";
$ch = isset($_POST["ch"])? $_POST["ch"] : "";
$badgeno = isset($_SESSION["badgeno"])? $_SESSION["badgeno"] : "";
if($str_tab == ""){
$str_tab = isset($_GET["str_tab"])? $_GET["str_tab"] : "";
}
if($winwidth == ""){
$winwidth = isset($_GET["winwidth"])? $_GET["winwidth"] : "";
}
if($ch == ""){
$ch = isset($_GET["ch"])? $_GET["ch"] : "";
}
echo "<html>";
echo "<head><title>$toolsname</title>";
echo "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=5\">";
echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"\web/css/lotmgt_edge.css\"/>";
echo "<script src=\"lotmgt.js\"></script>\n";
echo "<script src=\"setup/setup.js\"></script>\n";
echo "<script src=\"productmatrix/productmatrix.js\"></script>\n";
echo "<script src=\"simulator/simulator.js\"></script>\n";
echo "<script src=\"addmatrix/addmatrix.js\"></script>\n";
echo "<script src=\"addAVImatrix/addmatrix.js\"></script>\n";
echo "<script src=\"\web/js/eregister/pointer.js\" type=\"text/javascript\"></script>";
echo "</head>";
echo "<body onload=OnLoad('" . $ch . "','" . $badgeno . "')>";
//include($_SERVER['DOCUMENT_ROOT']."\library\common\apewsheader.php");
//include($_SERVER['DOCUMENT_ROOT']."\library\common\db_config.inc");
//include($_SERVER['DOCUMENT_ROOT']."\library\common\standard_defines.inc");
include("//sgewsnant21.amk.st.com/ewsweb/wwwroot/library/common7/apewsheader.php");
include("//sgewsnant21.amk.st.com/ewsweb/wwwroot/library/common7/db_config.inc");
include("//sgewsnant21.amk.st.com/ewsweb/wwwroot/library/common7/standard_defines.inc");
include("editme.php");
echo "<form name=\"lotmgt\" method=\"post\" target=\"_self\" onsubmit=\"return false;\">";
echo "<div style=\"position:relative; top:20px;\">";
echo "<table cellpadding=\"3\" cellspacing=\"0\" border=\"0\" width=\"99%\">";
echo "<tr>";
echo "<td>";
for($c=0;$c<count($ary_tab);$c++) {
$class_tab = (($ch=="ProductMatrix" && $ary_tab[$c]=="Product Matrix" && (!isset($str_tab) || $tr_tab=="")) || ($ch=="SocketSimulator" && $ary_tab[$c]=="Socket Simulator" && (!isset($str_tab) || $str_tab=="")) || ($ch=="AVIMatrixAdd" && $ary_tab[$c]=="AVI Matrix Add" && (!isset($str_tab) || $str_tab=="")) || ($ch=="SetupPostTest" && $ary_tab[$c]=="Setup PostTest" && (!isset($str_tab) || $str_tab=="")) || ($ch=="Setup" && $ary_tab[$c]=="Setup" && (!isset($str_tab) || $str_tab=="")) || (($c==0 && !isset($str_tab)) && $ch=="") || $ary_tab[$c] == $str_tab)? "link_tab_slct" : "link_tab";
echo "" . $ary_tab[$c] . "";
}
echo"</td>";
echo"</tr>";
echo"</table>";
echo "</div>";
//echo $str_tab;
if($str_tab != ""){
switch($str_tab){
case "Setup":
include("setup/setup.php");
break;
case "Setup PostTest":
include("setup/setup.php");
break;
case "Setup1":
include("setup1/setup.php");
break;
case "Product Matrix":
include("productmatrix/productmatrix.php");
break;
case "Socket Simulator":
// include("simulator/simulator.php");
include("simulator/Socket_simulator.php");
break;
// case "Matrix Add":
// include("addmatrix/addmatrix.php");
// break;
case "AVI Matrix Add":
include("addAVImatrix/addmatrix.php");
break;
}
}
else {
if ($ch=="ProductMatrix") {
include("productmatrix/productmatrix.php");
}
else if($ch=="SocketSimulator"){
// include("simulator/simulator.php");
include("simulator/Socket_simulator.php");
}
else if($ch=="AVIMatrixAdd"){
include("addAVImatrix/addmatrix.php");
}
else if($ch=="Setup"){
include("setup/setup.php");
}
else if($ch=="SetupPost6E"){
include("setup/setup.php");
}
else{
include("setup/setup.php");
}
}
//common
echo "<input type=\"hidden\" name=\"str_tab\" value=\"" . $str_tab . "\">";
echo "<input type=\"hidden\" name=\"winwidth\" value=\"" . $winwidth . "\">";
echo "<input type=\"hidden\" name=\"username\" value=\"" . $loginname . "\">";
echo "</form>";
flush();
mysqli_close($conn);
echo "</body>";
echo "</html>";
?>
Above codes are index.php codes.
var winplanproducttoentity = '';
var winupdateauto = '';
var winupdatebytester = '';
var winupdatebyproduct = '';
var winupdatestatus = '';
var wintestlot = '';
var winassignlot = '';
var winshowlot = ''
var winchecksicom = '';
var w;
var winwidth = window.screen.width;
var div = new Array('outputdiv','setupdiv');
//var div = new Array('outputdiv','setupdiv','availdiv');
var reqHttp = InitRequest();
var reqHttp1 = InitRequest();
var reqHttp2 = InitRequest();
var reqHttp3 = InitRequest();
function InitRequest() {
var request=null;
try {
request=new XMLHttpRequest();
}
catch (e) {
try {
request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return request;
}
function AsynReqData(request,url,fn) {
request.open("GET", url + '&sid=' + Date() + Math.random(), true);
request.onreadystatechange = eval(fn);
request.send(null);
}
function SynReqData(request,url) {
request.open("GET", url + '&sid=' + Date() + Math.random(), false);
request.send(null);
return request.responseText;
}
function DisplayTab(tabname,tabid) {
document.getElementById(tabid).value = tabname; // this is the $str_tab
document.lotmgt.submit();
}
function OnLoad(ch,badgeno){
var tab = document.lotmgt.str_tab.value; // this is the $str_tab from DisplayTab function
w = (winwidth < 1280)? 1280 : winwidth;
if((tab=='' & ch=='') || tab=='Setup' || (ch=='Setup' & tab=='')) {
var p_1 = "checked";
var T_0 = "checked";
var zmiss = "checked";
for(var i=0; i<div.length; i++) {
document.getElementById(div[i]).className = 'hide';
}
// var wd = (128*5) - 10;
var wd = (128*7.5) - 50;
var lf = 0;
document.getElementById('filterdiv').style.width = wd + 'px';
document.getElementById('filterdiv').style.left = lf + 'px';
wd = (128*5.5) - 80;
lf = (128*5) - 10; // lf = (128*7) - 20;
document.getElementById('waferdiv').style.width = wd + 'px';
document.getElementById('waferdiv').style.left = lf + 'px';
// AsynReqData(reqHttp,'setup/content_wafer.php?site=','UpdateWafer');
AsynReqData(reqHttp1,'setup/content_filter.php?site=' + '' + '&badgeno=' + badgeno + '&p_1=' + p_1 + '&T_0=' + T_0 + '&zmiss=' + zmiss,'UpdateFilter');
}
else if (tab=='Product Matrix' || (ch=='ProductMatrix' & tab=='')){
AsynReqData(reqHttp,'productmatrix/content_filter.php?area=','UpdatePMFilter');
}
// else if (tab=='Matrix Simulator' || (ch=='MatrixSimulator' & tab=='')){
// // AsynReqData(reqHttp,'simulator/content_filter.php?area=','UpdateSIMFilter');
// }
else if (tab=='Setup PostTest' || (ch=='SetupPostTest' & tab=='')){
var p_1 = "checked";
var T_0 = "checked";
var wd = (128*9) - 50;
var lf = 0;
document.getElementById('filterdiv').style.width = wd + 'px';
document.getElementById('filterdiv').style.left = lf + 'px';
AsynReqData(reqHttp1,'setup/content_filter1.php?site=' + '' + '&badgeno=' + badgeno + '&p_1=' + p_1 + '&T_0=' + T_0,'UpdateFilter');
}
}
//shared functions
function ManagePopup(except){
var mywin = new Array('winplanproducttoentity','winupdateauto','winupdatebytester','winupdatebyproduct','winupdatestatus','wintestlot','winassignlot','winshowlot','winchecksicom');
for(var i=0; i<mywin.length; i++) {
var win = window[mywin[i]];
if (mywin[i] == except){
if(!win.closed && win.location) win.focus();
}
else{
if(!win.closed && win.location) win.close();
}
}
}
function PlanProductToEntity(product,type){
var w = 300;
var h = 600;
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
var winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no';
ManagePopup('winplanproducttoentity');
winplanproducttoentity = this.open('../lotmgt/wip/pop_assignproduct.php?product=' + product + '&type=' + type, 'winplanproducttoentity', winprops);
}
Above codes are Javascript codes. Error says in Javascript and How to fix that?

The error occurs in the JS code and is due to the HTML generated in PHP which is missing an id attribute.
You seem to get the error here: document.getElementById(tabid).value = tabname; because document.getElementById(tabid) is null.
When it looks for the element with id str_tab it doesn't find it. The only element in the HTML which could be the desired one has the attribute name="str_tab" and it's your hidden field. You have to add the missing id="str_tab" attribute to this hidden field.

Pass JSON result from AJAX to HTML

I am querying a fuseki server using AJAX and the result that I am getting is a JSON object.
I would like to use pagination to go through the result with a limit of records per page. I have tried to send the JSON object to a div in the html file but it is not working. Is there a workaround this? Here is my code:
function myCallBack2(data) {
var all_results = '';
for (var i = 0; i < data.results.bindings.length; i++) {
var bc = '';
if (i % 2 == 0) {
bc = '#b8cddb';
} else {
bc = '#f2f5f7';
}
all_results += '<div class="all_results" style="background-color:' + bc + '">';
for (var j = 0; j < data.head.vars.length; j++) {
var text = data.results.bindings[i][data.head.vars[j]].value;
var type = data.results.bindings[i][data.head.vars[j]].type;
all_results += '<div class="result_row">';
if (type == ('literal')) {
all_results += '<p> ' + data.head.vars[j] + ": " + text + '</p>';
} else {
all_results += '<a href=' + text + " title=" + data.head.vars[j] + '>' + text + '</a>';
}
all_results += '</div>';
}
all_results += '</div>';
}
$('#result').html(all_results);
}
function doSparql() {
var myEndPoint = "http://localhost:3030/Test/query";
name = document.getElementById("search").value;
var requiredName = "?Author foaf:firstName \"" + name + "\".}";
myQuery = ["PREFIX dcterms: <http://purl.org/dc/terms/>",
"PREFIX foaf: <http://xmlns.com/foaf/0.1/>",
"PREFIX locah: <http://data.archiveshub.ac.uk/def/>",
"SELECT ?Register ?Id ?Date ?Type",
"WHERE{",
"?Register dcterms:creator ?Author.",
"?Register dcterms:identifier ?Id.",
"?Register dcterms:type ?Type.",
"?Register locah:dateCreatedAccumulatedString ?Date.",
requiredName
].join(" ");
console.log('myQuery: ' + myQuery);
window.alert(myQuery);
$.ajax({
dataType: "jsonp",
url: myEndPoint,
data: {
"query": myQuery,
"output": "json"
},
success: myCallBack2,
error: myError
});
console.log('After .ajax');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<div id="page-selection1" "></div>
<div id="result " class="result "></div>
<div id="page-selection2 "></div>
<script>
$('#page-selection1,#page-selection2').bootpag({
total: 50,
page: 1,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: 'First',
last: 'Last',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page ", function(event, num) {
$("#result ").html("Page " + num);
});
</script>
I am expecting to show part of the results instead Page 1, Page 2... in #result according to a limit per page.

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>