0

Es posible tener en una misma página dos gráficos con la librería angular chart js? por ejemplo uno de linea y todo de barras. Es que lo estoy intentando pero solo me muestra datos del primero, el segundo gráfico queda totalmente blanco, es como si no obtuviera las clases correspondientes de esta librería.

<div ng-app="app1">
<div id="container" class="container">
<div class="row" ng-controller="LineCtrl">

angular.module("app1", ["chart.js"]).controller("LineCtrl", function ($scope) {

<div ng-app="app">
<div id="container" class="container">
<div class="row" ng-controller="BarCtrl">

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {

Y estas son las librería que uso:

<script src="angular/angular.min.js"></script>
<script src="angular/Chart.min.js"></script>
<script src="angular/angular-chart.min.js"></script>
<script src="angular/angular-chart.js"></script>
<script src="graficos.js"></script>

1 respuesta 1

1

si quieres podrías usar para gráficos esta biblioteca llamada ChartJS, que a mi particularmente no me da problemas como las demás, http://www.chartjs.org/, aquí un código de ejemplo trabajado en conjunto con laravel 5.2

@extends('app')
@section('content')
<div id="containet-fluid">
    <a href="{{url('reportes/pedidos')}}" class="btn btn-default" role="button" target="_blank">Visualizar Pedidos</a>
    <canvas id="mycanvas" width="0" height="0"></canvas>
    <script src="{{url('/js/jquery-2.1.4.min.js')}}"></script>
    <script src="{{url('/js/Chart.js')}}"></script>
    <script src="../js/Chart.min.js"></script>
        @if(sizeof($lineas) > 0)
        @foreach($lineas as $index => $linea)
            <h3>Nombre {{$linea->nombre}}</h3>
            <p>id libro {{$linea->idlibro}}</p>
            <p>Cantidad {{$linea->cantidad}}</p>
        @endforeach
        @endif
        <canvas id="chart-area" width="256" height="256"></canvas>
</div>
    <script>
        var colores= ["orange","green","red","black","blue"];
        var contador=0;
//        var pieData = [
//            {
//                value:40,
//                color:"orange",
//                highlight: "red",
//                label: "Primer dato"
//            },
//            {
//                value:60,
//                color:"#0b82e7",
//                highlight: "red",
//                label: "Segundo dato"
//            }
//        ];
        var pieData = [
                @if(sizeof($lineas) > 0)
                @foreach($lineas as $index => $linea)
                    {
                    value:{{$linea->cantidad}},
                    color:colores[contador++],
                    highlight: "red",
                    label: '{{$linea->nombre}}'
                    },
                @endforeach
                @else
                {
                    value:40,
                    color:"orange",
                    highlight: "red",
                    label: "Primer dato"
                },
                {
                    value:60,
                    color:"#0b82e7",
                    highlight: "red",
                    label: "Segundo dato"
                }
                @endif
        ];
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx).Pie(pieData); 
    </script>
@endsection
1
  • Gracias Luis por tu respuesta, solo recuerda dar formato al código. Selecciona el código y oprime el botón { }.
    – toledano
    Commented el 13 ago. 2016 a las 23:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.