The code is almost identical from the tutorials. Here is the HTML:
<div fusioncharts
width="300"
height="100"
type="column2d"
dataSource="{{myDataSource}}" >
</div>
<div fusioncharts
width="300"
height="100"
type="column2d"
dataSource="{{myDataSource2}}" >
</div>
Here is my AngularJS code:
$scope.myDataSource = {
chart: {
caption: weekObject.week
},
data: [
{
label: "Saturday",
value: weekObject.days[0]._FE_Items_Sold.toString()
},
{
label: "Sunday",
value: weekObject.days[1]._FE_Items_Sold.toString()
},
{
label: "Monday",
value: weekObject.days[2]._FE_Items_Sold.toString()
},
{
label: "Tuesday",
value: weekObject.days[3]._FE_Items_Sold.toString()
},
{
label: "Wednesday",
value: weekObject.days[4]._FE_Items_Sold.toString()
},
{
label: "Thursday",
value: weekObject.days[5]._FE_Items_Sold.toString()
},
{
label: "Friday",
value: weekObject.days[6]._FE_Items_Sold.toString()
}
]
};
$scope.myDataSource2 = {
chart: {
caption: weekObject.week
},
data: [
{
label: "Saturday",
value: weekObject.days[0]._FE_Transactions.toString()
},
{
label: "Sunday",
value: weekObject.days[1]._FE_Transactions.toString()
},
{
label: "Monday",
value: weekObject.days[2]._FE_Transactions.toString()
},
{
label: "Tuesday",
value: weekObject.days[3]._FE_Transactions.toString()
},
{
label: "Wednesday",
value: weekObject.days[4]._FE_Transactions.toString()
},
{
label: "Thursday",
value: weekObject.days[5]._FE_Transactions.toString()
},
{
label: "Friday",
value: weekObject.days[6]._FE_Transactions.toString()
}
]
};
When I run this I get the first chart to render. The second one just has the phrase "No data to display." I noticed that even with the first graph, if I name the datasource anything but "myDataSource" it doesn't render either. That is confusing to me because how could I ever have a page with more than one graph if I can't reference multiple data variables to bind? I feel like the is more of a fix my ignorance than fix my code type question but..
Question: How can I render multiple graphs with FushionCharts with different data?
Works in my case.
var app = angular.module('dashApp', ["ng-fusioncharts"]);
app.controller('fusionController', ["$scope", function ($scope) {
$scope.myDataSource1 = {
chart: {caption: "Some week"},
data: [
{label: "Saturday", value: "100"},
{label: "Sunday", value: "300"},
{label: "Monday", value: "150"},
{label: "Tuesday", value: "240"},
{label: "Wednesday", value: "300"},
{label: "Thursday", value: "90"},
{label: "Friday", value: "170"}
]
};
$scope.myDataSource2 = {
chart: {
caption: "Some other week"
},
data: [
{label: "Saturday", value: "1100"},
{label: "Sunday", value: "1300"},
{label: "Monday", value: "1150"},
{label: "Tuesday", value: "1240"},
{label: "Wednesday", value: "1300"},
{label: "Thursday", value: "190"},
{label: "Friday", value: "1170"}
]
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<body ng-app="dashApp">
<div class="modal-body" ng-controller="fusionController">
<div fusioncharts
width="600"
height="300"
type="column2d"
dataSource="{{myDataSource1}}" >
</div>
<div fusioncharts
width="600"
height="300"
type="column2d"
dataSource="{{myDataSource2}}" >
</div>
</div>
</body>
Is it not working for any particular scenario?
If you're using a factory to try to load the data.json available for the $scope.myDataSource, this worked for me:
Factory
angular.module('myService', [])
.factory('dataLoad', ['$http', function($http){
return {
getData: function () {
return $http.get('data.json');
}
};
}])
Controller
Within controller, do this:
// within your controller
// create an empty object
$scope.myDataSource = {}; // this is kinda the trick. Without this,
// it complains of "No data to display"
dataLoad.getData()
.success(function(data) {
$scope.myDataSource = data;
});
Templates
Then as usual:
<fusioncharts width="600" height="500" type="column2d" dataSource="{{ myDataSource }}">
</fusioncharts>
Related
I want to use AmChart and getting data for charts from MySQL by JSON.
But it display not things.
This is my js source:
<script type="text/javascript">
var chart2;
$(document).ready(function(){
$.getJSON("data", function (data) {
chart2.dataProvider = data;
chart2.dataDateFormat = "YYYY-DD-MM";
chart2.validateData();
});
});
var chart2 = AmCharts.makeChart("chartdiv2", {
type: "stock",
theme: "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
title: "Participants",
fieldMappings: [{
fromField: "student",
toField: "student"
}],
categoryField: "date"
}
],
dataDateFormat: "YYYY-MM-DD",
panels: [{
showCategoryAxis: false,
title: "Student",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "student",
comparable: true,
compareField: "student",
balloonText: "[[title]]:<b>[[student]]</b>",
compareGraphBalloonText: "[[title]]:<b>[[student]]</b>"
}],
stockLegend: {
periodValueTextComparing: "[[percents.student.close]]%",
periodValueTextRegular: "[[value.close]]"
}
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth: true,
cursorAlpha: 0.1,
valueLineBalloonEnabled: true,
valueLineEnabled: true,
valueLineAlpha: 0.5
},
periodSelector: {
position: "left",
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
}
});
</script>
The json file output from data function
[{"date":"2011-01-10","student":"100"},{"date":"2012-02-11","student":"122"}]
Anyone know the solution please help. Thanks.
Try to parse your data,
For Eg,
$.getJSON("data", function (data) {
newData=JSON.parse(data);
chart2.dataProvider = newData;
chart2.dataDateFormat = "YYYY-DD-MM";
chart2.validateData();
});
I'm having a terrible time trying to get a simple jQWidget treegrid working with Angular.
The example using an Angular SPA I'm referring to is here: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives/angularjs-jquery-treegrid.htm
And the initial tutorial page is here: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives.htm
The front end error I'm getting is:
`ReferenceError: dataAdapter is not defined
at eval (eval at link (localhost:49479/app/services/directives.js:234:59), <anonymous>:1:27)
at link (localhost:49479/app/services/directives.js:234:28)`
[app] [HT Error] dataAdapter is not defined
Object {exception: ReferenceError, cause: "<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid" …pageable, columns: columns, disabled: disabled}">"}
cause: "<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid" ng-jqxsettings="{theme: 'metro', source: dataAdapter, width: 850, sortable: sortable, pageable: pageable, columns: columns, disabled: disabled}">"
exception: ReferenceError
and dataAdapter is binded in ng-jqxsettings="{theme: 'metro', source: dataAdapter ...}".
I also noticed as I debug in chorme f12, that my $scope.dataAdapater is empty of the data I have in the source var. In other words, 'source' contains valid data but never gets assigned to dataApapter :
$scope.dataAdapter = new $.jqx.dataAdapter(source);
My dashboard.html contains the <span id="jqxTreeGrid" ...> , which is giving me trouble :
<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
<section class="matter">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12"> <!-- HIERARCHY GRID -->
<div class="widget wlightblue">
<div data-cc-widget-header title="{{'Hierarchy'}}" subtitle="" allow-collapse="true"></div>
<div class="widget-content text-left text-info" style="float:left; border:none;">
<span>THIS IS A TEST</span>
<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid"
ng-jqxsettings="{theme: 'metro', source: dataAdapter, width: 850, sortable: sortable, pageable: pageable, columns: columns, disabled: disabled}">
</span>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
and my controller is :
(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', dashboard ]);
function dashboard(common, datacontext, $scope) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var vm = this;
vm.news = {
title: 'Test Online',
description: 'queries to dynamically aggregate data. .'
};
activate();
function activate($scope) {
var promises = [getMessageCount(), getCountries(), getMemberMtm(), initJqTreeGrid()];
common.activateController(promises, controllerId)
.then(function () { log('Activated Dashboard View'); });
}
///jQWidgets treegrid settings
function initJqTreeGrid() {
var source =
{
dataType: "array",
dataFields: [
{ name: "name", type: "string" },
{ name: "quantity", type: "number" },
{ name: "id", type: "string" },
{ name: "parentid", type: "number" },
{ name: "price", type: "number" },
{ name: "date", type: "date" },
{ name: "customer", type: "string" }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'parentid' }
},
id: 'id',
localData: generateordersdata()
};
$scope.dataAdapter = new $.jqx.dataAdapter(source);
$scope.theme = "metro";
$scope.sortable = true;
$scope.pageable = true;
$scope.disabled = false;
$scope.columns = [
{ text: 'Order Name', dataField: "name", align: 'center', width: 200 },
{ text: 'Customer', dataField: "customer", align: 'center', width: 200 },
{ text: 'Price', dataField: "price", cellsFormat: "c2", align: 'center', cellsAlign: 'right', width: 80 },
{
text: 'Order Date', dataField: "date", align: 'center', cellsFormat: "dd-MMMM-yyyy hh:mm", cellsRenderer: function (rowKey, column, cellValue, rowData, cellText) {
if (rowData.level === 0) {
return $scope.dataAdapter.formatDate(cellValue, "dd-MMMM-yyyy");
}
return cellText;
}
}
];
}
Your advice will be greatly appreciate by me.
regards,
Bob
I used a different example from their tutorial and was able to get it running. Slight difference, I am having my settings within controller definition, rather then inline. I had better luck with that. Loading order makes all the difference as well. Here is my code for the grid example.
JavaScript:
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
// Grid data.
var data = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];
for (var i = 0; i < firstNames.length; i++) {
var row = {};
row["firstname"] = firstNames[i];
row["lastname"] = lastNames[i];
row["title"] = titles[i];
row["city"] = city[i];
row["country"] = country[i];
data[i] = row;
}
$scope.people = data;
$scope.bindingCompleted = "";
$scope.settings =
{
altrows: true,
width: 800,
height: 200,
editable: true,
ready: function()
{
$scope.settings.apply('selectrow', 1);
},
sortable: true,
source: $scope.people,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', datafield: 'firstname', width: 150 },
{ text: 'Last Name', datafield: 'lastname', width: 150 },
{ text: 'Title', datafield: 'title', width: 150 },
{ text: 'City', datafield: 'city', width: 150 },
{ text: 'Country', datafield: 'country' }
],
bindingcomplete: function (event) {
$scope.bindingCompleted = "binding is completed";
}
}
});
</script>
HTML:
<div ng-app="demoApp" ng-controller="demoController">
<jqx-grid jqx-settings="settings"></jqx-grid>
</div>
Is it possible to create a Kendo UI DataViz chart from a remote datasource with a structure such as
"gender": [
{"male": 23421},
{"female": 24376},
{"unknown": 324}
],
Instead of using (from the example in the documentation)
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
field: "year"
},
series: [
{ field: "value" }
],
dataSource: [
{ year: "2012", value: 1 },
{ year: "2013", value: 2 }
]
});
</script>
I would like to use a data source formatted as
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
field: "year"
},
series: [
{ field: "value" }
],
dataSource: [
{ "2012": 1 },
{ "2013": 2 }
]
});
</script>
Well, it's a straightforward transformation in Javascript.
convertDataSource = function(dataSource) {
for(i in dataSource) {
(y = {})[dataSource[i].year] = dataSource[i].value;
dataSource[i] = y;
}
return dataSource;
}
convertDataSource([ { year: "2012", value: 1 }, { year: "2013", value: 2 }])
// [ { "2012": 1, "2013": 2}
I am getting a JSON.parse: unexpected character exception while I am trying to read a local JSON in my JQGrid.
<script type="text/javascript">
var jsondata = {
"totalpages": "1",
"currpage": "1",
"totalrecords": "2",
"invdata" : [
{"name":"New York City", "country":"USA", "continent":"NorthAmerica"},
{"name":"Paris", "country":"France", "continent":"Europe"}
]
};
$(document).ready(function() {
$("#grid").jqGrid({ data: jsondata,
datatype: "json",
colNames: ["Name", "Country", "Continent"],
colModel: [{
name: 'name',
index: 'name',
editable: true,
}, {
name: 'country',
index: 'country',
editable: true,
}, {
name: 'continent',
index: 'continent',
editable: true,
}],
pager: '#pager',
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
caption:"Dynamic hide/show column groups"
}).navGrid("#pager",{edit:false,add:false,del:false});
jQuery("#hc").click( function() { jQuery("#grid").jqGrid('hideCol',["continent"]); });
jQuery("#sc").click( function() { jQuery("#grid").jqGrid('showCol',["continent"]); });
});
</script>
I have tried to lookup in the jqgrid Wiki but still unable to figure out what's wrong. Is there a problem with the jsonReader? I have checked related questions but it didn't help much.
Instead of giving "jsondata" as a parameter to "data" for the jqgrid, give data : jsondata.invdata
In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help
Ext.define("MyApp.view.Main", {
extend: 'Ext.ux.slidenavigation.View',
requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],
config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
}
}]
},
/***************************************************************/
/* Want to replace this items array with dynamic call to store */
/***************************************************************/
items: [{
title: 'Item 1',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
},{
title: 'Item 2',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 2',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
}]
}
Store sample
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
json sample
[
{
"title": "Item 1",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
},
{
"title": "Item 2",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
}
]
Assuming your store is loading correctly, you can get a reference to it by calling
Ext.getStore('navStore')
or by assigning your store to a variable:
var yourStore = Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
To populate the items object I would put it in a container:
{
xtype: 'container',
id: 'container_id',
}
then
for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
var record = Ext.getStore('navStore').getAt(i);
var myComponent = Ext.create(...
//make the component you want to add with the data from the record
);
Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}