source: spip-zone/_plugins_/jqplot/jqplot.html @ 117558

Last change on this file since 117558 was 39757, checked in by booz@…, 10 years ago

le plugin jqplot, pour faire des graphiques jolis et élaborés en js est disponible, voir les exemples jqplot.html pour intégration

File size: 2.4 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
3<head>
4<title>Démo jqPlot</title>
5<meta name="description" content="Démo du plugin sur le site public" />
6<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7#INSERT_HEAD
8</head>
9<body>
10
11
12<script type="text/javascript" src="#EVAL{_DIR_JQPLOT_JS.'plugins/jqplot.dateAxisRenderer.min.js'}"></script>
13<script type="text/javascript" src="#EVAL{_DIR_JQPLOT_JS.'plugins/jqplot.canvasTextRenderer.min.js'}"></script>
14<script type="text/javascript" src="#EVAL{_DIR_JQPLOT_JS.'plugins/jqplot.canvasAxisTickRenderer.min.js'}"></script>
15<script type="text/javascript" src="#EVAL{_DIR_JQPLOT_JS.'plugins/jqplot.highlighter.min.js'}"></script>
16<script type="text/javascript" src="#EVAL{_DIR_JQPLOT_JS.'plugins/jqplot.cursor.min.js'}"></script>
17
18<script type="text/javascript">
19$(document).ready(function(){
20
21line1=[['2009-08',59],['2009-09',91],['2009-10',1130],['2009-11',322]];
22line2 = [['2009-08',1],['2009-09',22],['2009-10',995],['2009-11',197]];
23line3 = [['2009-08',9],['2009-09',20],['2009-10',39],['2009-11',39]];
24line4 = [['2009-10',3],['2009-11',9],['2009-12',28],['2010-01',29]];
25
26
27plot1 = $.jqplot('chart1', [line1,line2,line3,line4] , {
28    title:'Titre',
29    legend:{show:true, location:'nw', xoffset:10},
30    series:[{label:'ligne 1'},{label:'ligne 2'},{label:'ligne 3'},{label:'ligne4'}],
31    axes:{
32        xaxis:{
33            renderer:$.jqplot.DateAxisRenderer,
34            rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
35            tickOptions:{
36                formatString:'%b %Y', 
37                fontSize:'10pt', 
38                fontFamily:'Tahoma', 
39                angle:-30
40            }
41        },
42        yaxis:{
43                tickOptions:{formatString:'%d'},
44                min:0
45                }
46    }, 
47    seriesDefaults: {
48        lineWidth: 1.5,
49        markerOptions: {
50                show: true,
51                size: 5,
52                lineWidth: 1
53        }
54    },
55    highlighter: {sizeAdjust: 7.5},
56    cursor: {show: false}
57});
58
59});
60</script>
61
62<div style="margin:auto;width:80%">
63
64<h1>Démo de jqPlot</h1>
65
66<p>Voir <a href="../lib/dist/examples">d'autres exemples</a></p>
67<p>Voir <a href="http://www.jqplot.com/tests/">toute la doc</a></p>
68
69
70        <div class="jqPlot" id="chart1" style="height:420px; width:740px;"></div>
71
72</div>
73
74
75</body>
76</html>
Note: See TracBrowser for help on using the repository browser.