I am using PhoneGap to build a mobile app and one of the pages needs to display a chart and I am using Chart.js. I am using the following code but the chart doesn't appear and gives me an empty display for the page. The alert shows when I go to my chart page.
Is there any issues with displaying charts for PhoneGap applications for chart.js?
index.html
<article>
<canvas id="myChart" width="400" height="400"></canvas>
</article>
<script src="js/Charts/Chart.min.js"></script>
<script src="js/chartScript.js"></script>
chartScript.js
$(document).on("pageinit", "#chart", function () {
alert("Able to enter");
var pieData = [
{
value: 25,
label: 'Java',
labelColor: 'black',
color: '#811BD6'
},
{
value: 10,
label: 'Scala',
color: '#9CBABA'
},
{
value: 30,
label: 'PHP',
color: '#D18177'
},
{
value: 35,
label: 'HTML',
color: '#6AE128'
}
];
var context = document.getElementById('myChart').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);
});
Related
There is a thread with many answers on this topic (Show values on top of bars in chart.js), but it's all about version 2.x
getDatasetMeta() has been deprecated:
https://www.chartjs.org/docs/3.0.2/getting-started/v3-migration.html
The "datalabels" plugin has not been ported to 3.x:
https://github.com/chartjs/chartjs-plugin-datalabels
Have you found any working solutions? How can data values be displayed on top of vertical barcharts (or next to horizontal barcharts)?
You can use the beta of the datalabels plugin.
Documentation: https://v2_0_0-rc_1--chartjs-plugin-datalabels.netlify.app/
Script tag: <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script>
Install command: npm i chartjs-plugin-datalabels#next
Live example:
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels); // first way of registering the plugin, registers them for all your charts
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataLabels], // second way of registering plugin, register plugin for only this chart
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
responsive: false,
plugins: {
datalabels: {
anchor: 'end', // remove this line to get label in middle of the bar
align: 'end',
formatter: (val) => (`${val}%`),
labels: {
value: {
color: 'blue'
}
}
}
}
}
});
</script>
This is my code format:How can I load data from angular scope object.
static data is working fine.But getting from scope object is displays nothing.
var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.init = function(){
$scope.loadData()
var ctx = document.getElementById('mycanvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["EL", "AL", "PL", "CL"],
datasets: [{
backgroundColor: ['green', 'red', 'pink', 'blue'],
data: $scope.datas,
}]
},
options: {
legend: {
position: 'right',
labels: {
boxWidth: 12
}
},
tooltips: { bodyFontSize: 12 }
}
});
}
$scope.loadData = function(){
$scope.datas=[
{
'EL':2
},
{
'AL':2
},
{
'PL':2
},
{
'CL':2
}
]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<canvas id="mycanvas"></canvas>
</div>
How can I load data from angular scope object for chart.
You almost did it right!
The point here is your data format.
You can't pass objects like this.
$scope.requestedLeaveTypeCount=[{'EL': 2}, {'AL': 2}, {'PL': 2}, {'CL': 2}];
This kind of data format is working.
$scope.requestedLeaveTypeCount=[2,2,2,2]
DEMO
I am trying to test pie chart using chart.js . I get 'cannot read property of 'length' and 'initialize' in chart.js file. I tried all options and cant find the where the problem is.
code in jsfiddle
https://jsfiddle.net/n8ox2fqb/1/
pieChart.js file has following code.
var pieData = [
{
value: '25',
label: 'Java',
color: '#811BD6'
},
{
value: '10',
label: 'Scala',
color: '#9CBABA'
},
{
value: '30',
label: 'PHP',
color: '#D18177'
},
{
value : '35',
label: 'HTML',
color: '#6AE128'
}
]
var pieOptions = {};
$(document).ready(function() {
var ctxt = document.getElementById('myChart');
var myPieChart = new Chart(ctxt,{
type: 'pie',
data: pieData,
options: pieOptions
});
});
Html code
<html lang="en">
<head>
<script src="src/jquery.min.js"></script>
<script src="src/Chart.js"></script>
</head>
<Title>
Test Pie Chart
</Title>
<body>
<div>
<div>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
<script src="pieChart.js"></script>
</body>
</html>
Off the top of my head I am going to say there is one obvious problem to me and that is the line
var ctxt = document.getElementById('myChart');
You want
var ctxt = document.getElementById('myChart').getContext('2d');
You may also be feeding the chart data in the wrong format. The 'data' property in your chart config object has a property called 'datasets' which is an array of objects. Check out their docs here
I have been trying to create a pie chart. I saw there were many different libraries and I have tried Chart.js since it seems to be one of the preferred ones. I am not determined to keep using this library so I am open to any other solution to my problem.
I have two main problems:
Loading an image to a section.
Making the segments clickable so that a div appears according to the selected section.
This is my HTML
<body>
<canvas id="mycanvas"></canvas>
</body>
This is my JS
<script>
$(document).ready(function(){
var ctx = $("#mycanvas").get(0).getContext("2d");
var data = [
{
value: 51,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Corn Flower Blue"
},
{
value: 51,
color: "lightgreen",
highlight: "yellowgreen",
label: "Lightgreen"
},
{
value: 51,
color: "orange",
highlight: "darkorange",
label: "Orange"
},
{
value: 51,
color: "beige",
highlight: "bisque",
label: "Beige"
},
{
value: 51,
color: "aliceblue",
highlight: "cadetblue",
label: "AliceBlue"
},
{
value: 51,
color: "brown",
highlight: "chocolate",
label: "Brown"
},
{
value: 51,
color: "darkviolet",
highlight: "deeppink",
label: "DarkViolet"
}
];
var piechart = new Chart(ctx).Pie(data);
});
</script>
Is there any way I can just give a backgroundImage to each segment? Like going through each one of them and adding the attribute while also assigning a click event?
Thank you.
If you are open to commercial charting libraries, you may consider ChartDirector. It can load images into section labels and the labels can be put on the sections. It can also use images as a "wallpaper" to fill the sections. The sections can also be responded to mouse events (such as mouse clicked). Some example images are:
ChartDirector runs on the server side and supports multiple programming languages. For your reference, the code for the above charts in the ASP.NET framework in C#/VB are at:
VB / C# Icon Pie Chart
VB / C# Texture Donut Chart
I want to know how I would be able to show Labels on the doughnut chart and the legend, I'm using chart.js as plugin
I used scaleShowLabels: true but It doesn't work
here is my code :
var data = [{
value: 30,
color: "#F7464A",
label: "Yasser"
}, {
value: 50,
color: "#E2EAE9",
label: "Zeyd"
}, {
value: 100,
color: "#D4CCC5",
label: "Mouad"
}, {
value: 40,
color: "#949FB1",
label: "Hanine"
}, {
value: 120,
color: "#4D5360",
label: "Kheira"
}
]
var options = {
animation: false,
scaleShowLabels: true
};
//Get the context of the canvas element we want to select
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");
/*************************************************************************/
myNewChart = new Chart(ct).Doughnut(data, options);
DEMO + CODE
I found all the solutions of the Chart js main problems,
it's about an edited js file, which has all code samples, you can find more information about it here :
https://github.com/FVANCOP/ChartNew.js