I just discovered Chart.js and it looks amazing! So I tried to follow an example and it didn't work, saying that new Chart(ctx, options).Pie(data); was invalid (that (intermerdiate value).Pie(...) was not a function). Then I found that the syntax changed in Version 2 so I changed it to what you find below. I no longer get any errors but nothing is shown in my canvas.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/moment-2.10.6.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/test/Chart.js"></script>
<script src="js/test/chart-test.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
And the script:
$(document).ready(function () {
var data = [
{
value: 5,
color: "#44A9FF",
highlight: "#FF5A5E",
label: "N/A"
},
{
value: 79,
color: "#009900",
highlight: "#5AD3D1",
label: "On Track"
},
{
value: 31,
color: "#66FF33",
highlight: "#FFC870",
label: "Done"
},
{
value: 4,
color: "#F3F300",
highlight: "#FFC870",
label: "Issues"
},
{
value: 7,
color: "#FF0000",
highlight: "#FFC870",
label: "Behind"
},
{
value: 9,
color: "#979797",
highlight: "#FFC870",
label: "Abandoned"
}
];
var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
var ctx = $('#myChart').get(0).getContext('2d');
var myPieChart = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
});
Take a look at the fiddle - Pie chart with Chart.js
I made the following changes:-
var pieChartCanvas = $("#myChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
pieChart.Pie(data, options);
From the example you gave it looks like the syntax has changed too.
It should be
var myPieChart = new Chart(ctx).Pie(data);
Not
var myPieChart = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
Got that from the example found in the docs -> https://github.com/nnnick/Chart.js/blob/master/samples/pie.html
They also changed the data format in 2.0. If you checkout the sample here. You'll see the data is like this now:
data: {
datasets: [{
data: [
...
],
backgroundColor: [
...
]
}/* notice you can have more than one dataset, with pie they interlace when you have more than one */],
labels: [
...
]
}
Hope that helps.... also I needed to pull the v2.0-dev branch and build it myself to get past one bug that I found in the "released" version, so you may have better luck with that!
Related
Its all very new to me, so please bare with me, this is my first chart
id like a couple of changes
I want the values to appear on the top of the bars
and also need to change the color of the text on the axes, the months and min-max values
would appreciate if anyone can modify my code and send it back, I will play with the rgb colors later
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = ["Jun","Jul","Aug","Sep","Oct","Nov"];
var yValues = [12000,12000,13000,17000,15347,12475];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(245,161,0,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options: {
legend:
{display: false},
scales: {
yAxes: [{ticks: {min: 0, max:20000}}],
}
}
});
</script>
</body>
</html>
explained above in the upper box
Did anyone have the chance to work with the chartjs plugin - chartjs-plugin-crosshair? I'm having trouble after having zoomed in the datasets several times and when clicking the 'reset zoom' button I can only zoom out the last zoom in action, but I would like to return to the initial dataset before having initialized the zoom in action. Does anyone know how to tackle this problem?
Below is the code in jsfiddle:
https://jsfiddle.net/u0594jed/
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="">
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair#1.2.0></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['a','b','c','d','e','f','g','h','i','a','b','c','d','a', 'c','d', 'a'],
datasets: [{
label: '# of Votes',
data: [100,200,400,321,345,1234,456,5675,345,456,678,79,456,345,234,34,345],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
tooltip: {
mode: 'interpolate',
intersect: false
},
crosshair: {
line: {
color: '#F66', // crosshair line color
width: 1 // crosshair line width
},
sync: {
enabled: true, // enable trace line syncing with other charts
group: 1, // chart group
suppressTooltips: false // suppress tooltips when showing a synced tracer
},
zoom: {
enabled: true, // enable zooming
zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box
zoomboxBorderColor: '#48F', // border color of zoom box
zoomButtonText: 'Reset Zoom', // reset zoom button text
zoomButtonClass: 'reset-zoom', // reset zoom button class
},
callbacks: {
beforeZoom: () => function(start, end) { // called before zoom, return false to prevent zoom
return true;
},
afterZoom: () => function(start, end) {
// called after zoom
}
}
}
}
}
});
</script>
</body>
</html>
colleague:). Had the same problem... Found the answer into crosshair plugin src file: chartjs-plugin-crosshair.esm.js (line 477)
var filterDataset = (chart.config.options.scales.x.type !== 'category');
It means that you need to use another type of scale. I used type "time" - and voila, zoom fixed. Sample of code here
I am new to coding and am trying to make a barchart with eCharts. I have made a simple bar chart example but now I want to make a thick outline for the bars on the chart. This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
How do I add a thick black outline on the bars?
You can use the option barBorderColor and barBorderWidth to set the color and width of the border respectively for each bar.
Below is an example based on your existing code.
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
//Added item style
itemStyle: {
normal: {
barBorderWidth: 5,
barBorderColor: "#000"
}
}
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I'm trying to build a graph with chart.js and i would like to replace the labels with logtype small images.
Is it possible ? Can't find the way to do it.
Thanks.
This is my chart options:
var horizontalBarChartData3 = {
labels: ["mark1", "mark2", "mark3", "mark4","mark5"],
datasets: [
{
label: 'USA',
backgroundColor: "rgba(196,196,196,0.5)",
data: [0.07,0.02,0.26,0.68,0.21]
},
{
hidden: false,
label: 'EUROPA',
backgroundColor: "rgba(125,125,125,0.5)",
data: [0.09,0.02,0.31,0.74,0.23]
},
{
label: 'CHINA',
backgroundColor: "rgba(165,157,4,0.5)",
data: [0.15,0.02,0.38,0.99,0.27]
}]
};
Adding an image to the labels is a tricky adjustment, and will require fiddling with chart.js code, as it isn't natively supported. My best suggestion is to avoid attempts to add your images to the labels themselves.
Best solution for using icons would be one of:
Use images of your own, but place them around the chart in proper positions, and if needed, refer to em in labels.
Use an icon font to insert icons as characters of text. Here's an example using Font Awesome, using your data (based off of this fiddle):
var randomScalingFactor = function () {
return Math.round(Math.random() * 100);
};
var barChartData = {
pointLabelFontFamily: "'FontAwesome'",
labels: ["\uf000", "\uf001", "\uf002", "\uf003", "\uf004"],
datasets: [
{
label: 'USA',
backgroundColor: "rgba(196,196,196,0.5)",
data: [0.07,0.02,0.26,0.68,0.21]
},
{
hidden: false,
label: 'EUROPA',
backgroundColor: "rgba(125,125,125,0.5)",
data: [0.09,0.02,0.31,0.74,0.23]
},
{
label: 'CHINA',
backgroundColor: "rgba(165,157,4,0.5)",
data: [0.15,0.02,0.38,0.99,0.27]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true,
scaleFontFamily: "'FontAwesome'"
});
<script src="http://chartjs.org/assets/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div style="width: 75%">
<span style="font-family: FontAwesome"></span>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
Angular JS chart is awesome, But i need to implement click event in the piechart which i have created.. Here is the coding..
This is the JavaScript Coding...
$scope.pied = [{
value: 4,
color: "#FF5A5E",
highlight: "#FF5A5E",
label: "Prospective"
}, {
value: 0,
color: "#46BFBD",
highlight: "#46BFBD",
label: "Pending"
}, {
value: 0,
color: "#FDB45C",
highlight: "#FDB45C",
label: "CallBacks"
}, {
value: 4,
color: "#e6e6fa",
highlight: "#e6e6fa",
label: "FollowUp"
}, {
value: 1,
color: "#cc5229",
highlight: "#cc5229",
label: "Not Interested"
}, {
value: 0,
color: "#556b2f",
highlight: "#556b2f",
label: "Close"
}]
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Boolean - Whether we should animate the chart
animation: true,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Pie
animateRotate: true,
//Boolean - Whether we animate scaling the Pie from the centre
animateScale: false,
//Function - Will fire on animation completion.
onAnimationComplete: null
}
var ctx = document.getElementById("pieChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie($scope.pied, pieOptions);
ctx.onclick = function(evt){
var activePoints = myPieChart.getPointsAtEvent(evt);
console.log("active: "+activePoints);
// => activePoints is an array of points on the canvas that are at the same position as the click event.
};
document.getElementById('js-legend').innerHTML = myPieChart.generateLegend();
This is the HTML Coding..
<canvas id="pieChart" width="440" height="200" ></canvas>
<div id="js-legend" class="chart-legend"></div>
This is the image of the above program.. i have wrote coding that when i click on The FollowUP it must the datas related to it.. But the click event is not working..??
Please see to the above code and picture and guide me to get the exact output what i expect. Thanks in advance guys...
I have Used angular-chart.js instead this chart.js Angular JS Documentation is here . Angular Chart is little bit easy than chart.js..
Thanks for the support guys.. :)