I'm trying to imply morris.js but I get the following error:
I tried to implement seeing some tutorials, it really is very easy but so far I get the following
new Morris.Line({
element: 'myfirstchart',
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
xkey: 'year',
ykeys: ['value'],
labels: ['Value']
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="~/js/morris.css">
<script src="~/js/sweetalert.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h2>Costos por proyecto</h2>
<hr>
<div class="col-lg-6">
<h2>Costos</h2>
<hr>
<div id="myfirstchart"></div>
</div>
<div class="col-lg-6">
</div>
</div>
<script src="~/js/graficas.js" charset="utf-8"></script>
</body>
</html>
I get the following error:
Uncaught ReferenceError: Morris is not defined
you forgot to add one script line:
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
see getting started: https://morrisjs.github.io/morris.js/
Related
The following code is supposed to create a new bar chart but I'm getting an "Uncaught TypeError: Cannot set property 'data' of undefined" which points to the first line (var chart = new Chart etc)
var chart = new Chart(document.getElementById("chart1"), {
type: 'bar',
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [{
label: "Num incidents",
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [89,57,25,28]
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
I have a html file with the following:
<head>
<meta charset="utf-8"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
</head>
<div class="column">
<canvas id="chart1"></canvas>
</div>
Do i need to include the chartjs api in the js file as well?
Or do i need to call the chart somewhere in my js file?
Works for me. It must be just the order.
Try this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" type="application/javascript"></script>
</head>
<body>
<div class="column">
<canvas id="chart1"></canvas>
</div>
<script type="application/javascript">
var chart = new Chart(document.getElementById("chart1"), {
type: 'bar',
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [{
label: "Num incidents",
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [89,57,25,28]
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
Or play here: https://jsfiddle.net/2d9kfegj/2/
Inside your html file:
<script src="myJavascript.js"> </script>
The problem is that you don't include your js file in your html. Make sure you include your js file at the end of your html like:
<head>
<meta charset="utf-8"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
</head>
<div class="column">
<canvas id="chart1"></canvas>
</div>
<script src="myJavascript.js"></script>
After that it will work just fine. You need to load your page first so your JS knows where to put the chart that is created.
In jquery you can use document.ready function but since you don't have a jquery tag i will avoid to mention to put a listener for page ready and suggest to just put it in the end for your ease.
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.
component
import {Component} from '#angular/core';
#Component({
selector: 'cad',
templateUrl: './cad.html'
})
export class cadcomponent {
}
cad.html
<div class="row">
<div class="col-md-12">
<div class="thumbnail alert-info alert alert-dismissible fade in">
<p class="lead text-center"> Our Dynamic KPI</p>
</div>
</div>
</div>
<script src="scripts/cad.js"></script>
<div id="container1" class="chart"></div>
cad.js
$.get('scripts/dataCAD.csv', function(csv) {
$('#container1').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'CAD'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
and my index.html
<html>
<head>
<link rel="icon" href="Resources/favicon.ico">
<base href="/">
<title>IT Status</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="center.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/highcharts.js"></script>
<script src="scripts/highchartsdatamodule.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>System.import('app').catch(function(err){ console.error(err); });</script>
<script src="scripts/cad.js" type="text/javascript"></script>
<script src="scripts/market.js" type="text/javascript"></script>
<script src="scripts/system.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="bootstrap-3.3.6-dist/js/vendor/jquery.min.js"><\/script>')</script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/speed.js"></script>
<script src="scripts/nickcodestatus.js"></script>
<script src="scripts/nickworkingon.js"></script>
<script src="scripts/seamuscodestatus.js"></script>
<script src="scripts/seamusworkingon.js"></script>
<script src="scripts/mikecodestatus.js"></script>
<script src="scripts/mikeworkingon.js"></script>
<script src="scripts/justincodestatus.js"></script>
<script src="scripts/justinworkingon.js"></script>
<script src="scripts/tonycodestatus.js"></script>
<script src="scripts/tonyworkingon.js"></script>
<script src="scripts/kevincodestatus.js"></script>
<script src="scripts/kevinworkingon.js"></script>
<script data-main="scripts/main.js" src="scripts/require.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
so i have googled the error and i am taken to this page http://www.highcharts.com/errors/16
I am just confused as to what i am doing wrong I do not see two calls to the high charts module. I have changed the container names to not all be the same as i saw in this post on stack overflow Highcharts Error #16: charts not showing on the same page . If anyone could help me i would be very appreciative. I am almost done with the website this is my last problem that inst loading.
updated component
import {Component} from '#angular/core';
#Component({
selector: 'cad',
template: `
<div class="row">
<div class="col-md-12">
<div class="thumbnail alert-info alert alert-dismissible fade in">
<p class="lead text-center"> Our Dynamic KPI</p>
</div>
</div>
</div>
<pre id="csv" style="display:none">Month,Current,Previous
JAN,100,100
FEB,100,100
MAR,100,100
APR,100,100
MAY,100,100
JUN,100,100
JUL,100,100
AUG,100,100
SEPT,100,100
OCT,100,100
NOV,,100
DEC,,100</pre>
<chart [options]="options"></chart>
`
})
export class cadcomponent {
constructor() {
this.options = {
chart: {
type: 'column',
},
title: {
text: 'CAD'
},
subtitle: {
text: 'Uptime % for CAD'
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC']
},
series: [{
name: "Current",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
},
{
name: "Previous",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
}]
};
}
options: Object;
}
I am trying to plot historical flot chart between two custom date range, user will select date range and based on selection I will retrieve data from my database and going to plot flot chart. Retrieving data from database based on selection is completed but plotting that data in flot chart is not resulting result. Below is my code I am trying to plot
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), [data], {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), data, {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="height:300px;"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
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