Aide:Frise chronologique/tutoriel

Ce tutoriel repose sur l'usage de l'extension EasyTimeline

Configurer le diagramme

Balises timeline

Le code du diagramme doit se trouver entre des balises timeline.

Exemple:

 <timeline>
 script
 </timeline>

Definir la taille de l'image

Syntaxe:

ImageSize  = width:800 height:auto barincrement:37

• width peut prendre en valeur un nombre de pixels ou la valeur auto
• Hauteur min:25px, max:1200px
• Largeur min:25px, max: 1600px
• Si TimeAxis est à vertical width peut être à auto, s'il est à horizontal c'est height qui peut être auto
• Bar increment
  • uniquement si l'un des param vaut auto
  • taille en pixel entre chaque barre du graphique

Definir la zone d'affichage

Syntaxe

PlotArea   = left:15 right:15 bottom:30 top:15

• left,top,right,bottom:marges en pixel autour du graphe
  • Right et bottom sont facultatifs

Couleurs prédéfinies

Définir des tags de couleur pour mieux identifier la couleur.

Syntaxe

Colors =
 id:war       value:red   legend:War_Period
 id:peace     value:blue  legend:Peace_Time
 id:treaty    value:rgb(0.6,0,0.6)
 id:lightgrey value:gray(0.9)
 

• id: identifiant de la couleur,
• value: définition de la couleur, peut être une couleur html, définie par la fonction rgb(r,g,b), hsv(h,s,v) ou gray() (les paramètres varient entre 0 et 1)

Definir le format d'écriture des dates

Syntaxe:

DateFormat = mm/dd/yyyy

Formats pris en charge :

• dd/mm/yyyy
• mm/dd/yyyy
• yyyy

Définir la plage de temps représentée sur le graphe

Plage de temps représentée sur le graphe: Syntaxe:

Period = from:01/09/1939 till:02/09/1945

Les paramètres from et till doivent être exprimes dans le format précisé avec date format

Définir l'orientation de l'axe temporel et le format de date utilisé sur l'axe

Syntaxe:

TimeAxis = orientation:horizontal format:yyyy

Paramètres:

• format (optionel): pour donner le format des dates spécifique a l'axe temporel
• orientation: hor, horizontal ou ver, vertical
• order: reverse (optionnel)

Définir le pas de l'échelle de temps des axes

Échelle principale

Ajoute des repères sur le graphique. syntaxe:

ScaleMajor = gridcolor:red unit:month increment:3 start:01/09/1939

Paramètres:

• gridcolor:color-id
  • Color id doit avoir défini dans la liste des paramètres
  • Si ce param est absent la grille n'apparait pas
• unit: day, month, year
  • si Dateformat est à yyyy seul year est autorise
• increment:1
  • Un entier
  • Defini l'espacement de la grille
• Start (optional): à utiliser si l’échelle ne commence pas avec la période du graphe

Échelle mineure

Pour définir une sous échelle. Même syntaxe que pour scale major

exemple annees et trimestres:

ScaleMajor = grid:red  unit:year  increment:1 start:01/01/1940
ScaleMinor = grid:blue unit:month increment:3 start:01/10/1939

Gerer l'alignement des barres

Exemple:

AlignBars  = early

Valeurs possibles:

• Early, late, justify

Gerer les arrières plans:BackgroundColor

Exemples:

BackgroundColors = bars:darkgrey
BackgroundColors = canvas:lightgrey bars:darkgrey
BackgroundColors = canvas:lightgrey

Attributs:

• canvas:color-id
  • Arrière plan pour toute l'image
• bars:color-id
  • Arrière plan pour les barres

Intégrer des éléments

BarData

BarData sert à déclarer les bars qui seront utilisée dans le champ plot data. Pour utiliser un élément barset, il faut au préalable le déclarer dans BarData

Exemple de syntaxe:

BarData =
 bar:Japan
 bar:US       text:"United States"  # refer in PlotData to bar "US" but show "United States"
 bar:China    text:China        # label China will be shown as blue clickable link to the English Wikipedia article about China
 Barset:barset-id

Attributs:

• bar:bar-id
• barset:barset-id
• text:du_texte
  • remplacer bar-id par le texte donne au moment de l'affichage du graphe
• link:local_url

PlotData: le conteneur de base

Utilisé pour dessiner des barres et une légende à côté.

Syntaxe de base

PlotData=
 bar:Japan from:start      till:19/02/1945 color:JT
 bar:Japan from:19/02/1945 till:14/03/1945 color:AI
 bar:Japan from:02/09/1945 till:end        color:AO

 at:07/12/1941 shift:(0,-15) text:"<-- WW2 reaches Asia"

Barres

Exemple:

