Zingchart - passing a function to the tooltip - javascript

Is it possible to pass a function to the tooltip key in the Zingchart Json?
I tried the following so far:
$scope.applyTooltip = function (timestamp) {
console.log(timestamp);
var tooltip = "<div>";
var data = {
timestamp1: {
param1: "bla",
param2: "foo,
},
...
}
for(var param in data){
console.log(param);
tooltip += param+": "+data[param]+"<br>";
}
tooltop += "</div>;
return tooltip;
}
$scope.graphoptions = {
//...
//just displaying the relevant options
plot: {
"html-mode": true,
tooltip: $scope.applyTooltip("%kt"),
}
}
}
But the function gets the string "%kt" as it is and not the wanted X-Value of the hovered Plot. So how is it possible to pass the X-Value in the Function?

ZingChart does not allow passing in functions through the configuration object.
Instead, there is a property called "jsRule" which allows you to pass the name a function to be evaluated during each tooltip event.
tooltip : {
jsRule : "CustomFn.formatTooltip()"
}
Inside that function, a parameter will be available that will contain information about the node you moused over such as value, scaletext, plotindex, nodeindex, graphid, and more. Simply return an object for the tooltip (including the formatted text) and ZingChart will take care of the rest. Example provided down below.
The one caveat to jsRule is that the function name has to be accessible globally since ZingChart does not accept inline functions. We are aware of this issue and are planning for this to be an option in future versions.
CustomFn = {};
var myConfig = {
type: "line",
tooltip : {
jsRule : "CustomFn.formatTooltip()"
},
series : [
{
values : [1,3,2,3,4,5,4,3,2,1,2,3,4,5,4]
},
{
values : [6,7,8,7,6,7,8,9,8,7,8,7,8,9,8]
}
]
};
CustomFn.formatTooltip = function(p){
var dataset = zingchart.exec('myChart', 'getdata');
var series = dataset.graphset[p.graphindex].series;
var tooltipText = "";
for (var i=0; i < series.length; i++) {
tooltipText += "Series " + i + " : " + series[i].values[p.nodeindex] + "";
if (i !== series.length-1) {
tooltipText += "\n";
}
}
return {
text : tooltipText,
backgroundColor : "#222"
}
}
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= 'https://cdn.zingchart.com/2.3.1/zingchart.min.js'></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>

Related

Change specific row template after occurence

I have this kendo grid that I add columns dynamically to it in something like this:
obj = {
field: field,
title: title,
editor: transactionDocumentTextEditor,
format: format,
headerTemplate: headerTemplate,
width: 40,
template: " <div class='documentBtn'><img src='../Images/document-disabled-icon.svg' border='0'></div> "
};
then later after adding all the columns I add them to the kendogrid columns,
the I made in editor this specific column to be clickable as :
function transactionDocumentTextEditor(container, options) {
if (options != null) {
var model = options.model;
var ItemTypesItemTypeID = model.ItemTypesItemTypeID;
var disabled = "";
if ((ItemTypesItemTypeID == 1) || (ItemTypesItemTypeID == 4) || (ItemTypesItemTypeID == 2))
disabled = " disabled ";
if (ItemTypesItemTypeID != "" && (ItemTypesItemTypeID == 3)) {
OpenDocumentUpload("ReceiveDocumentUpload.aspx?TransType=Stock", container);
currentContainer = container;
currentOptions = options;
}
}
}
function OpenDocumentUpload(path) {
var windowObj = parent.radopen("" + localStorage.controlsPath.toString() + "/Common/" + path, 'UserListDialog100', '300px', '300px');
windowObj.add_beforeClose(OnClientClose_DocumentWindow);
return true;
}
function OnClientClose_DocumentWindow(sender, args) {
var documentId;
if (sender.documentId != null) {
documentId = sender.documentId;
transactionDocumentTextEditorImage(currentContainer, documentId);
}
}
function transactionDocumentTextEditorImage(container, documentId) {
$("<div class='documentBtnEnabled'><input id='doc_ " + documentId + "' data-bind='value: " + documentId + "></div>")
.replaceAll(container)
}
now after using this editor I can add document and after closing the page and back to the grid, I call transactionDocumentTextEditorImage() so I can change the color of the picture to another picture that I have called in CSS, and it changes successfully.
But the problem is when I add another column to the kendo-grid, the template of the specific row that I changed the picture goes back to the default template that was before editing it, I searched about that issue but haven't found anything that specific, but I guess it should be something as an if condition in template ?
Thanks in advance
I have done some workaround and now it works,
I changed in OnClientClose_DocumentWindow :
function OnClientClose_DocumentWindow(sender, args) {
var documentId;
if (sender.documentId != null) {
documentId = sender.documentId;
$("#grid").data("kendoGrid").dataSource.getByUid(currentOptions.model.uid).transactionDocument = documentId;
transactionDocumentTextEditorImage(currentContainer,documentId);
}
}
then I changed template to :
obj = {
field: field,
title: title,
editor: editor,
format: format,
headerTemplate: headerTemplate,
width: 40,
template: "#if( data.transactionDocument == null || data.transactionDocument == ''){# #= GetTemp() # #} else {#<div class='documentBtnEnabled'></div>#}#"
};
I will keep the question just in case someone needs it

