Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
200 views
in Technique[技术] by (71.8m points)

Highchart from CSV file with JavaScript

I made a JavaScript function that makes a Highchart, reading from a CSV file.

<script>
function Showgraph(){
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'line'
    },
    title: {
        text: 'Measurement data'
    },
    xAxis: {
        categories: [],
        title: {
            text: 'Measurement number'
            },
            labels: {
                enable: false,
            y:20, rotation: -45, allign: 'right'
            }
    },
    yAxis: {
        title: {
            text: 'Retro Reflection'
        }
    },
    series: []
};

$.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('
');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                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) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
})
}
</script>

The CSV file where the x are numbers.

Categories,xxx,
0.2,xxx,
0.33,xxx,
0.5,xxx,
0.7,xxx,
1.0,xxx,
1.5,xxx,
2.0,xxx,

I would then like to remove the value: Categories, xxx, from the CSV file and modify the JavaScript function so that it still works but the chart doesn't show any values on the X-axis.

The new CSV file

0.2,xxx,
0.33,xxx,
0.5,xxx,
0.7,xxx,
1.0,xxx,
1.5,xxx,
2.0,xxx,

Basically to make a Highchart from the last that CSV file.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Use this parser:

$.each(lines, function(lineNo, line) {
    var items = line.split(',');


        var series = {
            data: []
        };
        $.each(items, function(itemNo, item) {
                series.data.push(parseFloat(item));
        });

        options.series.push(series);


});

And remove a categories: [] from xAxis options.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...