i try puting some values in my charts from my homepage components and my question
for now i want show in charts the values records
this my code from records to my chats
import { Component, OnInit } from '@angular/core';
declare var $: any;
declare var Index: any;
declare var Charts: any;
@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
records=[
{
codprodut:'1',
descricao:'Peras',
quantidade:'200',
preco:'200€'
},
{
codprodut:'2',
descricao:'Maças',
quantidade:'20',
preco:'10€'
},
{
codprodut:'3',
descricao:'Merda',
quantidade:'20',
preco:'5€'
},
]
constructor() { }
ngOnInit() {
$(document).ready(function() {
Charts.init();
Index.init();
});
}
}
chart.js code
var Charts = function() {"use strict";
var doughnutChartHandler = function() {
var data = [{
value: 300,
color: '#F7464A',
highlight: '#FF5A5E',
label: 'Red'
}, {
value: 50,
color: '#46BFBD',
highlight: '#5AD3D1',
label: 'Green'
}, {
value: 100,
color: '#FDB45C',
highlight: '#FFC870',
label: 'Yellow'
}];
// Chart.js Options
var options = {
// Sets the chart to be responsive
responsive: false,
//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>'
};
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#doughnutChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var doughnutChart = new Chart(ctx).Doughnut(data, options);
//generate the legend
var legend = doughnutChart.generateLegend();
//and append it to your page somewhere
$('#doughnutLegend').append(legend);
};
return {
//main function to initiate template pages
init: function() {
doughnutChartHandler();
}
};
}();