Angular chart graphics js

Question

Angular chart graphics js

Navigation

#1 by (1 votes)

0

Is it possible to have two graphics on the same page with the angular library chart js? for example one of line and all of bars. Is that I'm trying but only shows me data from the first, the second graphic is totally white, it's as if I did not get the corresponding classes from this library.

<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) {

And these are the bookstores that I use:

<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>

angularjs

asked by Santiago Muñoz 11.08.2016 в 15:52

source

1 answer

How to use the While with a Service AngujarJs help with physical map

score 1 · Answer 1

If you want you could use for graphics this library called ChartJS, which particularly does not give me problems like the others, link , here an example code worked in conjunction with 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