Amchart, The Best Of Free Chart Script, Manual

Choosing Chart Script 

When need to apply chart to our web page, we will meet many choiches.
We could take the free and commercial script.

Example of free script :
1. Google Chart : https://developers.google.com/chart
2. Amchart : http://www.amcharts.com/download/

Commercial Script :
1. Highcharts : http://www.highcharts.com/

I recommend to choose amchart, since it has awesome appereance and unlimitedly free (but you can buy it if you like). The only thing that you need to do to get amchart free is to keep their credit.

Amchart Feature

Sample of chart type

Amchart support many type of chart, such as line, bar, piechart and etc.
It also has embended tootips that can be easily removed. You also can use (or not use) bullet for each of data point.

Zoom Utility

You can also use image as background, or just colour.
You can choose line/bar/pie colors.
You can also add "image export button".

You can use data-zoom utility, this tool will make user able to show more detail data.
You can also use enable-disable data line.

Downloading Script 

1. Just visit this page : http://www.amcharts.com/download/
2. Select between 6 amchart product. Choose the "javascript chart", because it is the one that I explain in here. Donload it.
3. Extract it on your PC. Choose between chart sample  provided in folder "samples". You'll find one that really suitable for you.
4. If you want to follow my guide, please choose "line With Reversed Value Axis". It has the X-axis on top, but you just need to comment a line on the script when need it to bottom.

Using Amchart

It is really easy.
1. Include the script : <script src="amcharts/amcharts.js" type="text/javascript"></script>
2. Supply the data to amchart.
  <script type="text/javascript">
            var chart;

            var chartData = [{
                year: 1930,
                italy: 1,
                germany: 5,
                uk: 3
            }, {
                year: 1934,
                italy: 1,
                germany: 2,
                uk: 6
            }, { and so on...

   If you see above script, the variable "chartData" is an java-style array.
 
   I need to warn you that the data is not has the same purpose..
   Data "Italy", "Germany" and "uk" is chart-line data, while "year" will act as the x-axis.
 
   Where is the y-axis? You don't need it. The y-axis will be generated from those 3 chart-line data.
 
   If you following my sample, it seem that I will draw a 3 line chart, right?
    Actually not, because you can just use one of them if you like..
    or may be you will need to use multi-axis chart.. You may just use any of

Jquery Load Content From One Source To One or Multiple Elements

Why Jquery Load?

1. To make page load faster. Heavy data will be loaded by jquery. Web page will look more responsible.
2. When we need to load data from other website.

How to jquery load (from our own website or from other website)

You can use load() or get() function for this purpose.
You can use one of these samples.
 Example (Loading data to a page element with id “satuduatiga”) :
 1. $(document).ready(function() { $(“#satuduatiga”).load(“http://the-complete-url.com/”); });
 2. $(document).ready(function() { $.get(“http://the-complete-url.com/”, function(nameofdata){ $(“#satuduatiga”).html(nameofdata); });

 How to grab data from a source then distribute it to multiple elements?
 In here I grab data from a webpage, split it ( same as explode() in PHP) to 3 values then insert it to element with ids : tab1,tab2 and tab 3.
The webpage that providing data separate it with “###”.

 $(document).ready(function() {
    $.get(‘http://mysite.com/ticket/getdashboarddata’; ‘, function(data) {
          var $response = data.split(‘ ### ‘);
           var $satu = $response[0];
           var $dua = $response[1];
           var $tiga = $response[2];
      $(“#tab1″).html($satu);
     $(“#tab2″).html($dua);
     $(“#tab3″).html($tiga); },’text’); });

val() or html() ?

The thing that make me lost some times is difference between val() and html().

–> val() is used to give (and get) data to an input value (input text, textarea etc).
–> html() is used to give (and get) data to any html element that is not input value (div, span, table and etc).

Preloader

What should you put on the web page as default value (jquery has not loaded)? Probably you can download one of loading image from webpagebynumber.com and put it on your webpage : http://webpagebynumbers.com/116-free-loading-gif-animations



Please leave comment when you meet difficulties.