Plot txt values (Flot charts)
Question
I'm a bit stuck with this issue.
I have a file with the elements to plot separated in columns, as the example that follows:
ID Number Hour Name Mood Seconds Hour2
1 29.1 11:32:37 Tim Good 0954 11:32:34 PM
2 31.9 11:33:19 Tim Fine 1251 11:33:15 PM
3 32.0 11:54:16 Tim Excellent 1897 11:54:12 PM
4 36.6 12:00:43 Time Good 0997 12:00:37 PM
What I want is to be able to extract all these data from a .txt file and store it in variables in order to work with them in an easier way, excluding the first line. Then, what I was trying to do is to plot for example just the Seconds column vs. the Hour one, or the Mood column vs. the Hour one (this one could be more difficult because the mood is a string), all this in FLOT Charts, but I'm not able to do it, as I do not know the right commands to do it and I've looked for them on the internet but I haven't found anything. I did try modifying a file from a Stackoverflow post to see if it works, but the page was just blank. The code used is the following one (head tag is there but the post went nuts when I typed it in here and of course the .js files are placed in the same folder as this code, and so is the datafile.txt file):
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 1. Add JQuery and Highcharts in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- 2. You can add print and export feature by adding this line -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
<script type="text/javascript">
jQuery(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Tiny Tool Monthly Sales'
},
subtitle: {
text: '2014 Q1-Q2'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Sales'
}
},
series: []
};
// JQuery function to process the csv data
$.get('datafile.txt', function(data) {
$.each(data, function(lineNo, line) {
var items = line.split(' ');
// header line contains names of categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
//skip first item of first line
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series);
}
});
//putting all together and create the chart
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
Do you have any idea where it went wrong or how to accomplish it? Thank you all very much!
1 answers
solution1
0 2015-06-25 09:58:59
The $.get() method returns a string and using the $.each() method with a string calls the callback function for each character in the string, not for each line. Change the call to $.each() to this:
$.each(data.split('\n'), function(lineNo, line) {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.