Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
---
2 
layout: docs
3 
title: "Moodle Charts"
4 
date: 2020-01-14T16:32:24+01:00
5 
draft: false
6 
---
7 
 
8 
## How it works
9 
 
10 
The core chart_builder interface for the ChartJS library that allows you to create a nice visual presentation of your data.
11 
 
12 
## Source files
13 
 
14 
* `lib/amd/src/chart_builder.js`
15 
* `lib/amd/src/chart_*.js`
16 
* `lib/templates/chart.mustache`
17 
 
18 
## Core api
19 
 
20 
Create a new instance of your required chart type
21 
 
22 
{{< php >}}
23 
  $chart1 = new chart_bar();
24 
  $series1 = new chart_series('Data type', $data);
25 
  $chart1->add_series($series1);
26 
  $OUTPUT->render($chart1);
27 
{{< / php >}}
28 
 
29 
 
30 
### JavaScript
31 
 
32 
{{< mustache template="core/chart" >}}
33 
{
34 
    "chartdata": "{\u0022type\u0022:\u0022pie\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022PIE CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[]},\u0022config_colorset\u0022:null,\u0022doughnut\u0022:null}",
35 
    "withtable": true
36 
}
37 
{{< /mustache >}}
38 
 
39 
{{< mustache template="core/chart" >}}
40 
{
41 
    "chartdata": "{\u0022type\u0022:\u0022pie\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022DOUGHNUT CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[]},\u0022config_colorset\u0022:null,\u0022doughnut\u0022:true}",
42 
    "withtable": true
43 
}
44 
{{< /mustache >}}
45 
 
46 
{{< mustache template="core/chart" >}}
47 
{
48 
    "chartdata": "{\u0022type\u0022:\u0022line\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null},{\u0022label\u0022:\u0022Expenses\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[400,460,1120,540],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022TENSIONED LINES CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[]},\u0022config_colorset\u0022:null,\u0022smooth\u0022:false}",
49 
    "withtable": true
50 
}
51 
{{< /mustache >}}
52 
 
53 
{{< mustache template="core/chart" >}}
54 
{
55 
    "chartdata": "{\u0022type\u0022:\u0022line\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null},{\u0022label\u0022:\u0022Expenses\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[400,460,1120,540],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022SMOOTH LINES CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[]},\u0022config_colorset\u0022:null,\u0022smooth\u0022:true}",
56 
    "withtable": true
57 
}
58 
{{< /mustache >}}
59 
 
60 
{{< mustache template="core/chart" >}}
61 
{
62 
    "chartdata": "{\u0022type\u0022:\u0022bar\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null},{\u0022label\u0022:\u0022Expenses\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[400,460,1120,540],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022BAR CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[{\u0022label\u0022:null,\u0022labels\u0022:null,\u0022max\u0022:null,\u0022min\u0022:0,\u0022position\u0022:null,\u0022stepSize\u0022:null}]},\u0022config_colorset\u0022:null,\u0022horizontal\u0022:false,\u0022stacked\u0022:null}",
63 
    "withtable": true
64 
}
65 
{{< /mustache >}}
66 
 
67 
{{< mustache template="core/chart" >}}
68 
{
69 
    "chartdata": "{\u0022type\u0022:\u0022bar\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null},{\u0022label\u0022:\u0022Expenses\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[400,460,1120,540],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022HORIZONTAL BAR CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[{\u0022label\u0022:null,\u0022labels\u0022:null,\u0022max\u0022:null,\u0022min\u0022:0,\u0022position\u0022:null,\u0022stepSize\u0022:null}]},\u0022config_colorset\u0022:null,\u0022horizontal\u0022:true,\u0022stacked\u0022:null}",
70 
    "withtable": true
71 
}
72 
{{< /mustache >}}
73 
 
74 
{{< mustache template="core/chart" >}}
75 
{
76 
    "chartdata": "{\u0022type\u0022:\u0022bar\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null},{\u0022label\u0022:\u0022Expenses\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[400,460,1120,540],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022STACKED BAR CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[{\u0022label\u0022:null,\u0022labels\u0022:null,\u0022max\u0022:null,\u0022min\u0022:0,\u0022position\u0022:null,\u0022stepSize\u0022:null}]},\u0022config_colorset\u0022:null,\u0022horizontal\u0022:false,\u0022stacked\u0022:true}",
77 
    "withtable": true
78 
}
79 
{{< /mustache >}}
80 
 
81 
{{< mustache template="core/chart" >}}
82 
{
83 
    "chartdata": "{\u0022type\u0022:\u0022bar\u0022,\u0022series\u0022:[{\u0022label\u0022:\u0022Expenses\u0022,\u0022labels\u0022:null,\u0022type\u0022:\u0022line\u0022,\u0022values\u0022:[400,460,1120,540],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null},{\u0022label\u0022:\u0022Sales\u0022,\u0022labels\u0022:null,\u0022type\u0022:null,\u0022values\u0022:[1000,1170,660,1030],\u0022colors\u0022:[],\u0022axes\u0022:{\u0022x\u0022:null,\u0022y\u0022:null},\u0022smooth\u0022:null}],\u0022labels\u0022:[\u00222004\u0022,\u00222005\u0022,\u00222006\u0022,\u00222007\u0022],\u0022title\u0022:\u0022BAR CHART COMBINED WITH LINE CHART\u0022,\u0022axes\u0022:{\u0022x\u0022:[],\u0022y\u0022:[{\u0022label\u0022:null,\u0022labels\u0022:null,\u0022max\u0022:null,\u0022min\u0022:0,\u0022position\u0022:null,\u0022stepSize\u0022:null}]},\u0022config_colorset\u0022:null,\u0022horizontal\u0022:false,\u0022stacked\u0022:null}",
84 
    "withtable": true
85 
}
86 
{{< /mustache >}}