I am creating fusion charts in .net, and Its working fine.
Chart MyFirstChart = new Chart(chartType, chartName, "100%", height.ToString(), "json", jsonData.ToString());
Data is collected from data table from SQL server and converted to JSON string.
My data table has the following data :
Date
No of students
Percentage
Name of Department
I would like to add an event that if a data plot is clicked more details are shown by showing data from a different data table, which contains more details of that Department.
I added the event:
MyFirstChart.AddEvent("dataPlotClick" , "dataPlotClick");
// render chart
return MyFirstChart.Render();
And called this event in a Javascript
<script>
dataPlotClick = function (eventObj, dataObj) {
console.log(eventObj);
var header = document.getElementById('header');
header.style.display = 'block';
var tempDiv = document.createElement('div');
var attrsTable = document.getElementById('attrs-table');
var titleDiv, valueDiv;
for (var prop in dataObj) {
titleDiv = document.createElement('div');
titleDiv.className = 'title';
titleDiv.innerHTML = prop;
valueDiv = document.createElement('div');
valueDiv.className = 'value';
valueDiv.innerHTML = dataObj[prop];
tempDiv.appendChild(titleDiv);
tempDiv.appendChild(valueDiv);
}
attrsTable.innerHTML = '';
attrsTable.appendChild(tempDiv);};
</script>
The click on data plot works fine, but its gets the data of the current data table, and I would like to get the more detailed data table and show in a table view in the asp page.
Is there a way to do that?
Related
A project includes a page on which exists a column showing foods associated with a meal and a (paginated) column of foods not associated with a meal. A script allows to click on a food in the paginated column, have that food removed from the list of available foods and appear in the list of associated foods. In the dev environment I can demonstrate that the script works.
In an effort to learn how to use Panther in testing I've tried to reproduce the effect of clicking on a food. The test code below hopes to show that the first row of the table of unassociated foods changes after a click. That test runs without error but fails. The question, then, is how or whether to make a test that shows a change in the table.
Edit: When I forced a Firefox client (static::createPantherClient(['browser' => static::FIREFOX]);) and adding PANTHER_NO_HEADLESS=trueto.env.test.local` the test ran slow enough for me to observe the first table row was removed. So somehow the test needs a way to read the new first row (and is different from how the test tries to do that now).
Edit 2: If I insert the lines $client->request('GET', 'http://diet/meal');$newCrawler = $client->clickLink('edit'); after executing the script I can get the test to pass. This seems to be a different test from expecting the test to pass without leaving and returning to the page. Or is it not possible to test without leaving?
Edit 3: Since Panther says it "can wait for asynchronously loaded elements to show up" I added a data attribute which increments on clicking. The test now includes the line $this->assertSelectorWillNotContain("document.querySelector('#mealid').getAttribute('data-rte')", $rteCount);. Nice, except that Panther returns Given css selector expression "document.querySelector('#mealid').getAttribute('data-rte')" is invalid even though a Firefox console with the identical selector returns an integer.
table row: <td data-foodid="185">dolor</td>
test code:
class MealTest extends PantherTestCase
{
public function testFood()
{
$client = static::createPantherClient();
$client->followRedirects();
$client->request('GET', 'http://diet/meal');
$this->assertPageTitleContains('Meals');
$crawler = $client->clickLink('edit');
$this->assertPageTitleContains('Edit Meal');
$foodLink = $crawler->filter('#meal_pantry td')->first();
$q = $foodLink->attr('data-foodid');
$client->executeScript("document.querySelector('#meal_pantry td').click()");
$client->waitFor('#meal_pantry');
$nextUp = $crawler->filter('#meal_pantry td')->first();
$p = $nextUp->attr('data-foodid');
$this->assertNotEquals($p, $q);
}
}
javascript:
$('td').on('click', function (e) {
var foodId = $(e.currentTarget).data('foodid');
var mealId = $("#mealid").data("mealid");
var tableId = $(this).parents('table').attr('id');
var pageLimit = $("#mealid").data("pagelimit");
$packet = JSON.stringify([foodId, mealId, tableId]);
$.post('http://diet/meal/' + mealId + '/editMealFood', $packet, function (response) {
editFoods = $.parseJSON(response);
var readyToEat = $.parseJSON(editFoods[0]);
var pantry = $.parseJSON(editFoods[1]);
var table = document.getElementById('ready_foods');
$('#ready_foods tr:not(:first)').remove();
$.each(readyToEat, function (key, food) {
row = table.insertRow(-1);
cell = row.insertCell(0);
cell.innerHTML = food;
});
var table = document.getElementById('meal_pantry');
$('#meal_pantry tr:not(:first)').remove();
$('li.active').removeClass('active');
$('li.page-item:nth-of-type(2)').addClass('active');
$.each(pantry.slice(0, pageLimit), function (key, array) {
food = array.split(",");
foodId = food[0];
foodName = food[1];
var row = table.insertRow(-1);
var cell = row.insertCell(0);
cell.innerHTML = foodName;
cell.setAttribute('data-foodid', foodId);
});
location.reload();
});
});
Turns out I've been using the wrong assertions. The eventual solution:
$client = static::createPantherClient();
$client->followRedirects();
$client->request('GET', 'http://diet/meal');
$this->assertPageTitleContains('Meals');
$crawler = $client->clickLink('edit');
$this->assertPageTitleContains('Edit Meal');
$rteCount = $crawler->filter('#mealid')->attr('data-rte');
$client->executeScript("document.querySelector('#meal_pantry td').click()");
$client->waitForAttributeToContain('#mealid', 'data-rte', $rteCount + 1);
Can someone suggest a solution for below:
I am taking inputs from a CSV file using javascript. On a button click, I would like to update two tables in HTML. I have set two dvis; dvCSV and alld.
When I click on button the table only gets updated in "alldc" not in "dvCSV".
If I remove var alld =......upto "alld.appendChild(table);" then only "dvCSV" table gets updated with the data.
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
var alld = document.getElementById("alld");
alld.innerHTML = "";
alld.appendChild(table);
I am using https://github.com/wenzhixin/bootstrap-table on some project.
I find that is really easy to use and implement pagination. However I have some problem regarding custom html in different rows. This is just peace of code.
$('#selector').bootstrapTable({
pagination: true,
url : some_rest_url,
sidePagination: 'server',
onLoadSuccess: function (res) {
var data_ = [];
var rows = res.rows;
for (var i =0; i < rows.length; i ++) {
var data = {};
var item = rows[i];
$.each(item, function (key, value) {
if (key == "cost") value = "< span class="cl" >"currency + " " + parseFloat(value).formatNumber(2, '.', ',')."< / span >";
//and so on some more styling and formatting for other elements/columns of table
data[key] = value;
});
data_.push(data);
}
$('#selector').bootstrapTable("load", data_);
So table should have one column and in each row span element with that class but that is not happening.
I just have that default plain text data from boostrapTable default load (json data).
BTW when using plain ajax call instead of that default boostrapTable pagination thingy everything works great but then i have to make custom pagination (and using sidePagination = client is just wrong and working slow when have like 1000 records ).
After wasting couple of hours, solution was to use formatter for columns. For example:
field: 'column_name',
formatter: operateFormatter
function operateFormatter(value, row, index){
//value is text from json
//row is all values from json for that row
}
well this way, code will be much more clearer.
I am working with a google script to make my data show in a more user friendly way then just a huge spreadsheet with multiple people filtering at the same time.
Using script shown further below I was able to create :
My problem is the red highlighted part. this column (the next as well) would always either be blank or show a link. Now this is an example so it is a short link which you could easily copy from there and paste to the top.
1.What I want to achieve: is to have that link clickable (redirect link in the spreadsheet) 2.Ideally I would set up in spreadsheet a word like "link" with a hyperlink like "https://www.google.de/" and you would then in the chart just click the word link and it takes you to the link.
Below I will add the script I have been using so far.
//Get the spreadSheet Url
var ssKey ="-Link to Spreadsheet-";
function doGet()
{
var uiApp = UiApp.createApplication().setTitle("Database");
var ss = SpreadsheetApp.openByUrl(ssKey);
//Get the compelte data from sheet name "-Name-"
var dataRange = ss.getSheetByName("OPEN").getDataRange().setNumberFormat
('#STRING#');//getRange(1, 1, lastRow, lastColumn);
//To provide a category or dprodown filter
var oneFilter = Charts.newCategoryFilter().setFilterColumnLabel("Type of Request").build();
var secondFilter = Charts.newCategoryFilter().setFilterColumnLabel("Work: Business").build();
var thirdFilter = Charts.newCategoryFilter().setFilterColumnLabel("Work: ").build();
var forthFilter = Charts.newStringFilter().setFilterColumnLabel("IDEA").build();
var fifthFilter = Charts.newCategoryFilter().setFilterColumnLabel("REGION / FUNCTION").build();
var sixthFilter = Charts.newCategoryFilter().setFilterColumnLabel("-name of filter 6-").build();
// To get data of spreadhseet in table format
var tablechart = Charts.newTableChart()
.setDimensions(1750,1000)
.setOption('allowHtml',true)
.setOption('width', '100%')
.setOption('lenght', '100%')
.enablePaging(10)
.build();
// To Add Age filter and table data in dashboard
var dashboard = Charts.newDashboardPanel()
.setDataTable(dataRange)
.bind([oneFilter,secondFilter,thirdFilter,forthFilter,fifthFilter,sixthFilter],[tablechart]).build();
var app = UiApp.createApplication()
var filterPanel = app.createHorizontalPanel();
var filterPanel2 = app.createHorizontalPanel();
var chartPanel = app.createVerticalPanel();
filterPanel.add(oneFilter).add(secondFilter).add(thirdFilter).setSpacing(10);
filterPanel2.add(forthFilter).add(fifthFilter).add(sixthFilter).setSpacing(10);
chartPanel.add(tablechart).setSpacing(10);
dashboard.add(app.createVerticalPanel().add(filterPanel).add(filterPanel2).add(chartPanel));
app.add(dashboard);
return app;
}
To create a link from the script, you'll have to set the value of the cell as if it was a formula you are writting within the Spreadsheet. For this, we will use 'HYPERLINK(url, value)' into the cell. You can perhaps create a method that will create the string with the formula, and just set that value to the cell.
Try this approach:
function getHyperLink(url,val) {
return "=HYPERLINK("+"\""+url+"\""+","+"\""+val+"\""+")";
}
//Example to obtain the value of the url and the text to set in as a link
var aSheet = SpreadsheetApp.getActiveSheet();
var curRow = aCell.getRow();
var val = aSheet.getRange(curRow, 0).getValue();
var url = aSheet.getRange(curRow, 1).getValue();
aSheet.getRange(curRow, 2).setHorizontalAlignment('center').setValue(getHyperLink(url,val));
I am using struts2-jqgrid and javascript. when jqgrid load completed this get <s:url var="updateurl" action="pagosActualizar"/> and the jqgrid generate in view source html options_gridtable.cellurl = "/Cuenta_Corriente_LBS/pagosActualizar.action";, now the problem i have a var in javascript and want add a paramater to this url for example: options_gridtable.cellurl = "/Cuenta_Corriente_LBS/pagosActualizar.action?cod=1";. Any form of editad this line with javascript?
//JAVASCRIPT
$.subscribe('rowsel', function(event) {
var id = event.originalEvent.rowid;// this is the parameter for the url
var data = jQuery("#gridtable").jqGrid('getRowData',id);
var estado = data['estado.descripcion'];
var cod = data['correlativo'];
if(estado === 'PENDIENTE'){
jQuery("#gridtable").jqGrid('setColProp', 'fecha_acuerdo', {editable:true});
// here cod for edited url in jqgrid
}
}
//MYJSP
<s:url var="remoteurl" action="jsontableModificar"><s:param name="codigo"><s:property value="cuentacorriente.idcuentacorriente"/></s:param></s:url>
<s:url var="updateurl" action="pagosActualizar"/>
<sjg:grid
id="gridtable"
caption="Plan de Pagos Modificar"
dataType="json"
href="%{remoteurl}"
pager="false"
gridModel="gridModel"
autowidth="true"
sortable="true"
gridview="true"
cellEdit="true"
cellurl="%{updateurl}"
onCellSelectTopics="rowsel"
>
//VIEW SOURCE HTML
options_gridtable.datatype = "json";
options_gridtable.url = "/Cuenta_Corriente_LBS/jsontableModificar.action?codigo=12";
options_gridtable.cellurl = "/Cuenta_Corriente_LBS/pagosActualizar.action";
options_gridtable.height = 'auto';
options_gridtable.pgbuttons = true;
options_gridtable.pginput = true;
options_gridtable.gridview = true;
options_gridtable.autowidth = true;
options_gridtable.caption = "Plan de Pagos Modificar";
options_gridtable.autoencode = true;
options_gridtable.cellEdit = true;
options_gridtable.oncellselecttopics = "rowsel";
Well the flow is he user click in cell of jqgrid, later trigger a event that get the rowid and validated the field to be edited, the problem is that when edited the cell is use the cellurl but only send the content cell to edited and not the rowid that need for update the register, i need the two the rowid and cell content.
You can use "beforeSubmitCell" Event. Documentation is given in following link.
Documentation of "beforeSubmitCell"
Ex.
beforeSubmitCell:{cod:cod}.
1st cod is name of variable posted to a server
2nd cod is value of variable comes from your javascript
that is me banned acc, i found answer: jQuery("#gridtable").jqGrid('setGridParam',{editurl:"jsontable.action?searchString="+valor}).trigger('reloadGrid');
PD: Me banned because i was new, but now i know more.