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.
Related
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/
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?
I am currently in a berlin start up hustleing to get our website up and running and I get by with HTML AND CSS but a big noob when it comes down to Jquery. Anyway I came across Chart.js and would love to visualize our company success by means of a polar area chart. Yet I want to remove the legend and the grey grid/lines in the background.
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
I dont know how to get the options going to get rid off the background grids/numbers. Does anyone know the command to remove the grids in the background?
Would appreciate your help and probs name my 2nd born after you :)
Love from Berlin,
A
You can simple toggle the display of legend and also the scale, on Graph.js you can pass a options element.
options: {
legend: {
display: false
},
scale: {
display: false
}
}
Check the updated snippet below:
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
},
options: {
legend: {
display: false
},
scale: {
display: false
}
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Maybe you just forgot the "
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
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>