Wijmo - Basic

Wijmo stuff.

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.8.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<h3>Wijmo</h3>

<h4>Accordion</h4>
<div id="accordion">
  <h3>header</h3>
  <div>content</div>
  <h3>header</h3>
  <div>content</div>
  <h3>header</h3>
  <div>content</div>
</div>

<h4>BarChart</h4>
<div id="barchart" style="width: 400px; height: 600px" />

<h4>Calendar</h4>
<div id="calendar"></div>

<h4>CheckBox</h4>
<label><input id="checkbox" type="checkbox"/> Check me!</label>
    
<h4>DatePager</h4>
<div id="datepager"></div>

<h4>Grid</h4>
<table id="grid">
    <tr><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>2</td><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>3</td><td>3</td></tr>
</table>

CSS

/* change Wijmo widgets font to match bootstrap */
 .ui-widget {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* use auto-width for Wijmo menu items */
 .wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child {
    width: auto;
    min-width: 150px;
}
/* custom back color for Wijmo tooltips*/
 .wijmo-wijtooltip {
    background-color: #fff9d1;
}

JavaScript

$(document).ready(function () {
  $("#accordion").wijaccordion();
  $("#barchart").wijbarchart({
    axis: {
        y: { text: "Total Units" },
        x: { text: "Product" }
    },
    hint: {
        content: function () { return this.data.label + '\n ' + this.y + ''; }
    },
    header: { text: "Console Wars" },
    seriesList: [
        { label: "US", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] }},
        { label: "AUS", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 15130.56] }},
           { label: "AUS1", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 130.56] }},
              { label: "AUS2", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 130.56] }},
                 { label: "AUS3", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 130.56] }},
                    { label: "AUS4", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 130.56] }},
                       { label: "AUS5", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 130.56] }},
        { label: "Japan", data: { x: ['PS3', 'XBOX360', 'Wii'], y: [22.35, 11.50, 10.56] }}
    ],
    seriesStyles: [
        { fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8 },
        { fill: "#ffc73c", stroke: "#ffde43", opacity: 0.8 }
    ],
    seriesHoverStyles: [
        { "stroke-width": "1.5", opacity: 1 },
        { "stroke-width": "1.5", opacity: 1 }
    ]
  });
  $("#calendar").wijcalendar();
  $("#checkbox").wijcheckbox();
  $("#datepager").wijdatepager();
  $("#grid").wijgrid();
});