jqWidgets chart

jqWidgets Negative Column Series Chart

by juErik

HTML

<script src="http://www.jqwidgets.com/public/2.3.1/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/public/2.3.1/jqxchart.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/public/2.3.1/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/public/2.3.1/jqxdata.js"></script>
<div id='container' style="width: 700px; height: 400px;"/>

JavaScript

// jqWidgets Negative Column Series Chart Example
// Copyright(c) 2012
// www.jqwidgets.com
// prepare the data source
var source = [
    {
    "month": "Jan",
    "min": -1.9,
    "max": 3.7},
{
    "month": "Feb",
    "min": -0.9,
    "max": 5.9},
{
    "month": "Mar",
    "min": 0.8,
    "max": 9.8},
{
    "month": "Apr",
    "min": 4.1,
    "max": 13.9},
{
    "month": "May",
    "min": 8.0,
    "max": 18.4},
{
    "month": "Jun",
    "min": 11.3,
    "max": 22.2},
{
    "month": "Jul",
    "min": 13.3,
    "max": 25.3},
{
    "month": "Aug",
    "min": 13.0,
    "max": 24.4},
{
    "month": "Sep",
    "min": 10.3,
    "max": 20.8},
{
    "month": "Oct",
    "min": 6.6,
    "max": 14.9},
{
    "month": "Nov",
    "min": 2.1,
    "max": 8.4},
{
    "month": "Dec",
    "min": -0.5,
    "max": 4.5}
];

// prepare jqxChart settings
var chartSettings = {
    title: "Weather in Geneva, Switzerland",
    description: "Climatological Information about Geneva",
    enableAnimations: true,
    showLegend: true,
    padding: {
        left: 5,
        top: 5,
        right: 5,
        bottom: 5
    },
    titlePadding: {
        left: 90,
        top: 0,
        right: 0,
        bottom: 10
    },
    source: source,
    categoryAxis: {
        text: 'Category Axis',
        textRotationAngle: 0,
        dataField: 'month',
        showTickMarks: true,
        tickMarksInterval: 1,
        tickMarksColor: '#888888',
        unitInterval: 1,
        showGridLines: true,
        gridLinesInterval: 3,
        gridLinesColor: '#888888',
        axisSize: 'auto',
        flip: false
    },
    colorScheme: 'scheme05',
    seriesGroups: [
        {
        type: 'column',
        flip: false,
        valueAxis: {
            unitInterval: 5,
            displayValueAxis: true,
            description: 'Temperature [C]',
            //descriptionClass: 'css-class-name',
            axisSize: 'auto',
            tickMarksColor: '#888888'
        },
        series: [
           ...