jqPlot series labels not displaying

StackOverflow https://stackoverflow.com/questions/22772068

  •  25-06-2023
  •  | 
  •  

Question

I'm copying the example code directly from the first example on this this web page: http://www.jqplot.com/tests/bar-charts.php

When I run the code, the series labels are not nicely displayed on the right of the screen as they are in the example. They are written in plain text and dropped on the left side of the chart, and overlapping the chart. Anyone know if I am missing something here:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Chart Testing</title>
            <script type="text/javascript" charset="utf-8"     src="/DataTables/media/js/jquery-1.10.2.js"></script>
            <script type="text/javascript" src="/jqPlot/jquery.jqplot.min.js"></script>
            <script type="text/javascript" src="/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
            <script type="text/javascript" src="/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
            <script type="text/javascript" src="/jqPlot/plugins/jqplot.pointLabels.min.js"></script>

    </head>
<div id="chart1" style="width:600px; height:250px;"></div>

</html>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var s1 = [200, 600, 700, 1000];
    var s2 = [460, -210, 690, 820];
    var s3 = [-260, -440, 320, 200];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['May', 'June', 'July', 'August'];

    var plot1 = $.jqplot('chart1', [s1, s2, s3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true}
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        }
    });
});
</script>
Was it helpful?

Solution

You need to include the jqPlot CSS files on the page

They should be in the ZIP file you downloaded from jqPlot site.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top