Im populating each Titanium.UI.createTableViewRow from a json file, and I wonder how I can add a label (Titanium.UI.createLabel) to each created Titanium.UI.createTableViewRow and center all outputed text?
I have created a Titanium.UI.createLabel, but how to add my Label to each created Titanium.UI.createTableViewRow, and center all text?
This is a created Label:
var wrapperLabel = Titanium.UI.createLabel({
text: 'Signed:',
color: '#ffffff',
textAlign:'center',
font: {
fontWeight: 'bold',
fontSize: 22
},
height:'auto'
});
win3.add(wrapperLabel);
var view = Titanium.UI.createTableView({
maxRowHeight:40,
minRowHeight:30,
height: Titanium.UI.SIZE,
width: Titanium.UI.FILL,
color: 'black'
});
win3.add(view);
xhr.onload = function() {
var data = [];
var objects = JSON.parse(this.responseText);
for (s in objects) {
data.push(Titanium.UI.createTableViewRow({
title: objects[s]
}));
data.push(Titanium.UI.createTableViewRow({
title: objects[s].New
}));
data.push(Titanium.UI.createTableViewRow({
title: objects[s].Signed
}));
data.push(Titanium.UI.createTableViewRow({
title: objects[s].Returned
}));
}
view.data = data;
};
Something like this:
for (s in objects) {
var label = Ti.UI.createLabel (_properties_);
var row = Ti.UI.createTableViewRow(_propeties_);
row.add(label);
data.push(row);
}
try this one...
var row_propetiy = {
height : "40dp"
};
var lbl_propetiy = {
color: '#000',
textAlign:'center',
font: {
fontWeight: 'bold',
fontSize: '22dp'
},
height:Ti.UI.FILL
};
xhr.onload = function() {
var data = [];
var objects = JSON.parse(this.responseText);
for (s in objects) {
var row = Ti.UI.createTableViewRow(row_propetiy);
var lbl = Ti.UI.createLable(lbl_propetiy);
lbl.text = objects[s];
row.add(lbl);
data.push(row);
}
view.data = data;
};
Related
I am trying to apply smart routing of links with the use of ports using JointJS. This documentation shows the one I am trying to achieve. The example on the docs though shows only the programmatic way of adding Link from point A to point B. How do you do this with the use of ports?
Here's my code: JSFiddle.
HTML:
<html>
<body>
<button id="btnAdd">Add Table</button>
<div id="dbLookupCanvas"></div>
</body>
</html>
JS
$(document).ready(function() {
$('#btnAdd').on('click', function() {
AddTable();
});
InitializeCanvas();
// Adding of two sample tables on first load
AddTable(50, 50);
AddTable(250, 50);
});
var graph;
var paper
var selectedElement;
var namespace;
function InitializeCanvas() {
let canvasContainer = $('#dbLookupCanvas').parent();
namespace = joint.shapes;
graph = new joint.dia.Graph({}, {
cellNamespace: namespace
});
paper = new joint.dia.Paper({
el: document.getElementById('dbLookupCanvas'),
model: graph,
width: canvasContainer.width(),
height: 500,
gridSize: 10,
drawGrid: true,
cellViewNamespace: namespace,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
return (magnetS !== magnetT);
},
snapLinks: {
radius: 20
}
});
//Dragging navigation on canvas
var dragStartPosition;
paper.on('blank:pointerdown',
function(event, x, y) {
dragStartPosition = {
x: x,
y: y
};
}
);
paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) {
dragStartPosition = null;
});
$("#dbLookupCanvas")
.mousemove(function(event) {
if (dragStartPosition)
paper.translate(
event.offsetX - dragStartPosition.x,
event.offsetY - dragStartPosition.y);
});
// Remove links not connected to anything
paper.model.on('batch:stop', function() {
var links = paper.model.getLinks();
_.each(links, function(link) {
var source = link.get('source');
var target = link.get('target');
if (source.id === undefined || target.id === undefined) {
link.remove();
}
});
});
paper.on('cell:pointerdown', function(elementView) {
resetAll(this);
let isElement = elementView.model.isElement();
if (isElement) {
var currentElement = elementView.model;
currentElement.attr('body/stroke', 'orange');
selectedElement = elementView.model;
} else
selectedElement = null;
});
paper.on('blank:pointerdown', function(elementView) {
resetAll(this);
});
$('#dbLookupCanvas')
.attr('tabindex', 0)
.on('mouseover', function() {
this.focus();
})
.on('keydown', function(e) {
if (e.keyCode == 46)
if (selectedElement) selectedElement.remove();
});
}
function AddTable(xCoord = undefined, yCoord = undefined) {
// This is a sample database data here
let data = [
{columnName: "radomData1"},
{columnName: "radomData2"}
];
if (xCoord == undefined && yCoord == undefined)
{
xCoord = 50;
yCoord = 50;
}
const rect = new joint.shapes.standard.Rectangle({
position: {
x: xCoord,
y: yCoord
},
size: {
width: 150,
height: 200
},
ports: {
groups: {
'a': {},
'b': {}
}
}
});
$.each(data, (i, v) => {
const port = {
group: 'a',
args: {}, // Extra arguments for the port layout function, see `layout.Port` section
label: {
position: {
name: 'right',
args: {
y: 6
} // Extra arguments for the label layout function, see `layout.PortLabel` section
},
markup: [{
tagName: 'text',
selector: 'label'
}]
},
attrs: {
body: {
magnet: true,
width: 16,
height: 16,
x: -8,
y: -4,
stroke: 'red',
fill: 'gray'
},
label: {
text: v.columnName,
fill: 'black'
}
},
markup: [{
tagName: 'rect',
selector: 'body'
}]
};
rect.addPort(port);
});
rect.resize(150, data.length * 40);
graph.addCell(rect);
}
function resetAll(paper) {
paper.drawBackground({
color: 'white'
});
var elements = paper.model.getElements();
for (var i = 0, ii = elements.length; i < ii; i++) {
var currentElement = elements[i];
currentElement.attr('body/stroke', 'black');
}
var links = paper.model.getLinks();
for (var j = 0, jj = links.length; j < jj; j++) {
var currentLink = links[j];
currentLink.attr('line/stroke', 'black');
currentLink.label(0, {
attrs: {
body: {
stroke: 'black'
}
}
});
}
}
Any help would be appreciated. Thanks!
The default link created when you draw a link from a port is joint.dia.Link.
To change this you can use the defaultLink paper option, and configure the router you would like.
defaultLink documentation reference
const paper = new joint.dia.Paper({
el: document.getElementById('dbLookupCanvas'),
model: graph,
width: canvasContainer.width(),
height: 500,
gridSize: 10,
drawGrid: true,
cellViewNamespace: namespace,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
return (magnetS !== magnetT);
},
snapLinks: {
radius: 20
},
defaultLink: () => new joint.shapes.standard.Link({
router: { name: 'manhattan' },
connector: { name: 'rounded' },
})
});
You could also provide several default options in the paper.
defaultLink: () => new joint.shapes.standard.Link(),
defaultRouter: { name: 'manhattan' },
defaultConnector: { name: 'rounded' }
I'm trying to show weight_id retrieved from mysql data in a chart.js tooltip (shown as (weight_ids[index]) in the image). And later, I intend to show a modal instead of a tooltip to let users update or delete that data. I presume I cannot achieve that without linking the linechart's point data with id stored in mysql. How can I incorporate this id data?
I would appreciate any help very much.
enter image description here
My code is as follows:
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
{{-- グラフを描画--}}
<script>
//ラベル
const labels = #json($date_labels);
// id
const weight_ids = #json($weight_ids);
//体重ログ
const weight_logs = #json($weight_logs);
const aryMax = function(a, b) {
return Math.max(a, b);
};
const aryMin = function(a, b) {
return Math.min(a, b);
};
let min_label = Math.floor((weight_logs).reduce(aryMin) - 0.5);
let max_label = Math.ceil((weight_logs).reduce(aryMax) + 0.5);
console.log(weight_ids);
console.log(weight_logs);
console.log(min_label, max_label);
//グラフを描画
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data : {
labels: labels, // x軸ラベル
datasets: [
{
label: `Weight (weight_ids[index])`,
data: weight_logs,
tension: 0,
borderColor: "rgba(37,78,255,1)",
backgroundColor: "rgba(0,0,0,0)",
pointRadius: 3
}
]
},
options: {
title: {
display: false,
text: ''
},
legend: {
display: false,
},
scales: {
yAxes: [
{
ticks: {
min: min_label, // ラベル最小値
max: max_label, // ラベル最大値
},
scaleLabel: {
display: true,
fontSize: 16,
labelString: '体重 (kg)'
}
}
],
},
hover: {
mode: 'point'
},
onClick: function clickHandler(evt) {
var firstPoint = myChart.getElementAtEvent(evt)[0];
if (firstPoint) {
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
console.log(label);
console.log(value);
if (value) {
$('#weidhtModal').modal('show');
}
}
}
}
});
</script>
Thank you!
I found a way to retrieve weight_id using the following function.
onClick: function clickHandler(evt, activeElements) {
if (activeElements.length) {
var element = this.getElementAtEvent(evt);
var index = element[0]._index;
var _datasetIndex = element[0]._datasetIndex;
var weightId = weight_ids[index];
var weightLog = weight_logs[index];
console.log(index);
console.log(weightId);
console.log(this.data.labels[index]);
console.log(weightLog);
}
}
I am loading csv file using https://github.com/evanplaice/jquery-csv. Everything works okay until I try to reload the .csv file and load new data into GeoCharts. I know its a problem with reloading the file but how to deal with it? Here is the example code:
function load(file, colorForSex){
var region = $('select[name="region"] option:selected').val();
setTimeout(1000);
$.get(file, function(data) {
var newData = $.csv.toArrays(data);
var j = 1;
for (var i = 1; i < newData.length; i++) {
newData[i][j] = parseFloat(newData[i][j]);
}
}, 'text');
console.log(newData[1][1]);
setTimeout(1000);
var data = google.visualization.arrayToDataTable(newData);
var options = {
region: region,
backgroundColor: 'none',
chartArea: { width: '100%', height: '100%' },
colorAxis: {colors: ['#ddd', colorForSex]},
datalessRegionColor: 'white',
legend: {
numberFormat: '.##',
textStyle: {
fontName: 'Verdana',
color: '#ff1a1a',
fontSize: 14
}
}
};
setTimeout(1000);
chart.draw(data, options);
}
need to include the rest of the chart code in the $.get function
$.get is asynchronous
as such, the code after the $.get function runs before the $.get function finishes
see following snippet...
function loadData(file, colorForSex){
var region = $('select[name="region"] option:selected').val();
var file = file + '?q=' + Math.random();
$.get(file, function(data) {
var processedData = $.csv.toArrays(data);
var j = 1;
for (var i = 1; i < processedData.length; i++) {
processedData[i][j] = parseFloat(processedData[i][j]);
}
var data = google.visualization.arrayToDataTable(processedData);
var options = {
region: region,
backgroundColor: 'none',
chartArea: { width: '100%', height: '100%' },
colorAxis: {colors: ['#ddd', colorForSex]},
datalessRegionColor: 'white',
legend: {
numberFormat: '.##',
textStyle: {
fontName: 'Verdana',
color: '#ff1a1a',
fontSize: 14
}
}
};
chart.draw(data, options);
}, 'text');
}
You can just add to file some parameter to cache disable
replace:
$.get(file, function(data) {
to:
var d = new Date();
$.get(file + '?' + d.getTime(), function(data) {
I am developing a JointJs Application,I need to set font-size for a text inside a rectangle.
$('#FText,#FTextHeight,#FTextWidth,#FTextSize').on('keyup change', function () {
var FtHeight = $('#FTextHeight').val();
var FtWidth = $('#FTextWidth').val();
var FtSize = parseInt($('#FTextSize').val());
var txt = $('#FText').val();
graph2.clear();
if (txt.length > 0) {
$('#FTexterror').empty();
var myFtext = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: FtWidth, height: FtHeight },
attrs: {
rect: {
fill: 'white', stroke: outerColor, 'class': 'customtext',
},
text: {
text: txt, 'letter-spacing': 1, 'font-size': FtSize,
fill: outerColor, 'font-size': 11, 'y-alignment': 'middle',
}
}
});
graph2.addCells([myFtext]);
}
else {
$('#FTexterror').empty().append('*Enter valid text');
}
});
the above code is not working while setting font-size for the text.
Kindly help me on this
try this
$('.input-text')
.val(rect.attr('text/font-size')) //set initial value
.on('keyup', function () {
var val = $(this).val();
rect.attr('text/font-size', val);
});
complete demo: https://jsfiddle.net/vtalas/sav49mj4/
This is my HTML page:
<div>
<canvas id="chart-area1" width="300" height="300"/>
</div>
<script src="Chart.js"></script>
<script>
var pieData1 = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx1 = document.getElementById("chart-area1").getContext("2d");
var myPie1 = new Chart(ctx1).Pie(pieData1);
};
</script>
<div>
<canvas id="chart-area2" width="300" height="300"/>
</div>
<script src="Chart1.js"></script>
<script>
var pieData2 = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};
</script>
'Chart.js' and 'Chart1.js' contains same content. I used 'Chart.js' only once but it didn't work. So I tried with two.
The above HTML page is displaying only one pie chart. The other pie chart is not displayed but occupying the space in the page.
What changes should be made so that two pie charts can be displayed?
Thanks in advance.
You set window.onload to a value twice, causing it to be overwritten with the latest value:
window.onload = function(){
var ctx1 = document.getElementById("chart-area1").getContext("2d");
var myPie1 = new Chart(ctx1).Pie(pieData1);
};
// ...
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};
Why not combine the two functions?
Like:
var func1 = function() { /* set up chart 1 */ },
func2 = function() { /* set up chart 2 */ };
window.onload = function() {
func1();
func2();
};
The problem is that you reassign window.onload so it only loads the second one. Try doing this instead:
window.onload = function(){
var ctx1 = document.getElementById("chart-area1").getContext("2d");
var myPie1 = new Chart(ctx1).Pie(pieData1);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};
Here is the code for the pichat which worked for me.
<link href="../JSfiles/Style.css" rel="stylesheet" />
<script src="../ChartsJs/Chart.js"></script>
<script src="../ChartsJs/Chart.min.js"></script>
<script src="../ChartsJs/jquery-1.7.1.min.js"></script>
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'PubPerformancePichat.aspx/GetDataonload',
data: {},
success: function (response) {
drawchart(response.d); // calling method
},
error: function () {
//alert("Error:Something went wrong.Contact the Adminstrator");
//alert(response);
}
})
});
function drawchart(dataValues) {
var arr = [];
var arrcolor = '#231F20, #FFC200, #F44937, #16F27E, #FC9775, #5A69A6';
var acolor = arrcolor.split(',');
for (var i = 0; i < dataValues.length; i++) {
var obj = {};
obj.color = acolor[i];
obj.value = dataValues[i].Accountvalues;
obj.label = dataValues[i].Accounts;
arr.push(obj);
}
// Instantiate and draw our chart, passing in some options
var ctx = $("#myChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(arr);
}
</script>
---here is the CS File
[WebMethod(EnableSession = true)]
public static List<Chatdata> GetDataonload()
{
List<Chatdata> dataList = new List<Chatdata>();
using (SqlConnection con = new SqlConnection("Data Source=203.115.195.52;Initial Catalog=mcom_ad_engine;Persist Security Info=True;User ID=appl;Password=mcom007;"))
{
string publisherid = "2000105";
if (!string.IsNullOrEmpty(publisherid))
{
//string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
string StartDate = DateTime.Now.AddDays(-60).ToString("yyyy-MM-dd");
string EndDate = DateTime.Now.ToString("yyyy-MM-dd");
SqlCommand cmd = new SqlCommand("Sp_publisher_Totalunpaied_pichart", con);
cmd.CommandTimeout = 50;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#publisherid", publisherid);
cmd.Parameters.AddWithValue("#istartdate", StartDate);
cmd.Parameters.AddWithValue("#ienddate", EndDate);
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.SelectCommand = cmd;
DataTable dt = new DataTable();
da.Fill(dt);
con.Close();
foreach (DataRow dtrow in dt.Rows)
{
if (dtrow[0].ToString() != "Total Earned")
{
Chatdata details = new Chatdata();
details.Accounts = dtrow[0].ToString();
// details.spent = Convert.ToInt64(dtrow[2].ToString());
if (dtrow[1].ToString().StartsWith("-"))
{
string bal = dtrow[1].ToString();
bal = bal.Substring(1, bal.Length - 1);
details.Accountvalues = Convert.ToInt64(bal);
}
else
{
details.Accountvalues = Convert.ToInt64(dtrow[1].ToString());
}
dataList.Add(details);
}
}
}
else
{
//navigate to Login Page
}
return dataList;
}
}