I want to put a custom data in my barchart's tooltip.
I've tried to use Extender but I get only the values y ( x get column number):
I want like this : Date: 14-12-2017 (String format) instead of Date: 5
Code:
function chartExtender(){
//this = chart widget instance
//this.cfg = options
this.cfg.grid = {
background: '#FFF' //Set background to white
};
this.cfg.axes.xaxis.tickOptions.showGridline = false;
this.cfg.axes.yaxis.tickOptions.showGridline = false;
this.cfg.axes.xaxis.tickOptions.formatString = '%s';
this.cfg.axes.yaxis.tickOptions.formatString = '%d';
this.cfg.series=[
{ label : "line1",highlighter: {formatString: "<div><span> Date: %s </span><br/><span>Nombre de notifications : %d</span></div>"} }
],
this.cfg.highlighter={show: true, useAxesFormatters: false, sizeAdjust: 25.5}
}
Any help?
Related
I am making an online game using Phaser and I need to make buttons with text on them for it that can change based on the text because the text can be different each time. I tried checking the API document but when I put in the get size function to try to get the bounds of the text my button disappears or the code will stop working with the error saying cannot read properties of undefined (reading getBounds) and it will swap between the two every time I reload the page.
count = Phaser.Math.Between(1,4)
for(let i = 50;i <= 750;i = i +200){
bingus = this.add.text(i, 400, quiz[category][difficulty][quest][count])
answs.push(bingus)
gorp.push(count)
count++
}
if(count > 4){
count = 1
}
}
this.butt1.setDisplaySize(Phaser.Geom.Rectangle.GetSize(answs[gorp[0]].getBounds()))
You could use the Phaser.GameObjects.Text and it's displayWidth and / or displayHeight properties, together with the global Phaser.Display.Align.In.Center function.
Maybe this works also for your UseCase.
Basically:
set the text of the text Object with setText
get the current displayWidth and displayHeight of the text Object
update/adjust the size of the button Object, also with displayWidth and displayHeight properties
Center the text Object inside of the button Object, with the Phaser.Display.Align.In.Center function
Here a small working Demo:
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 500,
height: 180,
scene: {
create
},
banner: false
};
let text;
let button;
let texts = ['first Text', 'Next', 'Second Text', 'Last', 'multiline1.\nmultiline2..\nmultiline3...' ];
let padding = 20;
let currentTextIdx = 0;
function create () {
this.add.text(10, 10, 'Text cycles about every second.')
button = this.add.rectangle(250, 90, 100, 40, 0xff0000 )
.setOrigin(.5);
text = this.add.text(250, 90, texts[currentTextIdx])
.setOrigin(.5);
this.time.addEvent({ delay: 1000, startAt:999, loop: true , callback: _ => {
currentTextIdx++;
if(currentTextIdx >= texts.length){
currentTextIdx = 0;
}
let newText = texts[currentTextIdx];
text.setText(newText);
button.displayWidth = padding * 2 + text.displayWidth;
button.displayHeight = padding * 2 + text.displayHeight;
Phaser.Display.Align.In.Center(text, button);
}});
}
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I used the google charts in my angular project dashboard.
By reading the document: https://github.com/FERNman/angular-google-charts , I used the below code for getting the event(which should contain the elements of the chart which I selected)
As per the document, the select event is emitted when an element in the chart gets selected.
<google-chart (select)="onSelect($event)"></google-chart>
I used the same in my code.
Html:`
<google-chart #chart [title]="Bartitle" [type]="Bartype" [data]="Bardata" [columnNames]="BarcolumnNames"
[options]="Baroptions" [width]="Barwidth" [height]="Barheight"
(select)="onSelect($event)">
</google-chart>`
Component.Ts
this.Bartitle = 'Current and Target';
this.Bartype = 'BarChart';
this.Bardata = [
["2012", 900, 390],
["2013", 1000, 400],
["2014", 1170, 440],
["2015", 1250, 480],
["2016", 1530, 540]
];
this.BarcolumnNames = ["Year", "Current", "Target"];
this.Baroptions = {
hAxis: {
title: 'Maturity'
},
vAxis: {
title: 'Month'
},
};
this.Barwidth = 200;
this.Barheight = 200;
onSelect(event) {
console.log(event);
}
But I dont get the values which I selected..
I need the values of maturity and the year... How i get that?? Did I made any changes??
Select
The select event is emitted when an element in the chart gets selected.
<google-chart (select)="onSelect($event)"></google-chart>
The event of type ChartSelectionChangedEvent containing an array of selected values.
in component
EDIT : Based on comments
onSelect(event) {
const { row, column } = event[0];
const year = this.Bardata[row][0];
let selectedItem;
if (column === 1) {
selectedItem = "current";
}
if (column === 2) {
selectedItem = "target";
}
console.log("year", year, "SelectedItem" ,selectedItem, this.Bardata[row][column]);
}
for more info read the documentation :
https://github.com/FERNman/angular-google-charts
I'm trying to display a heatmap over the globe in Cesium but the globe isn't even showing up on the screen, only the background is. I looked in the network part of google chrome and it shows the actual image I need being loaded from the server.
<script>
var count=0;
var viewer = new Cesium.CesiumWidget('cesiumContainer');
var layers = viewer.scene.imageryLayers;
var imageArray = <?php echo json_encode($images) ?>// PARSING PHP ARRAY INTO JAVASCIPT
alert(imageArray[0]);
var date;var name='HeatMap-2006-01-16.png'; //FOR INITAL PAGE LOAD
loadCesium();
function loadCesium()
{
//Cesium Active Window
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
}));
}
function overlayChange()
{
name = imageArray[count];
for (i = 0; i < name.length; i++)
{
if(name.charAt(i)=="-")
{
date = name.substring(i);
break;
}
}
loadCesium();
count = count + 1;
}
function overlayChangeBack()
{
if(count == 0)
{
count = 39;
name = 'HeatMap';
name = name.concat(count.toString());
loadCesium();
}
else
{
name = 'HeatMap';
count=count-1;
name = name.concat(count.toString());
loadCesium();
}
}
</script>
Right now I'm just trying to display the name variable('HeatMap-2006-01-16.png') for the initial image but it's not displaying. No image I try to put instead displays either so it's definitely an issue with cesium.
I'm not sure why this fixed it because I've had it working without this statement but when declaring the cesiumContainer in the variable viewer, you have to set it as this:
var viewer = new Cesium.CesiumWidget('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false
});
I have used Google Places API in order to display various places. I want at a time to display 20 places and when user scrolls the table view and reaches last field I want to add the rest of data and so on. I have created a function which returns the view and works perfectly excluding one thing. When further data is not available then it goes on loading the last data which is already loaded. Here goes my code.
Ti.include('Functions/get_lat_long.js');
var myTable = Ti.UI.createTableView();
var next_page;
var nxt_pge_tkn;
var tableData = [];
function json_parsing(url,firsttime,winloading)
{
var view1=Ti.UI.createView({
//height : '100%',
width : '100%',
backgroundColor : '#EDDA74',
top : '10%',
borderColor : "black"
});
//For storing url in case next_page_token variable is invalid
var curloc=Ti.App.Properties.getString("curlocation");
//calling method in order to retrive latitude and longitude of current location
get_latitude_longitude(curloc);
//setting the base url that have been initialized in global.js file
var baseurl=Ti.App.Properties.getString("preurl");
//storing lat and lng file that have been initialized in get_lat_lon.js file get_latitude_longitude function
var lat=Ti.App.Properties.getString("curlat");
var lng=Ti.App.Properties.getString("curlng");
//Storing radius which have been initialized in global.js file
var radiusmts=Ti.App.Properties.getInt("curradius")*1000;
//setting location type from the value that have been selected in app.js file by user
var loc_type=Ti.App.Properties.getString("curcategory");
//fetching and storing key which have been initialized in global.js file
var key=Ti.App.Properties.getString("apikey");
if(firsttime==true)
{
winloading.open();
var completeurl=baseurl+lat+","+lng+"&radius=" + radiusmts+ "&types=" + loc_type+ "&sensor=false&key=" + key;
}
else
{
winloading.show();
var completeurl=url;
}
var client = Ti.Network.createHTTPClient();
Ti.API.info("complete url " +completeurl);
client.open('GET',completeurl);
client.onload = function(e) {
//For getting next_page_token so that next page results could be displayed
var json = JSON.parse(this.responseText);
if(json.next_page_token)
{
Ti.API.info("Next page token found ");
next_page=true;
nxt_pge_tkn=json.next_page_token;
}
else
{
Ti.API.info("Next page token not found ");
next_page=false;
}
if(json.results.length==0)
{
var lblno_record=Titanium.UI.createLabel({
text : "No Record Found",
color : "black",
font : {fontSize : "25%" }
});
view1.add(lblno_record);
}
else
{
for(var i=0; i <json.results.length;i++)
{
//Ti.API.info("Place " + json.results[i].name+ " Lat " + json.results[i].geometry.location.lat + " Lng " + json.results[i].geometry.location.lng);
var row = Ti.UI.createTableViewRow({
className : "row"
//height : "80%"
});
//For temporary storing name in name variable
var name=json.results[i].name;
//Logic for shortening string in order to avoid overlapping of string
(name.length>35)?name=name.substr(0,34)+ "..." :name=name;
//Create label for displaying the name of place
var lblname=Ti.UI.createLabel({
//text : json.results[i].name,
text : name,
color : "black",
font : {fontSize : "20%"},
left : "22%",
top : "5%"
});
Ti.API.info("Name :- " + name);
row.add(lblname);
var add= json.results[i].vicinity;
(add.length>125) ? add=add.substr(0,123)+ ". ." : add=add;
var lbladdress=Ti.UI.createLabel({
text : add,
color : "black",
font : {fontSize : "15%"},
left : "22%",
top : "30%",
width : "71%"
});
row.add(lbladdress);
var imgico=Ti.UI.createImageView({
image : json.results[i].icon,
height : "90",
width : "90",
left : "1%",
top : "3%"
//bottom : "10%"
});
row.add(imgico);
tableData.push(row);
}
//setting data that have been set to mytable view
myTable.setData(tableData);
view1.add(myTable);
}
winloading.hide();
};
client.onerror=function(e){
alert("Network Not Avaliable");
};
myTable.addEventListener('scroll',function(e){
var first=e.firstVisibleItem;
var visible=e.visibleItemCount;
var total=e.totalItemCount;
Ti.API.info("Value of next_page_token before loop " + next_page);
if(next_page==true && first+visible==total )
{
Ti.API.info("Value of next_page_token in loop " + next_page);
var newurl="https://maps.googleapis.com/maps/api/place/nearbysearch/json?pagetoken="+nxt_pge_tkn+"&sensor=false&key="+key;
firsttime=false;
winloading.show();
//myTable.removeEventListener('scroll',function(e){});
json_parsing(newurl,firsttime,winloading);
//get_next_page(newurl);
}
});
client.send();
return view1;
client.clearCookies();
}
I was looking through your code and I would like to point:
There is an important issue with the block:
myTable.addEventListener('scroll',function(e){
...
});
this block is called each time you call your json_parsing function. Because of that you will have several functions attached to myTable scroll event. I'm sure that this isn't your intention. You should put it out of json_parsing.
About your specific issue you could try to look at the json.next_page_token value in your client.onload function:
client.onload = function(e) {
//For getting next_page_token so that next page results could be displayed
var json = JSON.parse(this.responseText);
Ti.API.info(JSON.stringify(this.responseText);
if(json.next_page_token)
{
...
maybe the value is an empty object {} or a 'false' string that will return a thruthy value. Don't forget that in javascript there are only 6 falsy values: false, undefined, null, 0, '' and NaN.
In practice this is a minor issue, but in documentation HTTPClient.onload and HTTPClient.onerror functions must be set before calling HTTPClient.open function
BTW, you have unreachable code at the end of your json_parsing function, but I think you already know that :-)
client.send();
return view1;
client.clearCookies(); //Unreachable code
I have an app that contains a messaging system. It consists of a TableView that splits off into two TabGroups, using a NavGroup (I'm using Ti 1.7.5).
The problem I'm seeing is two fold;
Both title bars of the NavGroup and the Tab are being displayed, and
The TabGroup's title is not being displayed in the NavGroup title bar.
The following screenshot illustrates both problems:
Code (please note this is heavily summarised):
csu.module.messages.createMainWindow = function() {
csu.module.messages.mainWindow = Ti.UI.createWindow($$.moduleMainWindow);
csu.module.messages.navGroupContainer = Ti.UI.createWindow($$.modalContainer);
var mainTableView = Ti.UI.createTableView($$.tableView);
csu.module.messages.navGroup = Ti.UI.iPhone.createNavigationGroup({
window: csu.module.messages.mainWindow
});
...
mainTableView.addEventListener('click', function(e){
// Event info
var index = e.index, section = e.section, row = e.row, rowData = e.rowData;
switch(index) {
case 0:
// inbox;
csu.module.messages.inboxView = csu.module.messages.createInboxView(); // returns the tabgroup
csu.module.messages.navGroup.open(csu.module.messages.inboxView);
break;
case 1:
// archive;
csu.module.messages.archiveView = csu.module.messages.createArchiveView(); // Returns another tabgroup
csu.module.messages.navGroup.open(csu.module.messages.archiveView);
break;
}
});
...
csu.module.messages.mainWindow.add(mainTableView);
csu.module.messages.navGroupContainer.add(csu.module.messages.navGroup);
}
csu.module.messages.createInboxView = function() {
var tabGroup = Ti.UI.createTabGroup({
title: 'Inbox',
navBarHidden: false,
backgroundColor: '#000000',
barColor: csu.ui.theme.headerColor // black
});
var criticalInbox = csu.module.messages.createListWindow(m_Config.MESSAGE_TYPE_CRITICAL, true);
csu.module.messages.criticalInboxTab = Ti.UI.createTab({
title: 'Critical',
icon: 'images/tab-critical.png',
window: criticalInbox
});
...
// two other tabs are created
tabGroup.addTab(csu.module.messages.criticalInboxTab);
tabGroup.addTab(csu.module.messages.importantInboxTab);
tabGroup.addTab(csu.module.messages.generalInboxTab);
return tabGroup;
};
csu.module.messages.createListWindow = function(listType, isInbox) {
var tabWindow, title, tableView;
switch(listType) {
case m_Config.MESSAGE_TYPE_CRITICAL:
title = 'Critical';
break;
case m_Config.MESSAGE_TYPE_IMPORTANT:
title = 'Important';
break;
case m_Config.MESSAGE_TYPE_GENERAL:
title = 'General';
break;
};
tableView = Ti.UI.createTableView();
var tableData = new Array();
tableView.setData(tableData);
tabWindow = Ti.UI.createWindow({
title: title,
navBarHidden: false
});
tabWindow.add(tableView);
return tabWindow;
}
Does anyone know of a work around or something to get the title in the Navigation bar from the TabGroup? Is this a bug?
Your assistance is appreciated.
Titanium discourage the use of tab groups within navigation groups as they are both window managers, displaying a titlebar at the top.
See: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window
While it doesn't look the same, a tabbed bar should be used instead.