PlotData=
 width:0.3                                                            # see note 1
 bar:Timeperiod color:Timeperiod shift:(0,0)
 from:start till:end color:gris # Arrière plan

 from:866  till:1304 text: "Flandre" color:Timeperiod2 
 from:1304 till:1369 text: "~France" 
 from:1369 till:1477 text: "Bourgogne" color:Timeperiod2 
 from:1477 till:1579 text: "~Habsbourg" 
 from:1579 till:1667 text: "Espagne" color:Timeperiod2 
 from:1667 till:end  text: "~France"                  # see note 5
 

Paramètres:

• bar:bar-id
  • Nom de la barre, utilisé par BarData
• barset (optionnel):barset-id / break
  • barset sert à mettre plusieurs barres ensemble avec passage a la ligne suivante pour chaque periode
  • tres utiles pour les dynasties ou les périodes qui se chevauchent
• color:color-id
• width(optionel):Largeur en pixels ou en % de la barre

Barset

Barset sert à faire un jeu de barres (Voir exemple en bas)

Syntaxe:

BarData=
 Barset:monBarset

PlotData=
 barset:monBarset
 from:1999 till:2002 # barre 1
 from:2000 till:2001 # barre 2
 barset:break # retour e haut du barset
 from:2004 till:2008 # barre 3

Exemple avec barset:

#alignement →
 width:25 fontsize:S textcolor:black anchor:from align:left color:noir
 barset:Timeperiod2
 from:640  till:640  text:"640 ~Fondation légendaire de Lille" shift:(2,0)
 from:1066 till:1066 text:"1066 ~Mention de la ville dans les archives" shift:(2,0) #une ligne plus bas

 #alignement ←
 width:25 fontsize:S textcolor:black anchor:from align:right color:noir
 
 from:1454 till:1454 text:"1454 ~Voeu du faisan" shift:(0,0)
 from:1581 till:1582 text:"1581-1582 ~Assauts des Hurlus" shift:(0,0) color:guerre
 from:1708 till:1713 text:"1708-1713 ~Occupation hollandaise" shift:(0,0) color:guerre
 from:1792 till:1792 text:"1792 ~Siège autrichien" shift:(0,0) color:guerre
 from:1846 till:1846 text:"1846 ~Chemin de fer Paris-Lille" shift:(0,0)
 from:1853 till:1853 text:"1853 ~Composition du Ptit Quinquin" shift:(0,0)
 from:1888 till:1888 text:"1888 ~Composition de l'internationale" shift:(0,0)
 #La différence avec bar, c'est que les dates ne sont pas collées
 

Ajouter du texte a une barre

Attributs:

• text:du_texte
• textcolor:color-id
• align:center/left/right
  • Par defaut:cente
• link:url

Positionner des éléments

• at:time
  • Defini le debut du bloc
• from:time till:time
  • Defini une date de debut et une date de fin pour le bloc
  • incompatible avec at
• shift:(x,y)

Exemple:

 at:07/12/1941 shift:(0,-15) text:"<-- WW2 reaches Asia"
 

Marqueurs

Ces éléments sont utiles pour indiquer une date sur une barre.

Exemple de syntaxe:

PlotData=
 bar:test width:15 color:red
 from:1900 till:2000
 at:1990 mark:(line,white)

Attribut:

• mark:(symbol,color-id)
  • Pour le moment symbol ne peut prendre que la valeur ligne

Ajouter une légende:Legend

Exemples:

Legend = orientation:vertical position:bottom columns:3 columnwidth:140
Legend = orientation:horizontal position:bottom
Legend = left:100 top:120 columns:3

Attributs:

• orientation:hor/horizontal/ver/vertical
  • orientation horizontal et position right ne sont pas compatible
• position:top/bottom/right
• columns:entier
  • Entre 1 et 4
  • Defini automatiquement si cet attribut n'est pas precise

Les trois attributs suivant devraient être laissés dans leur valeur par défaut

• coloumnwidth:distance
• left:distance
  • Distance entre le côté gauche de la légende et le côté gauche de l'image
• top:
  • Distance entre le haut de la légende et le haut de l'image

Ajouter un bloc de texte au diagramme:TextData

Exemple de syntaxe:

TextData =
 pos:(20,67) textcolor:black fontsize:S
 tabs:(10-right,14-left,50-left,90-left,230-left)
 text:^1^1940^27/9^Germany,Italy and Japan sign Tripartite Pact
 text:^10^1944^1-22/7^Bretton Woods 44 nations establish
 text:^^^^^IMF and World Bank

Attribut attendus:

• pos:(x,y)
  • Position du texte par rapport au coin haut gauche du diagramme
• text:du_texte
  • Texte a ajouter
