jqplot / examples / prefix.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../src/jquery-1.4.2.min.js"></script>
  <!-- END: load jquery -->
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
  <!-- END: load jqplot -->
  <style type="text/css" media="screen">
    .jqplot-axis {
      font-size: 0.85em;
    div.plot {
        margin-bottom: 70px;
    p {
        margin: 2em 0;
  <script id="example_1" type="text/javascript" language="javascript">$(document).ready(function(){
      $.jqplot.config.defaultTickFormatString = '%d';
			data = [ [25,100], [26,0], [27,100], [28,0], [29,0], [30,300], [31,300]];
			plot1 = $.jqplot('chartdiv', [data], {
			    title: 'test',
				axes: {
					xaxis: {renderer: $.jqplot.CategoryAxisRenderer},
					yaxis: {min:0, tickOptions:{prefix: '$'}}
				seriesDefaults: {
					color: '#F90',
					renderer: $.jqplot.BarRenderer,
					shadow: false
<script type="text/javascript">
        $(document).unload(function() {$('*').unbind(); });

<?php include ""; ?>
<p>Example of the "prefix" axis tick option.  This option adds a prefix to the tick label if and only if no formatString option is specified.  Note that, when no user formatString is specified, linear axes will use the default format string as configured in the $.jqplot.config.defaultTickFormatString property.  By default, this is '%.1f'.  This can be changed and will affect all plots on the page after the point at which it is set.</p>
    <div id="chartdiv" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
    <pre id="code_1" class="code-block"></pre>