I just can't figure out why is there allways at least one category missing from my chart:
This does not happen when I switch chart type to type:'pie'.
Please find my code below:
<!DOCTYPE html>
<html>
<body>
<div style="width: 40%;">
<canvas id="polarAreaChart " width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("polarAreaChart ");
var polarAreaChart = new Chart(ctx, {
type: 'polarArea',
options: {
legend: {
display: true,
position: 'bottom',
}
},
data: {
labels: ["D1","D2","D3"],
datasets: [{
label: 'Dimensiones',
data: [40, 20, 40],
backgroundColor: [
"#f8b195",
"#c06c84",
"#6c5b7b"
]
}]
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
</body>
</html>
Any comments will help.
Cheers!
Apparently it was just a bug.
Solved it by using a more recent version of Chartjs:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js
Related
I'm having a hard time creating my first plugin for chart.js
After watching a few tutorials, I made the code below expecting to get "chart" in the console but nothing happens.
What am I missing here?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.1.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#2.1.1/dist/chartjs-plugin-annotation.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
const tooltipNote = {
id: 'tooltipNote',
beforeDraw: chart => {
console.log('chart');
}
}
new Chart(ctx, {
type: 'line',
responsive: true,
data: {
labels: ['', '', '', '', '', ''],
datasets: [{
data: [42, 119, 53, 55, 62, 53],
}]
},
options: {
scales: {
y: {
suggestedMin: 0,
offset: true
},
},
plugins: {
legend: {
display: false
},
tooltipNote: {
},
},
},
});
</script>
</body>
</html>
You never register your plugin as documented here: https://www.chartjs.org/docs/latest/developers/plugins.html
You can either only register it specific chart instances like so:
const tooltipNote = {
id: 'tooltipNote',
beforeDraw: chart => {
console.log('chart');
}
};
new Chart(ctx, {
data: data,
options: options,
plugins: [tooltip note]
});
Or you can register it globally so it is available to all your instances:
const tooltipNote = {
id: 'tooltipNote',
beforeDraw: chart => {
console.log('chart');
}
}
Chart.register(tooltipNote);
What you did was only define the options as an empty object for your plugin.
I'm trying to adapt https://www.chartjs.org/docs/latest/samples/bar/floating.html to create a kind of timeline chart, where the horizontal axis (the range data) are timestamps. Unfortunately I can't seem to get the data to display, and don't see any error messages, etc.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#^1"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
</body>
<script>
//const labels = ["a","b","c","d","fff","g","h"]
const labels = ["a","b"]
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: [[moment("2021-11-23T00:24:14Z"),moment("2021-11-23T00:34:03Z")],
[moment("2021-11-23T00:24:14Z"),moment("2021-11-23T00:26:35Z")]]
// This works fine (without 'yAxes' below):
//data: labels.map(() => {
//return [Math.random(), Math.random()];
//}),
//backgroundColor: Utils.CHART_COLORS.red,
},
]
};
const config = {
type: 'bar',
data: data,
options: {
yAxes: [{
type: 'time',
}],
indexAxis: 'y',
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Floating Bar Chart'
}
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
</html>
EDIT: JSFiddle: https://jsfiddle.net/r5ypuvks/
Mmm it seems my issues are:
not using proper axis format for chart.js 3
need to scale the graph myself
need to refer to horizontal axis as x
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#^1"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
</body>
<script>
//const labels = ["a","b","c","d","fff","g","h"]
const labels = ["a","b"]
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: [[("2021-11-23T00:24:14Z"),("2021-11-23T00:34:03Z")],
[("2021-11-23T00:25:14Z"),("2021-11-23T00:26:35Z")]]
// This works fine (without 'yAxes' below):
//data: labels.map(() => {
//return [Math.random(), Math.random()];
//}),
//backgroundColor: Utils.CHART_COLORS.red,
},
]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
x: {
min: ("2021-11-23T00:20:14Z"),
max: ("2021-11-23T00:44:14Z") ,
type: 'time',
},
},
indexAxis: 'y',
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Floating Bar Chart'
}
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
</html>
I am using the canvasjs for plotting the column chart. I am using the code from this link https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/column/oil_reserves/, the code is below:
<!DOCTYPE HTML>
<html>
<head>
<title>Basic HTML5 Column Chart </title>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Oil Reserves"
},
animationEnabled: true,
axisY: {
title: "Reserves(MMbbl)"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{y: 297571, label: "Venezuela"},
{y: 267017, label: "Saudi" },
{y: 175200, label: "Canada"},
{y: 154580, label: "Iran"},
{y: 116000, label: "Russia"},
{y: 97800, label: "UAE"},
{y: 20682, label: "US"},
{y: 20350, label: "China"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
Now I want to use a text file generated from python instead of the default values in the dataPoints. The test file data looks like a dictionary data separated by comma. Here is a sample of the text file data:
{'DNS_SERVER1': 2.768651, 'FTP_SERVER1': 2.488129, 'AUTHENTICATION_SERVER1': 2.768651, 'WAP_SERVER1': 2.768651, 'WEB_SERVER1': 2.768651, 'EMAIL_SERVER1': 2.768651}
I want the labels to be first part before semicolon like 'DNS_SERVER1' and the value y to be equal to 2nd part of the semicolon like 2.768651. How Can I do this using the canvasjs script? Any help is appreciated.
Thanks.
You must have to read the file to two separate datasets (LABELS and DATA) and insert them like this:
data = {
labels: ["DNS_SERVER", "FTP_SERVER", "AUTH_SERVER"],
datasets: [{
label: 'Performance',
data: [2.768651, 2.488129, 2.768651]
}]
};
Above is a nominal way.
You can change "labels:" dataset and "data:" dataset for your loaded data.
I'm new here, referred by a friend. I'm working with Google Charts, connecting to a Google sheet. I've got the chart working fine. The next step is adding a toolbar to the bottom of it. BUT, I cannot get the code to work, no matter what. I've even tried copying and pasting Google's example code into a blank page just to test, but I can't even get their example to show. Is there something missing from the documentation that's preventing this?
Here's my code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- datasheet link https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/edit?usp=sharing
https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/pubhtml
-->
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawAll() {drawChart(); drawToolbar();}
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'titleTextStyle': {fontSize: '24', color: 'teal'},
//'width':800,
'height':600,
hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
legend: {'position': 'top'},
series: {
0: {pointsVisible: true, color: 'orange'},
1: {pointsVisible: true, color: 'blue'},
2: {pointsVisible: true, color: 'black'},
3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
//chart.draw(data, options);
function drawToolbar() {
var components = [
{type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};
google.charts.setOnLoadCallback(drawAll);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="toolbar_div"></div>
</body>
</html>
Seems to work here, with a couple minor adjustments.
Typically, setOnLoadCallback should only be called once per page.
Which was most likely the problem.
Here, I have defined the callback in the load statement.
// Load the Visualization API and the piechart package.
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'titleTextStyle': {fontSize: '24', color: 'teal'},
//'width':800,
'height':600,
hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
legend: {'position': 'top'},
series: {
0: {pointsVisible: true, color: 'orange'},
1: {pointsVisible: true, color: 'blue'},
2: {pointsVisible: true, color: 'black'},
3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var components = [
{type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="toolbar_div"></div>
<div id="chart_div"></div>
In order to create horizontal bar charts using Chart.js I added Chart.HorizontalBar.js to my project. The problem is that bars are drawn from top to down in descending order and I need exactly the opposite.
Does anyone has an idea on how to change the order? I spend hours researching but I could not find any solution.
Thank you
drawn from top to down in descending order
<!doctype html>
<html>
<head>
<title>Horizontal Bar Chart</title>
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script src="../Chart.HorizontalBar.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="canvas" class="chart-base" chart-type="type"
chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>
</div>
<script>
var barChartData = {
labels : ["Facebook Inc Class A","Amazon.com Inc","Allergan PLC"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [9,8,7]
}
]
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).HorizontalBar(barChartData, {
responsive: true,
barShowStroke: false,
scaleBeginAtZero: true
//scaleLabel: "<%=label%>"
});
};
</script>
</body>
</html>
Just swap the order in the input i.e.
var barChartData = {
labels: ["Allergan PLC", "Amazon.com Inc", "Facebook Inc Class A"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [7, 8, 9]
}]
};