Test Wijmo charting

by bakhshi

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.7.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.js"></script>
<div class="container"> 
        <div class="header"> 
            <h2> 
                Column bar</h2> 
        </div> 
        <div class="main demo"> 
            <!-- Begin demo markup -->
            <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px"> 
            </div> 
            <!-- End demo markup -->
            <div class="demo-options"> 
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div> 
        </div> 
        <div class="footer demo-description"> 
            <p> 
              
            This sample depicts a clustered column bar chart. This is similar to the "Clustered Chart" sample, although the horizontal option of the bar chart is set to false here. 
            </p> 
        </div> 
    </div>

CSS

.wijchart-axis-label tspan:first-child{
    stroke:blue;
}
.wijchart-axis-label tspan{
    stroke:red;
}

JavaScript

$(document).ready(function () { 
            $("#wijbarchart").wijbarchart({ 
                horizontal: false, 
                axis: { 
                    y: { 
                        text: "Total Hardware",
annoMethod:'valueLabels',
                        valueLabels:[' ', 'b', 'c', 'd', 'e', 'f', 'g', 'h']                        
                    }, 
                    x: { 
                        text: "",
                        annoMethod:'valueLabels',
                        valueLabels:["Desktops\nComputers", 'Notebooks\n ', 'aio\n ', 'what\nthe\nhell'],
                       
                    } 
                }, 
                hint: { 
                    content: function () { 
                        return this.data.label + '\n ' + this.y + ''; 
                    } 
                }, 
                header: { 
                    text: "Hardware Distribution"
                }, 
                seriesList: [{ 
                    label: "West", 
                    legendEntry: true, 
                    data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7.5, 2] } 
                }, { 
                    label: "Central", 
                    legendEntry: true, 
                    data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] } 
                }, { 
                    label: "East", 
                    legendEntry: true, 
                    data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] } 
                }] 
            }); 
        });