GIgajam Chart Test

by teknohippy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.categories.min.js"></script>
<div id="placeholder" class="demo-placeholder" style="width: 600px; height: 200px;"></div>

CSS

body
{
    font-family: Verdana;
    font-size: smaller;
}

JavaScript

var uploads = [
    [51, 7],
    [53, 1],
    [3, 3],
    [4, 8],
    [5, 14],
    [6, 16],
    [7, 9],
    [8, 5],
    [9, 13],
    [10, 8]
];
var points = [
    [51, 1114],
    [53, 33],
    [3, 244],
    [4, 929],
    [5, 2139],
    [6, 2019],
    [7, 1067],
    [8, 498],
    [9, 3275],
    [10, 432]
];

var data = [{
    data: uploads,
    label: "Uploads",
    bars: {
        show: true,
        barWidth: 0.5,
        align: "center",
        fill: 1
    },
    color: "#ff6a00"
}, {
    data: points,
    label: "GJ Points",
    yaxis: 2,
    color: "#1790cb",
    points: { symbol: "circle", fillColor: "#1790cb", show: true },
    lines: { show: true }
}];


$.plot("#placeholder", data, {
    xaxes: [{
        mode: "categories"
    }],
    yaxes: [{
        min: 0
    }, {
        position: "right"
    }],
    legend: {
        position: "nw"
    }
});