reference pdf :
http://eleventyone.done.hu/OReilly.JavaScript.The.Good.Parts.May.2008.pdf
This is driven by a group of pioneers such as Douglas Crockford who is responsible for transforming the language for educating and making JavaScript a better language with his book JavaScript: The Good Parts, O'Reilly Media / Yahoo Press; and both Sam Stephenson, creator of Prototype JavaScript library (http://www.prototypejs.org), and John Resig, creator of JQuery library (http://jquery.com), who brought JavaScript into a
framework for building more complicated web frontend software
Highcharts uses jQuery as the default framework implementation, hence it only requires users to load the jQuery library before Highcharts.
To use Highcharts under the MooTools environment, users simply do the following:
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootoolsyui-
compressed.js"></script>
<script type="text/javascript" src="Highcharts-2.2.2/js/adapters/mootools-adapter.js">
</script>
<script type="text/javascript" src="Highcharts-2.2.2/js/highcharts.js"></script>
And to use Highcharts under Prototype, users need to do the following:
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="Highcharts-2.2.2/js/adapters/prototype-adapter.js">
</script>
<script type="text/javascript" src="Highcharts-2.2.2/js/highcharts.js"></script>
Once the chart object is created, the graph is displayed in the browser. Within this object specifier, there are major components corresponding to the structure of the chart.
var chart = new Highcharts.Chart({
chart: {
...
},
title: '...'
...
});
The renderTo option instructs Highcharts to display the graph onto the HTML <div> element with 'container' as the ID value, which is defined in the HTML <body> section. The type option is set to the default presentation type as 'spline' for any series data, as follows:
chart: {
renderTo: 'container'
, type: 'spline'
}
The options in yAxis are to assign the title of the y axis and set the minimum
possible value to zero
yAxis: {
title: {
text: 'Percentage %'
},
min: 0
},
The categories option in the xAxis property contains an array of x axis labels
for each data point. The best compromise is to print every third label,
(tickIntervals: 3) which causes the labels to be nicely spaced out from each other
xAxis: {
categories: [ 'Jan 2008', 'Feb', .... ],
tickInterval: 3
},
The plotOptions property is to control how each series is displayed according to
its type (line, pie, bar, and so on).
plotOptions: {
series: {
lineWidth: 2
}
},
The series property is the heart of the whole configuration object, which defines all
the series data. It is an array of the series configuration objects
The data is an array of y axis values, which has the same length as the xAxis, categories array to form (x,y) data points.
series: [{
name: 'Internet Explorer',
data: [54.7, 54.7, 53.9, 54.8, 54.4, ... ]
}, {
name: 'FireFox',
data: [36.4, 36.5, 37.0, 39.1, 39.8, ... ]
}, {
For the references of all the configurations, go to http://api.highcharts.com/highcharts
Highcharts displays have three different areas—spacing area, labeling area, and plot area. The plot area is the area inside the inner rectangle that contains all the plot graphics. The labeling area is the area where labels such as title, subtitle, axis title, legend, and credits go around the plot area, so that it is between the edge of the plot area and the inner edge of the spacing area. The spacing area is the area between the container border and the outer edge of the labeling area.
chart label positioning : Automatic layout , Fixed layout
chart: {
renderTo: 'container',
type: ...
marginTop: 10,
marginRight: 0,
spacingLeft: 30,
spacingBottom: 0
},
from learning
