i had already done adding a click handler to each Segment of my doughnut chart with adding the following Code :
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var chartelementid = activePoints[0].label;
alert(chartelementid);
//$('.details div').css("display", "none");
//$('#' + chartelementid).show();
}
);
This works fine, when finished it should display an additional Div with Details for this segment.
Unfortunality my labels are more then just Single Words, so i'm struggeling to create div ID's with the same name...
My Idea is to add to every Segment an additional Data like value,label, etc. so it could be an ID. but if i just add the ID information to the Segment it will not exist as variable.
Add DataType:
var dataImprove = [
{
value: 30,
color:"#001155",
highlight: "#1c2f7c",
label: "KnowHow Erhalt / Transfer & Aufbau",
id:"test"
}
]
where can i add in chart.js an additional dataType like shown above my ID to be accessible in the DOM?
kind regards Marco
As an alternative pass a JSON string as your label, then intercept to render. For example:
var canvas = document.getElementById(id);
var d = canvas.getContext("2d");
var chart = new Chart(d).Pie(json, {
segmentStrokeWidth: 1,
tooltipTemplate: "<%=label%>", //default the label
customTooltips: function (tooltip) {
// Hide if no tooltip
if (!tooltip) {
return;
}
var tooltipObj = JSON.parse(tooltip.text);
// etc
already found : between line 999 and 1023 in chart.js before drawing - i've added the line
id: ChartElements[0].id,
so the Data with the name ID is in the DOM avaiable.
Related
I'm displaying my results on an interactive grid. I'd like to be able to select multiple rows and click an edit button that will open up an “edit” form. I am having a number of problems:
Retrieve the car IDs of the rows selected. (I am having trouble accessing column values, I can access item values)
Pass a collection or array of ids to the edit form.
Save the collection.
Added more code in answer box by accident...……..
I made some progress but I am a little stuck. I followed the oracle blog and it was vey helpful. So on the attribute of the region I added the following code:
function (config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
toolbarGroup.controls.push(
{
type: "BUTTON",
action: "updateCar",
label: "Edit Selected Cars",
hot: true,
});
config.toolbarData = toolbarData;
config.initActions = function (actions)
{
// Defining the action for activate button
actions.add(
{
name: "updateCar",
label: "Edit Selected Cars",
action: updateCar
});
}
function updateCar(event, focusElement)
{
var i, records, model, record,
view = apex.region("ig_car").widget().interactiveGrid("getCurrentView");
var vid = "";
model = view.model;
records = view.getSelectedRecords();
if (records.length > 0)
{
for (i = 0; i < records.length; i++)
{
record = records[i];
//alert("Under Development " + record[1]);
vid = vid + record[1] + "||";
apex.item("P18_CAR").setValue(vid);// This is not needed just to test
//the output
// call next page
// pass array as sql source or directly on page
}
}
}
return config;
}
This works. A button is displayed and when selected it gets the values from the interactive grid. The part I am stuck is how to call the next page and pass the multiple values (2 columns) to the page to be displayed and in a query to do an update.
Thank you if you can help me accomplish this!
Using line chart js.
Need to make checkbox which show/hide datasets
I made something like this:
lineChartData = {
labels : ["01.01.2015","012.01.2015","03.01.2015","04.01.2015","05.01.2015","06.01.2015","07.01.2015"],
datasets : dataSets
};
where dataSets is array of dataset objects, and when checkbox changed i do the next:
if($(this).prop('checked')){
myNewChart.datasets[datasetId] = dataSets[datasetId];
}
else{
myNewChart.datasets[datasetId]= {};
}
myNewChart.update();
myNewChart.datasets[datasetId]= {}; Works and delete line on graph, but adding dataset back not showing the line, however it added in myNewChart.datasets array.
Just destroy and redraw the chart. While Chart.js does support adding and removing line points - it is by label (and not by dataset - which is what you want)
Your problem was that you were emptying out the actual dataset objects - if you link it to a copy of the dataset everything works.
Here is your updated change handler
$('input:checkbox').change(function () {
var chartId = $(this).attr('data-chart-id');
var datasetId = $(this).attr('data-data-set');
dataSets[datasetId].hide = !$(this).prop('checked')
lineChartData.datasets = []
dataSets.forEach(function (dataset) {
// create a copy of the dataset to modify (if required) and put into the chart dataset array
var copy = jQuery.extend(true, {}, dataset)
if (dataset.hide)
copy.data = []
lineChartData.datasets.push(copy)
})
// create the graph from scratch
myNewChart.destroy()
myNewChart = new Chart(ctx).Line(lineChartData, chartOpt);
});
Fiddle - http://jsfiddle.net/6qdm7nwu/
in order to get familiar with dojo I'm working on a test project which consists of the following components:
data grid (created declaratively), filled with JSON data; clicking on a line will open a dialog containing a form (works)
form (created from template), with several input fields, filled with data from the grid store (works)
FilteringSelect (part of form) (doesn't work, no content)
The FilteringSelect contains dynamic data. In order to keep data traffic low, I thought it wise to get this data when the whole page is loaded and to pass it into the template initialization function.
In fact, I don't really know how to assign the store to the FilteringSelect.
Any help would be greatly appreciated.
Here's my code. I shorten it to the what I consider relevant parts so that it's easier to understand.
Grid Part:
var data_list = fetchPaymentProposalList.fetch();
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout
});
// store for FilteringSelect
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryList
});
return {
// function to create dialog with form
instantiate:
function(idAppendTo) {
/*append the new grid to the div*/
grid.placeAt(idAppendTo);
/*Call startup() to render the grid*/
grid.startup();
grid.resize();
dojo.connect(grid, "onRowClick", grid, function(evt) {
var rowItem = this.getItem(evt.rowIndex);
var itemID = rowItem.id[0];
var store = this.store;
var paymentProposalForm = new TmpPaymentProposalForm();
paymentProposalForm._init(store.getValue(rowItem, "..."), ..., beneficiaryListStore);
});
}
};
The beneficiarylist comes as something like this:
return { 12: { id : 1, name : "ABC" }};
The FilteringSelect in the template looks like this:
<input data-dojo-type="dijit/form/FilteringSelect" name="recipient" id="recipient" value="" data-dojo-props="" data-dojo-attach-point="recipientNode" />
Template Init Code looks like this:
_init: function(..., beneficiaryListStore) {
this.recipientNode.set("labelAttr", "name");
this.recipientNode.set("searchAttr", "name");
// here should come the store assignment, I guess???
var dia = new Dialog({
content: this,
title: "ER" + incoming_invoice,
style: "width: 600px; height: 400px;"
});
dia.connect(dia, "hide", function(e){
dijit.byId(dia.attr("id")).destroyRecursive();
});
dia.show();
}
For anyone who's interested, here's my solution:
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryData = {
identifier : "id",
items : []
};
for(var key in beneficiaryList)
{
if(beneficiaryList.hasOwnProperty(key))
{
beneficiaryData.items.push(lang.mixin({ id: key }, beneficiaryList[key]));
}
}
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryData
});
That did the trick
I want to refresh a dojo grid in my web page. I tried .refresh which is given in dojotoolkit.org without success. is there any other convenient way to do refreshing? Thanks in advance.
Maybe this helps. This is the way i refresh my Grid:
if(!registry.byId("GraphGrid")){
var grid = new EnhancedGrid({
id: 'GraphGrid',
store: GraphicStore,
query: { ident: "*" },
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {
headerSelector:true,
width:"40px",
styles:"text-align: center;"
}}
},"GridGraphicInMap");
/*Call startup() to render the grid*/
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get a value out of the item
var value = this.store.getValue(item, "geom");
highlightGeometry(value,true);
// do something with the value.
});
}
else {
registry.byId("GraphGrid").setStore(GraphicStore);
}
When i first call my function the grid is generated. Evrytime i call the function later only the store is refreshed.
Regards, Miriam
Here I have a problem with my tableView I want to insert text into each row of the table
can you help me please
here is the code
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('white');
// create tab group
var tabGroup = Titanium.UI.createTabGroup({
});
// create base UI tab and root window
var win1= Titanium.UI.createWindow({
title:'',
tabBarHidden: true,
barColor:'black',
backgroundColor:'white'
});
var tab= Ti.UI.createTab({
title:'Connexion ',
window:win1
});
//
// This is a test that is meant to verify that a row object can have a header
// and the table view has no table view header - the header should be displayed
var win = Titanium.UI.currentWindow;
var inputData = [
{title:'Pseudo/email :', header:'Connexion ......'},
{title:'Password :'},
{title:'Créer votre compte',hasChild:true, header:'not yet registered ?'},
];
var tableView = Titanium.UI.createTableView({
data:inputData,
style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
win1.add(tableView);
tabGroup.addTab(tab);
// open tab group-----------------------------------------
tabGroup.open();
win1.open();
that's what I did right now but I have a problem with the title of my table and then I add another table.
there are also some ouci with the cursor which moves in the mid-line titles
here is the code
var win1= Titanium.UI.createWindow({
title:'',
tabBarHidden: true,
barColor:'black',
backgroundColor:'white'
});
var view = Titanium.UI.createView({
backgroundColor: "#FFFEEE"
});
var row1 = Ti.UI.createTableViewRow({
height:'auto',
selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var label1 = Titanium.UI.createLabel({
text:'Pseudo/e-mail :',
left: 10
});
var usernametf = Ti.UI.createTextField({
left: 100,
right:10,
//hintText: 'Pseudo/email :',
//textAlign:"right",
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
});
var row2 = Ti.UI.createTableViewRow({
height:'auto',
selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var label2 = Titanium.UI.createLabel({
text:'Mot de passe :',
left: 10
});
var passwordtf = Ti.UI.createTextField({
left: 100,
//textAlign:"right",
//hintText: 'password',
right:30,
passwordMask:true,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
});
row1.add(label1);
row1.add(usernametf);
row2.add(label2);
row2.add(passwordtf);
var data = [row1,row2];
var table = Ti.UI.createTableView
({
data:data,
style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
view.add(table);
win1.add(view);
win1.open();
I let you know that I really began with Appcelerator
Is there any reason why you wouldn't just use textfields? You could then just grab the values on button press and insert.
Kitchen Sink example link
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/textfield_events.js
Another example of a screen like this would be the Tweetanium App https://github.com/appcelerator/tweetanium
Whether you use textfields or tableviews there are several ways to work with the Ti Database object.
Two common ways would be:
1) You can loop through your inputData object and insert. Below are a few examples.
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/database_2.js
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/database_3.js
2) You can use the tableview object itself or a wrapper similar to this example https://github.com/kwhinnery/Persistence
I would recommend using textfields if possible.