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 renatevidruska

HTML

<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js"></script>
<script src="     http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<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>
<h1>Boxes alignment problem</h1>
<div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>

JavaScript

var chartData = [
    [
        ['Portfolio Risk', 1]
    ],
    [
        ['Model Risk', 4]
    ],
    [
        ['Recovery Risk', 3]
    ],
    [
        ['Capability Risk', 1]
    ],
    [
        ['Forward flow risk', 5]
    ]
];

var ticks = ['Portfolio Risk', 'Model Risk', 'Recovery Risk', 'Capability Risk', 'Forward flow risk'];

plot2 = $.jqplot('chart1', chartData, {
    seriesColors: ['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {

        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
                angle: 90
            },
            //ticks: ticks

        },
        yaxis: {
            tickOptions: {
                formatString: '%d'
            },
            max: 5,
            min: 0
        }
    },
    legend: {
        show: true,
        placement: 'outside',
        labels: ticks
    },
});