How to display inner child Boolean values a checkbox based on JSON structure?

I am implementing table based on JSON Data. I am able to get two levels, But I am not able to get most inner child values.
http://jsfiddle.net/varunPes/0n9fmawb/43/
var data = {
"managment":
{
"Notice":{
"Red color" :{"View":true,"edit":true,"delete":true} ,
"Yellow color":{"View":true,"edit":true,"delete":true} ,
"Specail color":" checkoxes"
},
"Black Notice":{"black":" Checkboxes"}
},
"Faculty":
{
"salary":{"list":" checkboxes"},
},
};
var zoneHtml = '';
for(var zoneKey in data) {
zoneHtml+='<div class="zone">';
zoneHtml+= ('<h1>'+zoneKey+'</h1>');
var jsonData = data[zoneKey];
for(var listUI in jsonData) {
zoneHtml+='<div class="jsonData">';
zoneHtml+=('<h2 class="prop">'+listUI+'</h2>');
var ports = jsonData[listUI];
zoneHtml+='<ul class="port">';
for(var port in ports) {
zoneHtml+=('<li>'+port+':'+ports[port] +'</li>');
}
zoneHtml+='</ul>';
zoneHtml+='</div>';
}
zoneHtml+=('</div>');
}
$("#zone").html(zoneHtml);
.jsonData{
margin-left:10%;
}
.port{
margin-left:10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="zone"></div>
Expacted Output:
I am attaching exacted output as a screen shot:
When I am trying to put inner object "red color" three fields "delete", "enable", "view", Then it is showing object like below:
Red color:[object Object]
First I want to get inner object value after that I will put checkbox. Thanks in advance. Your answer is valuable guys:
You should check if property is an object, then you need to loop through each property again. You can play with your logic and make as a recursion function.
I have updated your logic:
var data = {
"managment":
{
"Notice":{
"Red color" :{"delete":true,"enable":true,"view":true} ,
"Yellow color":{"delete":true,"enable":true,"view":true},
"Specail color":" checkoxes"
},
"Black Notice":{"black":" Checkboxes"}
},
"Faculty":
{
"salary":{"list":" checkboxes"},
},
};
var zoneHtml = '';
for(var zoneKey in data) {
zoneHtml+='<div class="zone">';
zoneHtml+= ('<h1>'+zoneKey+'</h1>');
var jsonData = data[zoneKey];
for(var listUI in jsonData) {
zoneHtml+='<div class="jsonData">';
zoneHtml+=('<h2>'+listUI+'</h2>');
var ports = jsonData[listUI];
zoneHtml+='<ul class="port">';
for(var port in ports) {
if (typeof ports[port] === 'object') {
zoneHtml+='<li>'+port+':';
zoneHtml+='<ul>'
for (var i in ports[port]) {
zoneHtml+='<li>'+i+':' + ports[port][i] + '</li>';
}
zoneHtml += '</ul></li>';
} else {
zoneHtml+=('<li>'+port+':'+ports[port] +'</li>');
}
}
zoneHtml+='</ul>';
zoneHtml+='</div>';
}
zoneHtml+=('</div>');
}
$("#zone").html(zoneHtml);
$("#zone").html(zoneHtml);
.jsonData{
margin-left:10%;
}
.port{
margin-left:10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="zone"></div>
Please update the code as you needed.

SyntaxError: missing ) after formal parameters when adding if/else

Can anyone tell me what i am doing wrong , i want to have different views for different users in handsontable.I am defining the table as
document.addEventListener("DOMContentLoaded", function() {
var create_table = document.getElementById('create_table');
var mydata = document.getElementById('mydata').innerHTML;//to get the hidden element
var logged_user = document.getElementById('logged_user').innerHTML;// to get remote user
var plan_creator = document.getElementById('plan_creator').innerHTML;//to get the person who has created the plan
console.log(logged_user + " " + plan_creator);
console.log(mydata);
var searchResultCount=0;
var hot,searchFiled,resultCount;
function searchResultCounter(instance, row, col, value, result) {
Handsontable.plugins.Search.DEFAULT_CALLBACK.apply(this, arguments);
if (result) {
searchResultCount++;
}
}
var buttons = {
save:document.getElementById('save'),
load:document.getElementById('load'),
file:document.getElementById('file_export')
}
var objectData = JSON.parse(mydata);//to decode data in JSON format
console.log(objectData);
hot = new Handsontable(create_table, {
data:objectData,
colHeaders: true,
rowHeaders: true,
contextMenu: true,
minRows: 30,
minCols: 13,
maxCols:18,
maxRows:100,
copyPaste:true,
dropdownMenu: true,//plugin to display menu on column header
filters:true,
columnSorting:true,//plugin to enable sorting
sortIndicator:true,//to display sorting is done
comments:true,//to add comments
colHeaders:["Testcase Name","Cell Name","Customer","Flops","Title","Status","Mfix CCR","Scenerio Brief Description","Expected Results","CCR Status","CCR No","Remarks","Testcase Path"],
if(logged_user == plan_creator) {
columns:[//when using this not able to remove column
{data:'tc_name'},
{data:'cell_name'},
{data:'customer_name'},
{data:'flops' ,type:'numeric'},
{data:'title'},
{data:'status'},
{data:'mfix_ccr'},
{data:'test_scenerio'},
{data:'expected_results'},
{data:'ccr_status'},
{data:'ccr_num'},
{data:'remarks'},
{data:'tc_path'}],
}
else{
columns:[//when using this not able to remove column
{data:'tc_name' ,readOnly:true } ,
{data:'cell_name',readOnly:true },
{data:'customer_name',readOnly:true },
{data:'flops' ,type:'numeric',readOnly:true },
{data:'title',readOnly:true },
{data:'status',readOnly:true },
{data:'mfix_ccr',readOnly:true },
{data:'test_scenerio',readOnly:true },
{data:'expected_results',readOnly:true },
{data:'ccr_status',readOnly:true },
{data:'ccr_num',readOnly:true },
{data:'remarks'},//only remarks can be added by other user
{data:'tc_path',readOnly:true }],
}
search: {
callbak:searchResultCounter
}
});
searchFiled = document.getElementById('search_filed');
resultCount=document.getElementById('resultCount');
var exportPlugin=hot.getPlugin('exportFile');
Handsontable.dom.addEvent(searchFiled, 'keyup', function(event) {
var queryResult;
console.log(this.value);
searchResultCount = 0;
queryResult = hot.search.query(this.value);
console.log(queryResult);
//resultCount.innerText = searchResultCount.toString();
hot.render();
});
buttons.file.addEventListener('click', function() {// enabling the plugin to download the file
exportPlugin.downloadFile('csv', {filename: 'MyFile',columnHeaders:true});
});
I don't get any error when i remove the if/else statement and use only one scenerio .when using above code i am getting the error, but when i remove the if/else part and just use columns attribute in a simple way , i don't get this error.But i want to have different views for the creator of plan and others.
Is there any other way to do this?
Thanks
You can't use if statements when constructing an object, but you can use the ternary ?: operator, like this:
colHeaders: ... ,
columns: logged_user == plan_creator
? /* value in case they are equal */
: /* value in case they are not equal */,
search: ...
instead of using if else like
if(logged_user == plan_creator) {
columns:[//when using this not able to remove column
{data:'tc_name'},
{data:'cell_name'},
{data:'customer_name'},
{data:'flops' ,type:'numeric'},
{data:'title'},
{data:'status'},
{data:'mfix_ccr'},
{data:'test_scenerio'},
{data:'expected_results'},
{data:'ccr_status'},
{data:'ccr_num'},
{data:'remarks'},
{data:'tc_path'}],
}
else {}
you could use the ternary Operator:
columns: (logged_user === plan_creator)
? [//when using this not able to remove column
{data:'tc_name'},
...
]
: [//when using this not able to remove column
{data:'tc_name' ,readOnly:true },
...
]

JSON data not showing in HTML [duplicate]

This question already has answers here:
Uncaught Typeerror: cannot read property 'innerHTML' of null
(12 answers)
Closed 5 years ago.
I have some JSON data i would like to render on a page with specific keys(those keys being name, linkURL, image and price). I made a simple div with an id of jsonData and popped the JSON data in a variable however, for some reason, I keep getting
Uncaught TypeError: Cannot read property 'innerHTML' of null'
I'm guessing I have a spelling mistake somewhere that I'm blind too?
Any advice on how I can get this data into the div?
Here is my HTML
<body>
<div id="jsonData"></div>
</body>
Here is my JS
var obj = {
'placements': [
{
'id': '029148',
'name': 'Woodblock Play Suit',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg',
'price':'46.00'
},
{
'id':'0294526806',
'name':'Smock Dress',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg',
'price':'39.00'
},
{
'id':'0297180006',
'name':'Cami',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg',
'price':'9.00'
},
{
'id':'0298473606',
'name':'Asymmetric Wrap Cami Dress',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/asymmetric-wrap-cami-dress/0298473606.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg',
'price':'46.00'
},
{
'id':'0297155306',
'name':'Casual Stripe Tee',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg',
'price':'16.00'
}
]
};
var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++)
for(var keys in obj.placements[i]){
console.log(keys +obj.placements[i][keys]);
divId.innerHTML = divId.innerHTML + '<br/>'+ keys + obj.placements[i][keys];
}
Make sure your script tag is placed directly above the closing </body> tag. Your script is likely broken because when the code is being run, <div id="jsonData"></div> is not yet available.
For displaying just the images, here's an example:
var obj = {
'placements': [
{
'id': '029148',
'name': 'Woodblock Play Suit',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg',
'price':'46.00'
},
{
'id':'0294526806',
'name':'Smock Dress',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg',
'price':'39.00'
},
{
'id':'0297180006',
'name':'Cami',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg',
'price':'9.00'
},
{
'id':'0298473606',
'name':'Asymmetric Wrap Cami Dress',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/asymmetric-wrap-cami-dress/0298473606.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg',
'price':'46.00'
},
{
'id':'0297155306',
'name':'Casual Stripe Tee',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg',
'price':'16.00'
}
]
};
var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++) {
divId.innerHTML += '<img src="' + obj.placements[i]['imageURL'] + '" style="max-width: 100px; float: left; padding: 5px;" />';
}
<body>
<div id="jsonData"></div>
</body>
Modify your code:
document.addEventListener('DOMContentLoaded', function(e) {
var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++)
for(var keys in obj.placements[i]){
console.log(keys +obj.placements[i][keys]);
divId.innerHTML = divId.innerHTML + '<br/>'+ keys + obj.placements[i][keys];
}
});
Update:
In case you need some certain keys. I would update your code this way:
document.addEventListener('DOMContentLoaded', function(e) {
var result = "";
var allowed = ['some', 'key', 'allowed'];
// some ES5 magic
obj.placements.forEach(el => {
var keys = Object.keys(el).filter(key => allowed.indexOf(key) !== -1);
result+= '<br/>'+ keys + obj.placements[i][keys];
});
document.getElementById('jsonData').innerHTML = result;
});
fist of all you need to add jquery library.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
use following each loop
var html_data = '';
$.each(obj.placements,function(k,v){
$.each(v,function(key,value){
html_data += key+' : '+value+"<br/>";
});
});
$("#jsonData").html(html_data);
Thanks.

How to bind the data in to label in Titanium alloy?

How can I bind data from controller to xml, My code is as follows,
View:
<Collection src="respondentAge"/>
<Label id="question"></Label>
Styles
".question":{
font:{
fontSize:18,
fontWeight:'normal'
},
color:"#000",
left:10,
height:Ti.UI.SIZE
}
Controller
var agenames = Alloy.Collections.respondentAge;
agenames.on("reset", function() {
var agenamesLength = agenames.length;
var question;
for (var i = 0; i < agenamesLength; i++) {
question = agenames.at(i).get("quesion");
// I need to bind the 'agenames.at(i).get("quesion")' value in to label in
}
});
agenames.fetch({
query:"SELECT * FROM respondentAge WHERE languageID ='1';"
});
The question text is coming from the database, So for for question I have added the label and I'm retrieving the value from database and I need to set the label value as retrieving value.
How can I do that
I propose you use the setText(text) property of Label. You can read more about it here: Label docs
agenames.on("reset", function() {
var agenamesLength = agenames.length;
var question;
for (var i = 0; i < agenamesLength; i++) {
question = agenames.at(i).get("quesion");
$.question.setText(question);
}
});

Categories

Resources