Changeset 104999 in spip-zone


Ignore:
Timestamp:
Jun 27, 2017, 6:46:34 PM (2 years ago)
Author:
tcharlss@…
Message:

Coquille datasets + ajouter l'unité aux dimensions si nécessaire

Location:
_plugins_/chartjs/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/chartjs/trunk/demo/demo_chartjs.html

    r84927 r104999  
    11<!DOCTYPE html>
    22<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    3   <head>
    4   <INCLURE{fond=inclure/head} />
    5   <title><:chartjs:demo_titre:></title>
    6   <style>
    7   body {margin:2% 8%;}
    8   h2 {text-align:left;}
    9   .code-chart {clear:both;padding:1em;border-radius:1em;background:#333;color:#fff;text-align:left;overflow:hidden;}
    10   .spip-chart-wrap {/*text-align:left;*/background:white;/*padding:1em;*/box-shadow: 8px 8px 4px #aaa;}
    11   </style>
    12   </head>
    13  
    14  
    15  
     3<head>
     4        <title><:chartjs:demo_titre:></title>
     5        #INSERT_HEAD
     6        #INSERT_HEAD_CSS
     7        <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css">
     8        <style>
     9                body { margin: 3rem; font-family: sans; }
     10                h1, h2 { text-align: center; }
     11        .code-chart { clear:both; padding:1em; border-radius:1em; background:#333; color:#fff; text-align:left; overflow:hidden; }
     12        </style>
     13</head>
     14       
    1615<body>
    17 <h1><:chartjs:demo_titre:></h1>
    1816
     17        <h1><:chartjs:demo_titre:></h1>
    1918
    20 <!-- pie -->
    21 <h2><:chartjs:demo_pie:></h2>
    22 #SET{data,"10,32,50,25,5"}
    23 #SET{labels,"Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima"}
    24 [(#MODELE{chart}{id=camembert1,type=pie,canvaswidth=250,canvasheight=250,data=#GET{data},labels=#GET{labels}})]
    25 <pre class="code-chart">
    26 &lt;chart
    27 |id=camembert1
    28 |canvaswidth=250
    29 |canvasheight=250
    30 |type=pie
    31 |labels=Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima
    32 |data=10,32,50,25,5&gt;
    33 </pre>
     19        <div class="row">
    3420
    35 <!-- Doughnut -->
    36 <h2><:chartjs:demo_doughnut:></h2>
    37 #SET{data,"30,10,55,25,15,8"}
    38 #SET{colors,"#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"}
    39 [(#MODELE{chart}{id=anneau,type=doughnut,align=right,data=#GET{data},colors=#GET{colors}})]
    40 <pre class="code-chart">
    41 &lt;chart
    42 |id=anneau
    43 |type=doughnut
    44 |align=right
    45 |data=30,10,55,25,15,8
    46 |colors=#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264&gt;
    47 </pre>
     21                <!-- bar -->
     22                <div class="col-md-6 col-lg-4">
     23                        <h2 id="bar"><:chartjs:demo_bar:></h2>
     24                        #SET{data,"40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22"}
     25                        #SET{labels,"Salé,Sucré,Amer,Acide"}
     26                        [(#MODELE{chart}{id=barre,type=bar,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels}})]
     27                        <pre class="code-chart">
     28                        &lt;chart
     29                        |id=barre
     30                        |type=bar
     31                        |datasets=40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22
     32                        |labels=Salé,Sucré,Amer,Acide
     33                        |canvaswidth=450
     34                        |canvasheight=450&gt;
     35                        </pre>
     36                </div>
    4837
     38                <!-- line -->
     39                <div class="col-md-6 col-lg-4">
     40                        <h2 id="ligne"><:chartjs:demo_line:></h2>
     41                        #SET{data,"40,43,61,50 next 33,15,40,22"}
     42                        #SET{labels,"Janvier, Février, Mars, Avril"}
     43                        [(#MODELE{chart}{id=ligne,type=line,datasets=#GET{data},labels=#GET{labels}})]
     44                        <pre class="code-chart">
     45                        &lt;chart
     46                        |id=ligne
     47                        |type=line
     48                        |datasets=40,43,61,50 next 33,15,40,22
     49                        |labels=Janvier, Février, Mars, Avril
     50                        |canvaswidth=450
     51                        |canvasheight=450&gt;
     52                        </pre>
     53                </div>
    4954
    50 <!-- polarArea -->
    51 <h2><:chartjs:demo_polaire:></h2>
    52 #SET{data,"40,32,5,25,50,45"}
    53 #SET{labels,"Noix,Amandes,Raisins,Autres sucreries,Salés,Six"}
    54 [(#MODELE{chart}{id=polaire,type=polarArea,align=center,canvaswidth=250,canvasheight=250,data=#GET{data},labels=#GET{labels}})]
    55 <pre class="code-chart">
    56 &lt;chart
    57 |id=polaire
    58 |type=polarArea
    59 |align=center
    60 |data=40,32,5,25,50,45
    61 |labels=Noix,Amandes,Raisins,Autres sucreries,Salés,Six
    62 |canvaswidth=250
    63 |canvasheight=250&gt;
    64 </pre>
     55                <!-- pie -->
     56                <div class="col-md-6 col-lg-4">
     57                        <h2 id="pie"><:chartjs:demo_pie:></h2>
     58                        #SET{data,"10,32,50,25,5"}
     59                        #SET{labels,"Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima"}
     60                        [(#MODELE{chart}{id=camembert1,type=pie,data=#GET{data},labels=#GET{labels}})]
     61                        <pre class="code-chart">
     62                        &lt;chart
     63                        |id=camembert1
     64                        |type=pie
     65                        |labels=Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima
     66                        |data=10,32,50,25,5&gt;
     67                        </pre>
     68                </div>
    6569
    66      
     70                <!-- Doughnut -->
     71                <div class="col-md-6 col-lg-4">
     72                        <h2 id="doughnut"><:chartjs:demo_doughnut:></h2>
     73                        #SET{data,"30,10,55,25,15,8"}
     74                        #SET{colors,"#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"}
     75                        [(#MODELE{chart}{id=anneau,type=doughnut,align=right,data=#GET{data},colors=#GET{colors}})]
     76                        <pre class="code-chart">
     77                        &lt;chart
     78                        |id=anneau
     79                        |type=doughnut
     80                        |align=right
     81                        |data=30,10,55,25,15,8
     82                        |colors=#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264&gt;
     83                        </pre>
     84                </div>
    6785
    68 <!-- bar -->
    69 <h2><:chartjs:demo_bar:></h2>
    70 #SET{data,"40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22"}
    71 #SET{labels,"Salé,Sucré,Amer,Acide"}
    72 [(#MODELE{chart}{id=barre,type=bar,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels}})]
    73 <pre class="code-chart">
    74 &lt;chart
    75 |id=barre
    76 |type=bar
    77 |datasets=40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22
    78 |labels=Salé,Sucré,Amer,Acide
    79 |canvaswidth=450
    80 |canvasheight=450&gt;
    81 </pre>
     86                <!-- polarArea -->
     87                <div class="col-md-6 col-lg-4">
     88                        <h2 id="polararea"><:chartjs:demo_polaire:></h2>
     89                        #SET{data,"40,32,5,25,50,45"}
     90                        #SET{labels,"Noix,Amandes,Raisins,Autres sucreries,Salés,Six"}
     91                        [(#MODELE{chart}{id=polaire,type=polarArea,align=center,canvaswidth=250,canvasheight=250,data=#GET{data},labels=#GET{labels}})]
     92                        <pre class="code-chart">
     93                        &lt;chart
     94                        |id=polaire
     95                        |type=polarArea
     96                        |align=center
     97                        |data=40,32,5,25,50,45
     98                        |labels=Noix,Amandes,Raisins,Autres sucreries,Salés,Six
     99                        |canvaswidth=250
     100                        |canvasheight=250&gt;
     101                        </pre>
     102                </div>
    82103
    83 <!-- line -->
    84 <h2><:chartjs:demo_line:></h2>
    85 #SET{data,"40,43,61,50 next 33,15,40,22"}
    86 #SET{labels,"Janvier, Février, Mars, Avril"}
    87 [(#MODELE{chart}{id=ligne,type=line,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels}})]
    88 <pre class="code-chart">
    89 &lt;chart
    90 |id=ligne
    91 |type=line
    92 |datasets=40,43,61,50 next 33,15,40,22
    93 |labels=Janvier, Février, Mars, Avril
    94 |canvaswidth=450
    95 |canvasheight=450&gt;
    96 </pre>
     104                <!-- radar -->
     105                <div class="col-md-6 col-lg-4">
     106                        <h2 id="radar"><:chartjs:demo_radar:></h2>
     107                        #SET{data,"20,22,40,25,55 next 15,20,30,40,35"}
     108                        #SET{labels,"Précis, Rapide, Joli, Complet, かわい"}
     109                        #SET{colors,"#CEBC17,#CE4264"}
     110                        [(#MODELE{chart}{id=radar45,type=radar,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels},colors=#GET{colors}})]
     111                        <pre class="code-chart">
     112                        &lt;chart
     113                        |id=radar45
     114                        |type=radar
     115                        |datasets=40,43,61,50 next 33,15,40,22
     116                        |labels=Précis, Rapide, Joli, Complet, かわい
     117                        |canvaswidth=450
     118                        |canvasheight=450
     119                        |colors=#CEBC17,#CE4264&gt;
     120                        </pre>
     121                </div>
    97122
    98 <!-- radar -->
    99 <h2><:chartjs:demo_radar:></h2>
    100 #SET{data,"20,22,40,25,55 next 15,20,30,40,35"}
    101 #SET{labels,"Précis, Rapide, Joli, Complet, かわい"}
    102 #SET{colors,"#CEBC17,#CE4264"}
    103 [(#MODELE{chart}{id=radar45,type=radar,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels},colors=#GET{colors}})]
    104 <pre class="code-chart">
    105 &lt;chart
    106 |id=radar45
    107 |type=radar
    108 |datasets=40,43,61,50 next 33,15,40,22
    109 |labels=Précis, Rapide, Joli, Complet, かわい
    110 |canvaswidth=450
    111 |canvasheight=450
    112 |colors=#CEBC17,#CE4264&gt;
    113 </pre>
     123                <!-- spip -->
     124                <div class="col-md-6 col-lg-4">
     125                        <h2><:chartjs:demo_spip_data:></h2>
     126                        #SET{nb_article,0}
     127                        <BOUCLE_articles(ARTICLES)> </BOUCLE_articles>#SET{nb_article,#TOTAL_BOUCLE} </B_articles>
     128                        #SET{nb_auteur,0}
     129                        <BOUCLE_auteurs(AUTEURS)> </BOUCLE_auteurs>#SET{nb_auteur,#TOTAL_BOUCLE} </B_auteurs>
     130                        #SET{data,#GET{nb_article}|concat{",",#GET{nb_auteur}}}
     131                        #SET{labels,"Articles, Auteurs"}
     132                        [(#MODELE{chart}{id=barrespip,type=bar,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels}})]
     133                        <pre class="code-chart">
     134                        &#35;SET{nb_article,0}
     135                        &lt;BOUCLE_articles(ARTICLES)&gt; &lt;/BOUCLE_articles&gt;&#35;SET{nb_article,&#35;TOTAL_BOUCLE} &lt;/B_articles&gt;
     136                        &#35;SET{nb_auteur,0}
     137                        &lt;BOUCLE_auteurs(AUTEURS)&gt; &lt;/BOUCLE_auteurs&gt;&#35;SET{nb_auteur,&#35;TOTAL_BOUCLE} &lt;/B_auteurs&gt;
     138                        &#35;SET{data,&#35;GET{nb_article}|concat{",",&#35;GET{nb_auteur}}}
     139                        &#35;SET{labels,"Articles, Auteurs"}
     140                        [(&#35;MODELE{chart}{id=barrespip,type=bar,canvaswidth=450,canvasheight=450,datasets=&#35;GET{data},labels=&#35;GET{labels}})]
     141                        </pre>
     142                </div>
    114143
    115 <!-- spip -->
    116 <h2><:chartjs:demo_spip_data:></h2>
    117 #SET{nb_article,0}
    118 <BOUCLE_articles(ARTICLES)> </BOUCLE_articles>#SET{nb_article,#TOTAL_BOUCLE} </B_articles>
    119 #SET{nb_auteur,0}
    120 <BOUCLE_auteurs(AUTEURS)> </BOUCLE_auteurs>#SET{nb_auteur,#TOTAL_BOUCLE} </B_auteurs>
    121 #SET{data,#GET{nb_article}|concat{",",#GET{nb_auteur}}}
    122 #SET{labels,"Articles, Auteurs"}
    123 [(#MODELE{chart}{id=barrespip,type=bar,canvaswidth=450,canvasheight=450,datasets=#GET{data},labels=#GET{labels}})]
    124 <pre class="code-chart">
    125 &#35;SET{nb_article,0}
    126 &lt;BOUCLE_articles(ARTICLES)&gt; &lt;/BOUCLE_articles&gt;&#35;SET{nb_article,&#35;TOTAL_BOUCLE} &lt;/B_articles&gt;
    127 &#35;SET{nb_auteur,0}
    128 &lt;BOUCLE_auteurs(AUTEURS)&gt; &lt;/BOUCLE_auteurs&gt;&#35;SET{nb_auteur,&#35;TOTAL_BOUCLE} &lt;/B_auteurs&gt;
    129 &#35;SET{data,&#35;GET{nb_article}|concat{",",&#35;GET{nb_auteur}}}
    130 &#35;SET{labels,"Articles, Auteurs"}
    131 [(&#35;MODELE{chart}{id=barrespip,type=bar,canvaswidth=450,canvasheight=450,datasets=&#35;GET{data},labels=&#35;GET{labels}})]
    132 </pre>
    133 
    134 
    135 <!-- spip data -->
    136 <h2><:chartjs:demo_spip_bigdata:></h2>
    137 #SET{data,''}
    138 #SET{labels,''}
    139 <BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?#ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}>
    140 #SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}}
    141 <BOUCLE_yen(DATA){source tableau,#VALEUR{children/cube}}>[
    142 (#VALEUR{attributes/currency}|=={JPY}|oui)
    143  #SET{data,#GET{data}|concat{",",#VALEUR{attributes/rate}}
    144 ]</BOUCLE_yen>
    145 </BOUCLE_cours>
    146 #SET{data,#GET{data}|substr{1}}
    147 #SET{labels,#GET{labels}|substr{1}}
    148 [(#MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,canvaswidth=850,canvasheight=350,datasets=#GET{data},labels=#GET{labels}})]
    149 <strong><:chartjs:demo_spip_legend:></strong>
    150 
    151 <pre class="code-chart">
    152 &#35;SET{data,''}
    153 &#35;SET{labels,''}
    154 &lt;BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?&#35;ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}&gt;
    155 &#35;SET{labels, &#35;GET{labels}|concat{",",&#35;VALEUR{attributes/time}|affdate{d/m/y}}}
    156 &lt;BOUCLE_yen(DATA){source tableau,&#35;VALEUR{children/cube}}&gt;[
    157 (&#35;VALEUR{attributes/currency}|=={JPY}|oui)
    158  &#35;SET{data,&#35;GET{data}|concat{",",&#35;VALEUR{attributes/rate}}
    159 ]&lt;/BOUCLE_yen&gt;
    160 &lt;/BOUCLE_cours&gt;
    161 &#35;SET{data,&#35;GET{data}|substr{1}}
    162 &#35;SET{labels,&#35;GET{labels}|substr{1}}
    163 [(&#35;MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,canvaswidth=850,canvasheight=350,datasets=&#35;GET{data},labels=&#35;GET{labels}})]
    164 </pre>
    165 
    166 
    167 
    168 
    169 
    170 
    171 
    172 
    173 
     144                <!-- spip data -->
     145                <div class="col-md-6 col-lg-4">
     146                        <h2><:chartjs:demo_spip_bigdata:></h2>
     147                        #SET{data,''}
     148                        #SET{labels,''}
     149                        <BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?#ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}>
     150                        #SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}}
     151                        <BOUCLE_yen(DATA){source tableau,#VALEUR{children/cube}}>[
     152                        (#VALEUR{attributes/currency}|=={JPY}|oui)
     153                         #SET{data,#GET{data}|concat{",",#VALEUR{attributes/rate}}
     154                        ]</BOUCLE_yen>
     155                        </BOUCLE_cours>
     156                        #SET{data,#GET{data}|substr{1}}
     157                        #SET{labels,#GET{labels}|substr{1}}
     158                        [(#MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,canvaswidth=850,canvasheight=350,datasets=#GET{data},labels=#GET{labels}})]
     159                        <strong><:chartjs:demo_spip_legend:></strong>
     160                        <pre class="code-chart">
     161                        &#35;SET{data,''}
     162                        &#35;SET{labels,''}
     163                        &lt;BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?&#35;ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}&gt;
     164                        &#35;SET{labels, &#35;GET{labels}|concat{",",&#35;VALEUR{attributes/time}|affdate{d/m/y}}}
     165                        &lt;BOUCLE_yen(DATA){source tableau,&#35;VALEUR{children/cube}}&gt;[
     166                        (&#35;VALEUR{attributes/currency}|=={JPY}|oui)
     167                         &#35;SET{data,&#35;GET{data}|concat{",",&#35;VALEUR{attributes/rate}}
     168                        ]&lt;/BOUCLE_yen&gt;
     169                        &lt;/BOUCLE_cours&gt;
     170                        &#35;SET{data,&#35;GET{data}|substr{1}}
     171                        &#35;SET{labels,&#35;GET{labels}|substr{1}}
     172                        [(&#35;MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,canvaswidth=850,canvasheight=350,datasets=&#35;GET{data},labels=&#35;GET{labels}})]
     173                        </pre>
     174                </div>
    174175
    175176</body>
  • _plugins_/chartjs/trunk/modeles/chart.html

    r104998 r104999  
    8686#SET{alias,        #ARRAY{polararea,polarArea}}
    8787#SET{type,         #GET{alias/GET{type}}|sinon{#GET{type}}}
    88 #SET{id,           #ENV{id,chart}|replace{' '}}
    89 #SET{donnees,      #ENV{data,datasets}}
     88#SET{id,           #VAL{spipchart_}|concat{#ENV{id,chart}|replace{' '}}}
     89#SET{donnees,      #ENV{data,#ENV{datasets}}}
    9090[(#REM) Apparence ]
    9191#SET{width,        #ENV{width,#ENV{canvaswidth}}}
     92#SET{width,        #GET{width}|concat{#GET{width}|match{\\w\{2\}$}|?{px}}}
    9293#SET{height,       #ENV{height,#ENV{canvasheight}}}
     94#SET{height,       #GET{width}|concat{#GET{height}|match{\\w\{2\}$}|?{px}}}
    9395#SET{colors,       #ENV{colors}|is_null|?{
    9496        #LISTE{#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264,#F7464A,#46BFBD,#FDB45C},
Note: See TracChangeset for help on using the changeset viewer.