I want to draw a line chart with Chart.js, I followed the 'Getting started' section of Chart.js but I still am not able to draw even the example chart. What is wrong with my code? According to NetBeans it's all ok ..
Here's the code:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onLoad = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx).Line(data, options);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
Any help is more than welcome!
Link to the plug-in -> http://www.chartjs.org/docs/
Kind regards
Glenn
It's been I while since you asked this question. I hope you have found the answer. If not, I am attaching a sample code to generate a simple "Line chart" using Chart.js. If you run this code snippet you will get a line chart.
If any body else fumbled on getting this working, it might help them too. My reference point was chart.js offical page.
This the line where I give the path to Chart.js:
I hope this helps!
Thanks,
Kay
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script>
var ctx = document.getElementById("c").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var MyNewChart = new Chart(ctx).Line(data);
</script>
</body>
</html>
You need to place this line:
var myNewChart = new Chart(ctx).Line(data, options);
Beneath your declaration. Additionally, you're not defining your options so you need to also remove that from the call.
Completed, it should look like:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
According to the new version of chartjs, version 2.8.0.
official documentation
This is a working code example
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart"></canvas>
Related
I edited the existing tutorial and try to make a time series graph. I want to have a 24 hour format x axis. But when I add the xAxes property, the graph does not show up.
Link:
https://jsfiddle.net/cnpante/t54vk1fc/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ title }}</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
This is my xAxes property.
xAxes: [{
type: 'time',
time: {
format: 'HH:mm',
unit: 'hour',
unitStepSize: 1,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm',
min: '00:00',
max: '23:59'
}
}
}],
seems to work fine here,
see following working snippet.
looks like the chart.js library is not included in the fiddle.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["00:00", "01:25", "06:34", "15:21", "20:01", "22:00"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
format: 'HH:mm',
unit: 'hour',
unitStepSize: 1,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm',
min: '00:00',
max: '23:59'
}
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="600" height="300"></canvas>
I know this is a really dumb question but how to you install chartjs to use in a project ive looked at the documentation and it dosent say were or how to install it,i downloaded it from GitHub, I'm using xampp. thanks
If I understand correctly, you're looking to use ChartJS altogether. The package you download from Github includes a folder called Dist, which is where the distribution files are held.
Inside you'll find 4 files. Two are "bundles", which include Moment.JS used for time-scales. The other two don't. Finally, 2 are minified, the others aren't.
Basically, to "install" ChartJS, all you need to do is make sure it's getting referenced in your install. For the sake of simplicity, here's a CDN link of ChartJS v2.5:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
Include that in the header of your page and you can now use ChartJS.
All we have to do now is render a chart:
<canvas id="myChart" width="400" height="400"></canvas>
Finally, initiate the chart. Here's the example code from the start of the docs:
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Your page should now render a bar chart!
Check This
...
<script>
javascript
angular.module("app", ["chart.js"])
// Optional configuration
.config(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
chartColors: ['#FF5252', '#FF8A80'],
responsive: false
});
// Configure all line charts
ChartJsProvider.setOptions('line', {
showLines: false
});
}])
.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
// Simulate async data update
$timeout(function () {
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40]
];
}, 3000);
}]);
</script>
</html>
Type in angular CLI - npm install --save chart.js
npm i chart.js
For more information about Chart.js, Visit https://installmd.com/i/javascript/chart-js
I am using Chart.js in an EJS template and trying to display a partial date consisting of Year/month, e.g.: 2017/02 or 2017-02, but I can't find a way to display the string rather than the calculated value, e.g.: 1008.5 or 2015.
This displays as '2017/02' in a table in EJS:
<%= legend %>
But in my chart, I get 1008.5:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<%= labels %>],
datasets: [{
label: <%= legend %>,
data: [<%= visits %>],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
I've tried using <%- %>, as well as HTML entities for '/', but that doesn't help.
It is necessary to quote strings, e.g.:
label: '<%= legend %>',
I am trying to plot time of day chart using controlWrapper and Dashboard when i try to use ChartRangeFilter as controlType in controlWrapper options am not able to view the graph. If i use other visualization classes like CategoryFilter for controlType then everything is working fine.
Can anybody knows how to render the time of day with ChartRangeFilter?
here is the sample code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1.1', { 'packages': ['corechart', 'controls'] });
google.setOnLoadCallback(drawChart)
var dataTable = null;
var chartWrapper = null;
var controlWrapper = null;
var dashboard = null;
function drawChart() {
var data = {"cols": [
{"id": "Time", "label": "Time", "type": "timeofday"},
{"id": "Calls", "label": "Calls", "type": "number"}],
"rows": [
{"c": [{"v": [0, 10, 57]}, {"v": 45}]},
{"c": [{"v": [1, 9, 58]}, {"v": 23}]},
{"c": [{"v": [2, 10, 55]}, {"v": 12}]},
{"c": [{"v": [3, 0, 7]}, {"v": 23}]},
{"c": [{"v": [4, 10, 54]}, {"v": 12}]},
{"c": [{"v": [5, 35, 57]}, {"v": 56}]},
{"c": [{"v": [6, 29, 11]}, {"v": 234}]},
{"c": [{"v": [7, 11, 52]}, {"v": 34}]}]};
dataTable = new google.visualization.DataTable(data);
controlWrapper = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': { 'columns': [0, 0] },
'minRangeSize': 43200000
}
}
});
chartWrapper = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
"title":"Time of day calls",
"legend":{"position":"none","alignment":"start"},
"chartArea":{"height":"80%","width":"90%"},
"thickness":"1",
"displayExactValues":true,
"is3D":false
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(controlWrapper, chartWrapper);
dashboard.draw(dataTable);
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
PDF Outputs
I am new to DOJO charts and in one of the requirement, we have to convert Dojo Chart to PDF.
To achieve this we have used "JSPDF" and "html2canvas" libraries.
It is working fine in Google Chrome and not in IE11.
Kindly suggest.
Regards,
Byreddy
Here is my code....
PDF Test
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 600px; height: 400px; background-color:white;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:true, async:true"></script>
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend", "dojox/gfx/utils",
],
function (Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend, Utils) {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap: 6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle: "inside",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{ "value": 1, "text": "A" }, { "value": 2, "text": "B" }, { "value": 3, "text": "C" }, { "value": 4, "text": "D" }, { "value": 5, "text": "E" }, { "value": 6, "text": "F" }]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280],
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF",
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 0, 800, 300, 300], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
//proxy: "https://html2canvas.appspot.com/query",
//useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg");
pdf.addImage(canvas, 'JPEG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/62d219a0fac54b94cd4f230e7bfc55aa3f8dcfa4/FileSaver.js"></script>
<script src="JSRefs/html2canvas_0.5.0-alpha1.js"></script>
Here is the working sample, make a note of the listed important things in the code, which made the difference.
gfxRenderer: "canvas"
htmlLabels: false,
Below is the working code along with Tooltip functionality.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<script>
dojoConfig = {
parseOnLoad: true, // enables declarative chart creation
gfxRenderer: "canvas" // canvas is first priority
};
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="html2canvas.js"></script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
pdf.addImage(img, 'PNG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/gfx/utils",
"dojo/ready",
"dojo/domReady!"
], function (
Chart,
Lines,
Default,
StackedColumns,
Tooltip,
SelectableLegend,
Utils,
ready
) {
var chart1 = new Chart("chart1");
chart1.htmlLabels = false;
chart1.title = "Stacked Chart";
chart1.addPlot("stackedColumnsPlot", {
htmlLabels: false,
type: StackedColumns,
gap: 5,
lines: true,
areas: true,
markers: true,
labels: true,
labelOffset: -10,
labelStyle: "default",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" },
{ "value": 4, "text": "D" },
{ "value": 5, "text": "E" },
{ "value": 6, "text": "F" }
]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
// console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
</head>
<body class="claro">
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
</body>
</html>