Angularjs Chart-angular-flot

1. The first JS file to be introduced in the project is

<script src="Http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></ script>

<script src="Http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js" ></ script>

<script src="Http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js" ></script>

<script src=". /angular-flot.js"></script>

2. Data structure and configuration of pie chart:

  Pie chart-Doughnut chart data source    $scope. donutdata = [      {        Label: "This Resource",        data:0      }, {        label: "External Resource",        data:0      }, {        label: "Other Resources",        data:0      }    ];    $scope. donutoptions = {      series: {        pie: {          show:true,          innerradius:0.5,          label: {            show: False          }        }      ,      legend: {        show:false,        nocolumns:1      },      grid: {        clickable : True      },      colors: ["#15bec0", "#967db0", "#fcb981"]    };

3. The data structure and configuration of the line chart:

$scope. ChartData = [
  {
    Label: "Traffic Size",
    Data: [[1,3],[2,4]]
  }, {
    Label: "Inbound Quantity",
    Data: [[3,4],[1,5]]
  }, {
    Label: "Total video Length",
    Data: [[1,6],[3,5]]
  }
];

$scope. chartoptions = {      series: {        zero:false,        bars: {          show:false        },        lines: {          show:true,          Fill:false        },        points: {          show:true,          linewidth:1,          fill:true,          fillcolor: "#ffffff" ,          symbol: "Circle",          radius:5        },        shadowsize:0      },      legend: {        show:false,        Nocolumns:8      },      grid: {        clickable:true,        borderwidth:1,        bordercolor: "#eeeeee"      },      colors: ["#15bec0", "#b5a2de", "#fcb981"],      xaxis: {        show:true,        ticks: [],        tickdecimals:0< c33/>},      YAxis: {show:true, tickdecimals:0}    };

4. Pie chart Data Source:

Pie chart $scopr.piedata=[    {label: ' Completed ', data:23},    {label: ' Not Completed ', data:77}] $scope. piechartoptions = {series: {
   
     pie: {      show:true,       label: {          show:false,              radius:1/3          }       }    ,    legend: {       show: False,       Nocolumns:2    },    colors: [' #fe8203 ', ' #e7e9ed ']
    
};
   

5. Chart Display mode: <flot style= "margin:0 auto" dataset= "Donutdata" options= "donutoptions" height= "300px" ></flot>

If you need to manipulate some of the default charts, you can modify the directive in Angular-flot;

　　

　　

Angularjs Chart-angular-flot