I'm trying to use the Angular UI Grid. In my HTML I have the following code.
<div ui-grid="gridOptions"></div>
And in my controller I have the following javascript.
$scope.values = [{ id: 0, namn: 'erik' }];
$scope.gridOptions = {
data: $scope.values
}
When starting my page the data is displayed in the grid. The problem is when I try to update the data. The changes is not propragated to the grid.
The follwing will not update the grid. Why?
$scope.values = [{ id: 100, namn: 'Test' }];
it's rather somthing like this :
$scope.gridOptions = {
data: 'values'
}
Related
I am trying to populate a highchart in jade(with javascript) with JSON data send from node.js. I do this by adding JavaScript in jade, this works fine with static data as shown below:
var series = [
{
name: 'Tokyo',
data: [7.0]
}
];
Now I want to add JSON data from node.js. I implemented the following:
app.get('/chart', function(req,res){
var chartData = [
{
name: 'Tokyo',
data: [7.0]
}
];
res.render('chart', {
chart: chartData
});
});
When I print chartData in console, the output is the same as the static data. When I set(in jade)
var series = '#{chart}' I get an empty highchart.
The problem seems to be the JSON from node js. Highcharts gives as many series as there are characters, which means jade/javascript is not parsing the JSON correctly, but character by character instead(each character is new object). I have printed chartData from node.js to my console, showing the following:
[ { name: 'Tokyo', data: [ 7 ] } ]
I have tried JSON.stringify in my node js file, but this returns invalid JSON as follows:
var series = '[{"name":"Tokyo","data":[7]}]';
How can I get my chart to work with the JSON returned from node.js?
I figured out how to solve this. In node js:
var chartData = [];
chartData.push({
name: 'Tokyo'
data: [7.0]
});
res.render('chart', {
chart: chartData
});
My mistake was in Javascript within Jade, when parsing the JSON. Following solved the problem:
!{JSON.stringify(chart)}
If you're having trouble outputting proper JSON, try the JSON.stringify method.
app.get('/chart', function(req,res){
var chartData = [
{
name: 'Tokyo',
data: [7.0]
}
];
res.render('chart', {
chart: JSON.stringify(chartData, null, 4)
});
});
I have a slider that is used to changed a value in my controller like so
index:
<div>
<rzslider
rz-slider-model="slider.value"
rz-slider-options="slider.options">
</rzslider>
<p>{{slider.value}}</p>
</div>
controller:
app.controller('gbarchartController', function($scope) {
$scope.slider = {
value: 20,
options: {
floor: 0,
ceil: 30
}
};
When i change the value of the slider, the code below displays it on screen as 2 way binding should.
<p>{{slider.value}}</p>
The problem is , if i try to access this variable through a function in my controller, it uses the initial value of 20 that has been set. eg. If i change the slider to 10, the below code still uses the value 20. the variable in question is $scope.slider.value . The value is used to cut the length of an array, that in turn is used to display a graph using highchart.js.
$scope.graph = function(metric) {
Highcharts.chart(metric, {
chart: {
type: 'column'
},
title: {
text: 'Number Of Executions'
},
colors: [
'#7CFC00', '#FF0000'
],
xAxis: {
categories: numExe.hash.slice(0, $scope.slider.value),
title: {
text: 'Query Hash Value'
}
},
yAxis: {
title: {
text: '% of Total Executions'
}
},
tooltip: {
shared:true
},
series: [{
name: 'Baseline',
data: numExe.base.slice(0, $scope.slider.value)
},
{
name: 'Comparative',
data: numExe.compare.slice(0, $scope.slider.value)
}]
});
}
Long story short, The variable changes in the html but does not change in the controller. Any help would be great thanks.
I don't think Highcharts monitors its data for changes, so it won't detect changes to your series data (see docs here). Additionally the series data passed in to the graph is static, so it won't update after the slider changes. You'll need to create a local Series variable to hold the series data, and update the series data when the slider changes. I'm not sure what numExe is so I can't say how the data is generated, but the Series object has setData() method (with a redraw parameter) that should do the trick.
I'm trying to change columns dynamically in my Alloy UI DataTable - depending on what button is selected, columns are changed depending on which data is returned.
My columns get updated, however the actual data is never included in the table. When I don't define any columns both the columns and data are returned - I of course want control of how my columns are displayed and want to set their attributes
Below is my code:
var dataTable = new Y.DataTable({ //Defining Datatable with no columns preset
editEvent: 'dblclick',
plugins: [{
cfg: {
highlightRange: false
}]
});
button.on(
'click', //On Click...
function() {
var category = $(this).attr("id"); //value retrieved from id of button selected
dataSource = new Y.DataSource.IO({source: '/searchMyData
dataSource.sendRequest({
dataType: 'json',
on: {
success: function(e) {
response = e.data.responseText;
setColumnNames(category); //Set the Columns...
data = Y.JSON.parse(response);
dataTable.set('data', data);//Then the Data
dataTable.render('#my-container');
},
failure: function() {
alert(e.error.message);
}
}
});
function setColumnNames(tabName){ //Defining Columns
var columns1 = [
{ key: 'id', label: 'ID', width: '70px' },
{ key: 'name', label: 'Name', width: '70px' }
];
var columns2 = [
{ key: 'id', label: 'ID', width: '70px' },
{ key: 'addr', label: 'Address', width: '70px' }
];
switch (category) {
case "person":
dataTable.set('columns', columns1);
break;
case "address":
dataTable.set('columns', columns2);
break;
default:
console.log('');
}
There's no issue with the data returning from the ajax request, only when it comes to loading it to the table with a new set of columns defined. I've tried the reset() method on both columns and data on each click, but no luck.
It turns out the keys returned from my request were being capitalized and included underscores (just how they're defined in the database) - I've also noticed defining the columns key is case sensitive. If I changed a single character from lower case to upper than the column would not display data.
According to the Alloy UI API, the FooterView class has a method called refreshFooter() which
Refreshes the summary items in the footer view and populates the footer elements based on the current "data" contents.
I am trying to figure out how to call this function after a certain event, not sure how to make the call since the footerView is defined as an attribute. Here is my Datatable:
var dataTable = new Y.DataTable({
columns: columns,
height: '95%',
footerView: Y.FooterView,
footerConfig: {
fixed: true,
heading: {
colspan: 5,
content: "Number of Records : {row_count}"
}
}
});
I've tried placing the footerView into a variable and invoking but, but no luck. Any ideas on how to execute this function?
Source: http://stlsmiths.github.io/new-gallery/classes/Y.FooterView.html#method_refreshFooter
Basically tables require two kinds of information, table columns and data. Pass both into your Data Table after columns and data, and don't forget to render it! . I think you are not rendering it. Try it ! GoodLuck!
YUI().use(
'aui-datatable',
function(Y) {
var columns = [
name,
age
];
var data = [
{
name: 'Bob',
age: '28'
},
{
name: 'Joe',
age: '72'
},
{
name: 'Sarah',
age: '35'
}
];
new Y.DataTable(
{
columns: columns,
data: data
}
).render("#myDataTable");
}
);
#myDataTable is the div that you want to render.
I'm trying out Kendo charts with angular, and I have problem displaying data, here is my code:
HTML:
<div kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>
Javascript:
resultService.getResult().then(function (resultResponse) {
$scope.data = resultResponse.data;
$scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
$scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
$scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
});
$scope.chartOptions = {
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Total Visits",
data: $scope.oldReps
}, {
name: "Unique visitors",
data: $scope.newReps
}],
valueAxis: {
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}"
}
};
The problem is chart isn't updated after data is fetched from server, I've tried refreshing chart like this (but with no luck):
$scope.chart = {
refreshChart : function() {
$scope.rchart.refresh();
},
};
And calling this method in:
resultService.getResult().then(function (resultResponse) {});
And I've also tried to define $scope.chartOptions inside same function, but nothing. Is there any way to fix this ?
It's not well documented, but to get a UI control with remote data-binding to update after data has been returned from a server requires both watching the collection for updates from the Angular side and rebinding the data object to its respective UI control from the Kendo side.
In your controller, watch for changes to your data objects using $watchCollection, and update the objects/properties which are bound to those collections:
// API call
$http.get('...').success(function(data){
$scope.data = data;
});
// KendoUI config object
$scope.chart = {
dataSource: {
data: $scope.data
}
};
// Watch for changes to $scope.data
$scope.$watchCollection('data', function(newData) {
// Update data bindings with changes
$scope.chart.dataSource.data = newData;
});
In your view, define the object your UI control should be bound to when changes are made via the k-rebind Angular-Kendo directive:
<div kendo-chart k-options="chart" k-rebind="chart"></div>
Here is an example of a chart bound to remote data:
http://codepen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06
The use of $watchCollection to track and assign the dataSource.data in the accepted answer and others is a needlessly convoluted approach.
Here's a straightforward implementation:
view:
<div kendo-chart k-theme='metro' k-options="chart" k-rebind="chart"></div>
controller:
$scope.chart = {
dataSource: new kendo.data.DataSource({
data: [{ title: "Loading", value: 100, color: '#EFEFEF' }]
}),
series: [{ field: 'value', categoryField: 'title', padding: 0, holeSize: 25 }],
seriesDefaults: { type: 'donut', startAngle: 90 }
};
Using the dataSource.data() method instead of assigning dataSource.data as an array is the key here:
payrollService.load(userId).then(function (result) {
$scope.chart.dataSource.data(result.items); //where result.items is an array like so:
//[
// { title: "Net Pay", value: 60, color: '#6BAE4B' },
// { title: "Taxes", value: 15, color: '#ED6347' },
// { title: "Deductions", value: 25, color: '#8161C2' }
//]
});
Codepen Demo:
http://codepen.io/TaeKwonJoe/pen/WGOpEv
I think your problem is that $scope.chartOptions is set before the data of the resultService is retrieved. Angular is returning an empty array in this case and filling in the data later.
But $scope.chartOptions not not updated with new data.
You could try with
$scope.$watchCollection('oldReps', function(newData, oldData) {
$scope.chartOptions.series[0].data = newData;
});
$scope.$watchCollection('newReps', function(newData, oldData) {
$scope.chartOptions.series[1].data = newData;
});
So chartOptions are updated if oldReps or newReps have changed.
I had a similiar problem and $watchCollection saved my day (Caching data and updating another object for an chart does not work)