jqPlot Examples Baseline

This particular fiddle is setup so that basic jqPlot examples can be created. It's, at this point, a generic template setup in a state that will allow a simple fork to get you up and running faster.

by MarmiK

HTML

<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.cursor.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pieRenderer.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css">
<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/examples/syntaxhighlighter/scripts/shCore.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/examples/syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/examples/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.highlighter.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/examples/example.min.js"></script>
<!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/deploy/dist/excanvas.js"></script>
<![endif]-->
<div id="chart1b" style="width: 400px; height: 260px; position: relative;" class="jqplot-target">
    
</div>
<button class="jqplot-image-button">View Plot Image</button>
<div class="jqplot-image-container" style="display: inline-block;">
    <div class="jqplot-image-container-header">Right Click to Save Image As...<a class="jqplot-image-container-close" href="#">Close</a>
    </div>
    <div class="jqplot-image-container-content">
        <img...

JavaScript

$(document).ready(function () {

    var l2 = [11, 9, 5, 12, 14];
    var l3 = [4, 8, 5, 3, 6];
    var l4 = [12, 6, 13, 11, 2];


    var plot1b = $.jqplot('chart1b', [l2, l3, l4], {
        stackSeries: true,
        showMarker: false,
        seriesDefaults: {
            fill: true
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]
            }
        }
    });

    $('#chart1b').bind('jqplotDataHighlight',

    function (ev, seriesIndex, pointIndex, data) {
        $('#info1b').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
    });

    $('#chart1b').bind('jqplotDataUnhighlight',

    function (ev) {
        $('#info1b').html('Nothing');
    });
});


$(document).ready(function () {
    var l5 = [4, -3, 3, 6, 2, -2];
    var plot1c = $.jqplot('chart1c', [l5], {
        stackSeries: true,
        showMarker: false,
        seriesDefaults: {
            fill: true,
            fillToZero: true,
            rendererOptions: {
                highlightMouseDown: true
            }
        }
    });

    $('#chart1c').bind('jqplotDataClick',

    function (ev, seriesIndex, pointIndex, data) {
        $('#info1c').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
    });
});



$(document).ready(function () {
    var l6 = [11, 9, 5, 12, 14, 8, 7, 9, 6, 11, 9, 3, 4];
    var l7 = [4, 8, 5, 3, 6, 5, 3, 2, 6, 7, 4, 3, 2];
    var l8 = [12, 6, 13, 11, 2, 3, 4, 2, 1, 5, 7, 4, 8];

    var ticks = [
        [1, 'Dec 10'],
        [2, 'Jan 11'],
        [3, 'Feb 11'],
        [4, 'Mar 11'],
        [5, 'Apr 11'],
        [6, 'May 11'],
        [7, 'Jun 11'],
        [8, 'Jul 11'],
        [9, 'Aug 11'],
        [10, 'Sep 11'],
        [11, 'Oct 11'],
        [12, 'Nov 11'],
        [13, 'Dec 11']
    ];


    plot2 = $.jqplot('chart2', [l6, l7, l8], {
        stackSeries: true,
        showMarker:...