Jump to content
  • Advertisement
Sign in to follow this  
Pedro Alves

puting data from my charts

Recommended Posts

Posted (edited)

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();
		}
	};
}();

 

Edited by Pedro Alves

Share this post


Link to post
Share on other sites
Advertisement

i have to create  new post becouse i can´t edit the first

the problem is the following I created a graph and now I want to search for data but I can only if i put statict data but i want put with dinamy data I am using angular 7, nodejs and mongodb what i doing wrong how i convert my chart with static data to dinamic data this is my code

 

let TotalSell = function() {
 var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    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, 84, 64, 120, 132, 87]
    }]
 };
    legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
 };

 var ctx = $("#TotalSell").get(0).getContext("2d");

 var chart1 = new Chart(ctx).Line(data, options);

 var legend = chart1.generateLegend();
 $('#TotalSellLegend').append(legend);
};

<div class="col-sm-6">
   <h5 class="over-title margin-bottom-15" style="text-align:center;">Total Sell</h5>
        <canvas id="TotalSell" class="full-width"></canvas>
        <div class="margin-top-20">
          <div class="inline pull-left">
            <div id="TotalSellLegend" class="chart-legend"></div>
          </div>
        </div>
      </div>

 

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!