• link:url
• textcolor:color-id
• fontsize:entier/tag
  • L'entier doit être entre 6 et 30
  • tag peut prendre les valeurs:XS, S(defaut), M, L, XL
• tabs:
  • Gerer les tabulations
• lineheight:mesure aboslue (px,in,cm)
  • distance entre deux lignes consécutives
  • jusqu'à 40 px

Dessiner des lines sur le diagramme:LineData

Exemple de syntaxe:

LineData =
 layer:front                                            # all lines in front of bars unless stated otherwise
 at:1                         color:yellow              # perpendicular to time axis full length
 at:2                         color:orange  layer:back  # perpendicular to time axis full length but behind bars
 at:4  frompos:50 tillpos:105 color:green               # perpendicular to time axis, with specified start and stop points
 from:5 till:8 atpos:50       color:red                 # parallel to time axis
 points:(100,20)(170,105)     color:blue    width:3     # from one arbitrary absolute position to another, extra thick

Reutiliser des constantes: Define

Pour réutiliser des constantes qui apparaissent plusieurs fois dans le graphique: Exemple de syntaxe:

Define $broad       = width:30
Define $narrow      = width:10
Define $bardefaults = $broad fontsize:S

Exemple complet

<timeline>
DateFormat = yyyy
ImageSize  = width:800 height:auto barincrement:37
PlotArea   = left:15 right:15 bottom:30 top:15

Colors     =
  id:canvas      value:rgb(0.97,0.97,0.97)
  id:grid1       value:rgb(0.80,0.80,0.80)
  id:grid2       value:rgb(0.86,0.86,0.86)
  id:Timeperiod  value:red
  id:Timeperiod2 value:rgb(0.86,0.56,0.56)
  id:gris        value:gray(0.7)
  id:noir        value:black
  id:guerre      value:red
  id:blanc       value:white

Period     = from:600 till:2020
TimeAxis   = orientation:horizontal format:yyyy
ScaleMajor = unit:year  increment:100 start:600 gridcolor:grid1
ScaleMinor = unit:year  increment:50  start:1050 gridcolor:grid2
AlignBars  = justify

BackgroundColors = canvas:canvas bars:canvas

BarData=
  bar:Timeperiod 
  barset:Timeperiod2

PlotData=
  width:30 fontsize:S textcolor:noir align:center

  # Époques
  bar:Timeperiod color:Timeperiod shift:(0,0)
  from:start till:end color:gris # Arrière plan

  from:866  till:1304 text: "Flandre" color:Timeperiod2 
  from:1304 till:1369 text: "~France" 
  from:1369 till:1477 text: "Bourgogne" color:Timeperiod2 
  from:1477 till:1579 text: "~Habsbourg" 
  from:1579 till:1667 text: "Espagne" color:Timeperiod2 
  from:1667 till:end  text: "~France" 

  # Évennements
  #alignement →
  width:25 fontsize:S textcolor:black anchor:from align:left color:noir
  barset:Timeperiod2
  from:640  till:640  text:"640 ~Fondation légendaire de Lille" shift:(2,0)
  from:1066 till:1066 text:"1066 ~Mention de la ville dans les archives" shift:(2,0)

  #alignement ←
  width:25 fontsize:S textcolor:black anchor:from align:right color:noir
  
  from:1454 till:1454 text:"1454 ~Voeu du faisan" shift:(0,0)
  from:1581 till:1582 text:"1581-1582 ~Assauts des Hurlus" shift:(0,0) color:guerre
  from:1708 till:1713 text:"1708-1713 ~Occupation hollandaise" shift:(0,0) color:guerre
  from:1792 till:1792 text:"1792 ~Siège autrichien" shift:(0,0) color:guerre
  from:1846 till:1846 text:"1846 ~Chemin de fer Paris-Lille" shift:(0,0)
  from:1853 till:1853 text:"1853 ~Composition du Ptit Quinquin" shift:(0,0)
  from:1888 till:1888 text:"1888 ~Composition de l'internationale" shift:(0,0)
  # Recommencer l'indentation en haut
  barset:break

  from:1914 till:1918 text:"1914-1918 ~Occupation allemande" shift:(0,0) color:guerre
  from:1940 till:1944 text:"1940-1944 ~Occupation nazie" shift:(0,0) color:guerre
  from:1960 till:1980 text:"Crise métallurgique, textile et minière" shift:(0,0) color:gris
  from:1969 till:1969 text:"1969 ~Communauté urbaine de Lille" shift:(0,0)
  from:1993 till:1993 text:"1993 ~TGV Paris-Lille" shift:(0,0)
  from:2003 till:2004 text:"2004 ~Lille 2004" shift:(0,0)
 </timeline>