<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="charset=utf-8;"/>
    <script src="../../lib/jquery-1.8.0.min.js"></script>
    <script src="../../dist/jui.js"></script>
</head>
<body >

<div id="chart"></div>

<script id="script_code">
    jui.ready([ "chart.builder" ], function(chart) {

        chart("#chart", {
            icon: {
                path: "../../img/icon-list"
            },
            width: 400,
            height : 400,
            axis : [
                {
                    data : [
                        { name : 2, value : 15, etc: 10 },
                        { name : -15, value : -35, etc: 10 },
                        { name : 8, value : 10, etc: 10 },
                        { name : 18, value : 5, etc: 10 }
                    ],
                    y : {
                        domain : [ "week1", "week2", "week3", "week4" ],
                        color : 1,
                        orient : 'right',
                        line : true
                    },
                    x : {
                        type : "range",
                        domain : [ -40, 60 ],
                        step : 6,
                        line : "rect" // dashed with gradient
                    }
                }

            ],
            widget : [
            	{
                    type : 'title',
                    text: "test",
                    orient : "center",
                    align: "start"
                },
            	{ type : 'legend' },
                {
                    type : 'tooltip',
                    format : function(k, v) {
                        return this.icon("gear") + " " + v;
                    }
                }
            ],
            brush : {
                type : 'bar',
                size : 15,
                target : ['name', 'value', 'etc' ],
                innerPadding : 10,
                display : "all",
                activeEvent : "click",
                colors : [ 5, 6, 7 ]
            },
            style : {
                barBorderWidth : 1,
                barBorderColor : "black",
                barBorderOpacity : 0.3
            }
        });
	})
</script>

</body>
</html>