I am trying to get this piechart working.
Here is my code to draw simple piechart
<html ng-app="chartApp">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<!-- angular -->
<script type="text/javascript" src="https://code.angularjs.org/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<!-- fusioncharts core -->
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>
<!-- angular plugin -->
<script type="text/javascript" src="js/angular-fusioncharts.min.js"></script>
<!-- zune theme -->
<script type="text/javascript" src="js/zune-theme.js"></script>
<script type="text/javascript">
var pieChart = angular.module("pieChart", ["ng-fusioncharts"]);
// controller for chart
pieChart.controller("chartController", function($scope) {
$scope.myDataSource = {
chart: {
caption: "Age profile of website visitors",
subcaption: "Last Year",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data: [
{
label: "Teenage",
value: "1250400"
},
{
label: "Adult",
value: "1463300"
},
{
label: "Mid-age",
value: "1050700"
},
{
label: "Senior",
value: "491000"
}
]
}});
</script>
</head>
<body>
<center>
<div ng-controller="chartController">
<fusioncharts
width="600"
height="400"
type="pie3d"
datasource="{{myDataSource}}"
></fusioncharts>
</div>
</center>
</body>
</html>
I get this error
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=chartApp&p1=Error%3…0zc%20(https%3A%2F%2Fcode.angularjs.org%2F1.4.1%2Fangular.min.js%3A20%3A30)
Your angular.module is set to "pieChart", but your ng-app directive is set to chartApp (this directive should be put on body instead of html also)... so Angular has no idea what to bootstrap. Try using angular.module("chartApp", ...) and putting ng-app directive on your 'body' tag.
Related
Post edited with more infos. I have a .asp page that gives me 3 variables. I have no problem working with them. I tried to add a donut chart to show the result using AMCHART charts code. I added the code into my .asp page. The problem is how to add those variables inside the JS code. When I type the variable values directly in the code, the charts are displayed correclty. But I need to add the variable because each customer has its own values...
Code:
<!DOCTYPE html>
<html>
<head>
<title>pie-chart test | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts custom font -->
<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
VAR TOTAL_IPCA;
<!-- HERE IS THE PROBLEM !!! -->
DATA1 = [
{
"TITULOS": "INFLAÇÃO",
"VALORES": <% = Result_1%>
},
{
"TITULOS": "PRÉ-FIXADO",
"VALORES": <% = Result_2%>
},
{
"TITULOS": "SELIC",
"VALORES": <% = Result_3%>
}
]
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 10,
"gradientType": "linear",
"innerRadius": 20,
"baseColor": "#FF8000",
"outlineThickness": 2,
"startEffect": "easeOutSine",
"titleField": "TITULOS",
"valueField": "VALORES",
"fontFamily": "ARIAL",
"fontSize": 15,
"handDrawScatter": 1,
"handDrawThickness": 2,
"theme": "chalk",
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": DATA1
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 300; background-color: #282828;" ></div>
</body>
</html>
I'm trying to create a chart and then change it to another with different data when I click a button but can't seem to get it to work. I'm using hardcoded data, here's my controller's function's code:
$scope.generateChart = function(chart){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
"type": "line",
"data": {
"labels": ['Name','Name','Name','Name','Name','Name','Name','Name','Name','Name'],
"datasets": [{
"label": 'Label1',
"data": [30,30,30,30,30,30,30,30,30,30],
"fill": true,
"borderColor": "rgb(0,0, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
};
And here's my template:
chart.html
<canvas id="myChart"></canvas>
<div id="buttons">
<button
ng-repeat="(key,result) in results[0]"
ng-hide="key === 'email' || key === 'country'"
ng-click="generateChart(key);">
{{key}}
</button>
</div>
results.html
<!DOCTYPE HTML>
<html>
<head></head>
<body ng-app="jellybeans">
<results></results>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- build:js -->
<script type="text/javascript" src="js/all.js"></script>
<!-- endbuild -->
</body>
</html>
Is there any way to do so?
HTMl
<!DOCTYPE html>
<html ng-app="scheduleApp">
<head>
<title>AngularJs Schedule</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/angular.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/firebase.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<div class="page-header text-center">
<h1>Schedule City</h1>
</div>
<div class="row times">
<div class="col-xs-4 text-center">
<h2>{{day.name}}</h2>
<div class="time-slot" ng-repeat="slot in day.slots">
</div>
JavaScript
angular.module('scheduleApp',['firebase'])
.controller('mainController', function($scope){
var ref = new Firebase("https://torrid-inferno-884.firebaseIO.com/days");
var fb = $firebase(ref);
var syncObject = fb.$asObject();
syncObject.$bindTo($scope,'days');
$scope.reset = function() {
fb.$set({
monday: {
name: 'Monday',
slots: {
0900: {
time: '9:00am',
booked: false
},
0110: {
time: '11:00am',
booked: false
}
}
},
tuesday: {
name: 'Tuesday',
slots: {
0900: {
time: '9:00am',
booked: false
},
0110: {
time: '11:00am',
booked: false
}
}
}
});
};
});
Error: [$injector:nomod] Module 'scheduleApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Basically you messed up with the file loading sequence. firebasejs should be there before angularfire.min.js as it uses firebase.js code internally.
<script src="js/angular.js"></script>
<script src="js/firebase.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/otherscripts.js"></script>
Update
Inject $firebase dependency in your controller function
.controller('mainController', function($scope, $firebase){
I'm trying to render a kendodropdownlist like this example: http://dojo.telerik.com/IJEGo, but it displays the items on a mobile like a actionsheet, no like a dropdownlist. (See my screen link at the end)
This is my index.html header:
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/Controlador.js"></script>
<script src="scripts/Facturas.js"></script> </head>
My view:
<div data-role="view" data-title="home" data-layout="main" data-model="APP.models.home">
<h1 data-bind="html: title" style="color:white;"></h1>
</br>
<!-- <input id="near-km2" />-->
<select id="near-km2" class=".k-dropdown">
<script>
var kmData = [{
text: "5km",
value: "5"
}, {
text: "10km",
value: "10"
},
{
text: "25km",
value: "25"
},
{
text: "50km",
value: "50"
}];
$("#near-km2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: kmData,
index: 1
});
</script>
</div>
What is wrong with my code ??
my screen: http://s28.postimg.org/m60mm7t25/Capture1.jpg
I will appreciate your help.
I am trying to create a pie chart using wijmo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Data Source</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="%description%" />
<meta name="keywords" content="" />
<meta name="author" content="ComponentOne" />
<link href="../Scripts/Wijmo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/Wijmo/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/raphael-min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/globalize.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijchartcore.js"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijpiechart.js"></script>
<style type="text/css">
#wijpiechart
{
width: 756px;
height: 475px;
}
</style>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
debugger;
var data = [{
Device: 'MacBook Pro',
Percent: 46.78,
Offset: 15
}, {
Device: 'iMac',
Percent: 23.18
}, {
Device: 'MacBook',
Percent: 20.25
}, {
Device: 'Mac Pro',
Percent: 5.41
}, {
Device: 'Mac mini',
Percent: 3.44
}];
$('#wijpiechart').wijpiechart({
dataSource: data,
data: {
label: { bind: "Device" },
value: { bind: "Percent" },
offset: { bind: "Offset" }
},
radius: 140,
legend: { visible: true },
hint: {
content: function () {
return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
}
},
header: {
text: "Steam - Mac Hardware"
}
});
});
</script>
</head>
<body class="demo-single">
<div class="container">
<div class="header">
<h2>
DataSource</h2>
</div>
<div class="main demo">
<!-- Begin demo markup -->
<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
</div>
<!-- End demo markup -->
<div class="demo-options">
<!-- Begin options markup -->
<!-- End options markup -->
</div>
</div>
<div class="footer demo-description">
<p>
This sample shows how to create a pie chart using an array as the data source for
the chart.</p>
</div>
</div>
</body>
</html>
I am getting an object reference error ///
Microsoft JScript runtime error: Object doesn't support this property or method
You should either refer the complete js files that are available at this link:
http://wijmo.com/downloads/
or you can use AMD modules and can refer to the following link:
http://wijmo.com/docs/wijmo/#AMDwithRequireJs.html