How to make jqPlot work with the bar chart example

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

  •  09-10-2022
  •  | 
  •  

Question

I am trying to run an example from jqPlot. I adapted their code to my page:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Tests</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div>Testing a chart 2</div>

        <script type="text/javascript" src="jqplot.barRenderer.min.js"></script>
        <script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
        <script type="text/javascript" src="jqplot.pointLabels.min.js"></script>

        <script language=javascript type="text/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>

        <div id="chart1" style="height:400px;width:300px; "></div>

        <br><a href="/Test/index.html">Home</a>
    </body>
</html>

Note that I created the div with the chart name chart1, then plugins were added accordingly.

Was it helpful?

Solution

You need to add the main "jqplot" javascript file and not only the plugin files :

<script type="text/javascript" src="jquery.jqplot.js"></script>

Please see working example here

PS : about your Chart2.html file (in your archive)

  1. You have to load files in a precise order : First jquery, then jqplot, and finally jqlot plugins (without any particular order between them).
  2. You have mispelled jqplot file : jquery.jqplot.min.js (don't forget the 'q' letter)
  3. You don't need to load both jquery.jqplot.min.js and jquery.jqplot.js as it is the same content (the difference is in the minification).
  4. Don't forget to load jqplot CSS if you want your graph to be well-displayed.

Thus the correct javascript and css inclusion is :

<script src="jquery.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="jqplot.barRenderer.min.js"></script>
<script src="jqplot.categoryAxisRenderer.min.js"></script>
<script src="jqplot.pointLabels.min.js"></script>
<link href="jquery.jqplot.css" rel="stylesheet" type="text/css">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top