日期:2014-05-16  浏览次数:20416 次

Charts JavaScript Tutorials. Part 2. Loading External data.

?

?
?

Saturday, March 12, 2011

amCharts JavaScript Tutorials. Part 2. Loading External data.

?

In this tutorial we’ll produce a simple example of how to load and parse csv data from a file.

First,?download amCharts?package and unzip it. Copy amcharts folder from a package to your working dir. Then go to samples folder and copy lineWithDateBasedData.html to the same working dir. If you open this file with a browser, you won’t see anything – paths to amCharts files should be fixed first. Open lineWithDateBasedData.html with text editor and fix paths (delete ../) to the amcharts.js and serial.js files:

<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>

There is one more path which should be fixed:

chart.pathToImages = "amcharts/images/";

Now, if you open this file, you should see this chart:

?2tut1

Data of this chart is generated html file, so it’s not good for us – we want to load external data.

Lets create a simple text file, called data.txt and add some data to it – first column contains dates and the second one has some numbers. Note, our data is irregular – it has gaps at weekends:

2011-02-23,133034
2011-02-24,122290
2011-02-25,383603
2011-02-28,125285
2011-03-01,118042
2011-03-02,102500
2011-03-03,434047
2011-03-04,422374
2011-03-07,396473
2011-03-08,453142

First column has date and two other columns – some numbers. Save this file to the same folder as lineWithDateBasedData.html file and then go back to the editor with lineWithDateBasedData.html file opened. Delete generateChartData method and also the line where it is called.

Loading data