#INSERT_HEAD #INSERT_HEAD_CSS

<:chartjs:demo_titre:>

Types de graphiques

<:chartjs:demo_bar:> <:chartjs:demo_type{type=bar}:>

#SET{data,"40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22"} #SET{labels,"Salé,Sucré,Amer,Acide"} #SET{datalabels,"poire,pomme,courgette,citron"} [(#MODELE{chart}{id=barre,type=bar,datasets=#GET{data},labels=#GET{labels},dataLabels=#GET{datalabels},width=500,height=500})] 
<chart
  |id=barre
  |type=bar
  |datasets=40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22
  |labels=Salé,Sucré,Amer,Acide
  |dataLabels=poire,pomme,courgette,citron
  |width=500
  |height=500>

<:chartjs:demo_line:> <:chartjs:demo_type{type=line}:>

#SET{data,"40,43,61,50 next 33,15,40,22"} #SET{labels,"Janvier, Février, Mars, Avril"} #SET{datalabels,"patates,poireaux"} [(#MODELE{chart}{id=ligne,type=line,datasets=#GET{data},labels=#GET{labels},dataLabels=#GET{datalabels},width=500,height=500})] 
<chart
  |id=ligne
  |type=line
  |datasets=40,43,61,50 next 33,15,40,22
  |labels=Janvier, Février, Mars, Avril0
  |dataLabels=patates,poireaux
  |width=500
  |height=500>

<:chartjs:demo_pie:> <:chartjs:demo_type{type=pie}:>

#SET{data,"10,32,50,25,5"} #SET{labels,"Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima"} [(#MODELE{chart}{id=camembert1,type=pie,data=#GET{data},labels=#GET{labels}})] 
<chart
  |id=camembert1
  |type=pie
  |labels=Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima
  |data=10,32,50,25,5>

<:chartjs:demo_doughnut:> <:chartjs:demo_type{type=doughnut}:>

#SET{data,"30,10,55,25,15,8"} #SET{colors,"#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"} [(#MODELE{chart}{id=anneau,type=doughnut,align=right,data=#GET{data},colors=#GET{colors},labels=#GET{labels}})] 
<chart
  |id=anneau
  |type=doughnut
  |align=right
  |data=30,10,55,25,15,8
  |labels=Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima
  |colors=#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264>

<:chartjs:demo_polaire:> <:chartjs:demo_type{type=polarArea}:>

#SET{data,"40,32,5,25,50,45"} #SET{labels,"Noix,Amandes,Raisins,Autres sucreries,Salés,Six"} [(#MODELE{chart}{id=polaire,type=polarArea,data=#GET{data},labels=#GET{labels}})] 
<chart
  |id=polaire
  |type=polarArea
  |data=40,32,5,25,50,45
  |labels=Noix,Amandes,Raisins,Autres sucreries,Salés,Six>

<:chartjs:demo_radar:> <:chartjs:demo_type{type=radar}:>

#SET{data,"20,22,40,25,55 next 15,20,30,40,35"} #SET{labels,"Précis, Rapide, Joli, Complet, かわい"} #SET{colors,"#CEBC17,#CE4264"} [(#MODELE{chart}{id=radar,type=radar,datasets=#GET{data},labels=#GET{labels},colors=#GET{colors}})] 
<chart
  |id=radar45
  |type=radar
  |datasets=40,43,61,50 next 33,15,40,22
  |labels=Précis, Rapide, Joli, Complet, かわい
  |colors=#CEBC17,#CE4264>

<:chartjs:demo_bubble:> <:chartjs:demo_type{type=bubble}:>

#SET{data,"2,5,10, 10,7,5 next 15,20,5, 10,12,15"} #SET{datalabels,"poireaux, patates"} [(#MODELE{chart}{id=bubble,type=bubble,datasets=#GET{data},dataLabels=#GET{datalabels}})] 
<chart
  |id=bubble
  |type=bubble
  |datasets=2,5,10 10,7,5 next 15,20,5 ,10,12,15
  |dataLabels=poireaux,patates>

<:chartjs:demo_scatter:> <:chartjs:demo_type{type=scatter}:>

#SET{data,"5,10, 10,0, 15,10 next 5,20, 6,25, 7,20 next 13,20, 14,25, 15,20"} #SET{datalabels,"poireaux, patates, piments"} [(#MODELE{chart}{id=scatter,type=scatter,datasets=#GET{data},dataLabels=#GET{datalabels}})] 
<chart
  |id=scatter
  |type=scatter
  |datasets=5,10, 10,0, 15,10 next 5,20, 6,25, 7,20 next 13,20, 14,25, 15,20
  |dataLabels=poireaux,patates,piments>

Exemples avancés

<:chartjs:demo_spip_data:>

#SET{nb_article,0} #SET{nb_article,#TOTAL_BOUCLE} #SET{nb_auteur,0} #SET{nb_auteur,#TOTAL_BOUCLE} #SET{data,#GET{nb_article}|concat{",",#GET{nb_auteur}}} #SET{labels,"Articles, Auteurs"} [(#MODELE{chart}{id=barrespip,type=bar,datasets=#GET{data},labels=#GET{labels}})] 
#SET{nb_article,0}
<BOUCLE_articles(ARTICLES)> </BOUCLE_articles>#SET{nb_article,#TOTAL_BOUCLE} </B_articles>
#SET{nb_auteur,0}
<BOUCLE_auteurs(AUTEURS)> </BOUCLE_auteurs>#SET{nb_auteur,#TOTAL_BOUCLE} </B_auteurs>
#SET{data,#GET{nb_article}|concat{",",#GET{nb_auteur}}} 
#SET{labels,"Articles, Auteurs"}
[(#MODELE{chart}{id=barrespip,type=bar,datasets=#GET{data},labels=#GET{labels}})]

<:chartjs:demo_spip_bigdata:>

#SET{data,''} #SET{labels,''} #SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}} [ (#VALEUR{attributes/currency}|=={JPY}|oui) #SET{data,#GET{data}|concat{",",#VALEUR{attributes/rate}} ] #SET{data,#GET{data}|substr{1}} #SET{labels,#GET{labels}|substr{1}} [(#MODELE{chart}{id=coursduyen,type=line,datasets=#GET{data},labels=#GET{labels}})] <:chartjs:demo_spip_legend:> 
#SET{data,''}
#SET{labels,''}
<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}>
#SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}} 
<BOUCLE_yen(DATA){source tableau,#VALEUR{children/cube}}>[
(#VALEUR{attributes/currency}|=={JPY}|oui)
 #SET{data,#GET{data}|concat{",",#VALEUR{attributes/rate}}
]</BOUCLE_yen> 
</BOUCLE_cours>
#SET{data,#GET{data}|substr{1}}
#SET{labels,#GET{labels}|substr{1}} 
[(#MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,datasets=#GET{data},labels=#GET{labels}})]