SuperPlan(7)TaoBao Winner - UI Highcharts JS and Bootstrap-优快云博客

SuperPlan(7)TaoBao Winner - UI Highcharts JS and Bootstrap

11. HighCharts JS

11.1 Getting Started
We can download the JS file from this URL http://www.highcharts.com/download or Directly from CDN.

Found a very useful website to test the JS, http://jsfiddle.net/. We can also demo and test that on the website.
Here is the simplest demo html template
<html>
<head>
<title>HighCharts Starting</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width:100%; height:400px;"></div><script>var options = { chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 1, 4] }, { name: 'John', data: [5, 7, 3] }] }$(function () { $('#container').highcharts(options);});</script></body>

</html>

And Learned how to set options. Just do it as JSON format.
var options = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 1, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}

$(function () {
$('#container').highcharts(options);
});

All in the future, I can play on this screen http://jsfiddle.net/luohuazju/qLRGD/

I just play with it a little bit, the detail are here http://docs.highcharts.com/#home.

12. BootStrap with Version 2.3.2
12.1 HTML Template
I just use static html page to play with bootstrap, and I need to investigate the detail of all the CSS.
Here is the Header
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Grid System</title>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<link href="../css/lib/bootstrap/2.3.2/bootstrap.min.css"rel="stylesheet"media="screen">
<link href="../css/lib/bootstrap/2.3.2/bootstrap-responsive.min.css"rel="stylesheet"media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../js/lib/bootstrap/2.3.2/bootstrap.min.js"></script>

</head>
…snip…

The most import part is that we need to using media="screen".

12.2 Grid System
<div class="row">
<div class="span1">Span1</div>
</div>

We can have span1 to span12. And we also have offset1 to offset12.

Sometimes, we can use nesting row and class can be changed to row-fluid
<div class="row-fluid">
<div class="span9">
span 9 column
<div class="row-fluid">
<div class="span6">Span 6</div>
<div class="span3">Span 3</div>
</div>
</div>

12.3 Layout and Responsive
<div class="container">
</div>

<div class="container-fluid">
<div class="row-fluid">
<div class="span2"> Sidebar </div>
<div class="span10"> Body Content </div>
</div>
</div>

Responsive
<div class="span2">
<div class="hidden-desktop">Hidden Desktop</div>
<div class="hidden-tablet">Hidden Tablet</div>
<div class="hidden-phone">Hidden Phone</div>
</div>
<div class="span10">
<div class="visible-desktop">visible-desktop</div>
<div class="visible-tablet">visible-tablet</div>
<div class="visible-phone">visible-phone</div>

</div>

When I resize the browser, I can test the look and feel. That is amazing.

continue...

13. BackBone
come soon...

References:
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://backbonejs.org/#introduction

http://twitter.github.io/bootstrap/scaffolding.html

high charts
http://www.highcharts.com/