[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2  <HTML>
   3  <HEAD>
   4  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1">
   5  <LINK REL="Start" HREF="index.html">
   6  <LINK REL="Contents" HREF="toc.html">
   7  <LINK REL="Prev" HREF="8117Addingplotmarkstoalineplot.html">
   8  <LINK REL="Next" HREF="821Adjustingthewidthofthebars.html">
   9  <STYLE TYPE="text/css"><!--
  10  BODY { font-family: serif }
  11  H1 { font-family: sans-serif }
  12  H2 { font-family: sans-serif }
  13  H3 { font-family: sans-serif }
  14  H4 { font-family: sans-serif }
  15  H5 { font-family: sans-serif }
  16  H6 { font-family: sans-serif }
  17  SUB { font-size: smaller }
  18  SUP { font-size: smaller }
  19  PRE { font-family: monospace }
  20  A { text-decoration: none }
  21  --></STYLE>
  22  </HEAD>
  23  <BODY>
  24  <A HREF="toc.html">Contents</A>
  25  <A HREF="8117Addingplotmarkstoalineplot.html">Previous</A>
  26  <A HREF="821Adjustingthewidthofthebars.html">Next</A>
  27  <HR NOSHADE>
  28  <H2><A NAME="8_2">8.2 Bar graphs</A></H2>
  29  <P> Jpgraph also supports 2D vertical bar plots. Before you can use any
  30   bar plots you must make sure that you included the file
  31   &quot;jpgraph_bar.php&quot; in your script.</P>
  32  <P> Using bar plots is quite straightforward and works in much the same
  33   way as line plots which you are already familiar with from the previous
  34   examples. Assuming you have a data array consisting of the values
  35   [12,8,19,3,10,5] and you want to display them as a bar plot. This is
  36   the simplest way to do this:<DIV class="phpscript"><CODE><FONT color="#000000">
  37   <FONT color="#0000BB">&nbsp;$datay</FONT><FONT color="#007700">=array(</FONT><FONT
  38  color="#0000BB">12</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
  39  8</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">19</FONT><FONT
  40  color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">
  41  ,</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700">,</FONT><FONT
  42  color="#0000BB">5</FONT><FONT color="#007700">);
  43  <BR></FONT><FONT color="#0000BB">$bplot&nbsp;</FONT><FONT color="#007700">
  44  =&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
  45  color="#0000BB">$datay</FONT><FONT color="#007700">);
  46  <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
  47  color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
  48  $bplot</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
  49  </FONT></CODE></DIV></P>
  50  <P> If you compare this to the previous line examples you can see that
  51   the only change necessary was that instead of creating a new line plot
  52   (via the new LinePlot(...) call) we used the statement new <A href="../ref/BarPlot.html#_C_BARPLOT">
  53   BarPplot().</A></P>
  54  <P> The other change we should do is to make sure the X-axis have an
  55   text-scale (it is perfectly fine to use a linear X-scale but in most
  56   cases this is not the effect you want when you use a bar graph, see
  57   more below). With this two simple change we will now get a bar graph as
  58   displayed in the following image
  59  <!--?
  60  Example('example18','A very simple bar graph');
  61  ?-->
  62   You can of course modify the appearance of the bar graph. So for
  63   example to change the fill color you would use the <A href="../ref/BarPlot.html#_BARPLOT_SETFILLCOLOR">
  64   BarPlot::SetFillColor()</A> method. Making this small change to the
  65   previous example would give the expected effect as can be seen in the
  66   next example.
  67  <!--?
  68  Example('example19','A very simple bar graph with changed fill color');
  69  ?-->
  70  <DIV class="note"><B>Note:</B> You should note from the previous two
  71   graphs that slight change in appearance for the X-scale. The bar graphs
  72   gets automatically centered between the tick marks when using as text
  73   x-scale. If you were to use a linear scale they would instead start at
  74   the left edge of the X-axis and the X-axis would be labeled with a
  75   linear scale. As is illustrated in the (small) example below.</DIV><DIV class="example">
  76  <BR> <A href="exframes/frame_example19.1.html" target="blank"><IMG border="0"
  77  HEIGHT="100"  src="img/example19.1.png" WIDTH="260"></A>
  78  <BR><B>Figure 29:</B> A small example with a bar graph using a linear
  79   X-scale <A href="exframes/frame_example19.1.html" target="blank">[src]</A>
  80  &nbsp;
  81  <P></P>
  82  </DIV></P>
  83  <P></P>
  84  <HR NOSHADE>
  85  <A HREF="toc.html">Contents</A>
  86  <A HREF="8117Addingplotmarkstoalineplot.html">Previous</A>
  87  <A HREF="821Adjustingthewidthofthebars.html">Next</A>
  88  </BODY>
  89  </HTML>