CODEWITHSUNDEEP
javascriptcsvhighcharts
reneton
reneton

Reputation: 71

JS Highchart Import CSV data

Hy Guys

I'm new with JS and I've been trying to practise a bit by programming a chart. So far it worked well. I made some Charts with fix data. Now I tried to Import the Chart data from a csv file. Well, it didn't work. I've been reading the whole day the other posts and searched on Google, but I don't have a clou, what I do wrong. Can you pleas help me?

In the x-axis it should display the date and in the y-axis the value.

csv data example:

01.02.2014 00:00:00;0.450 01.02.2014 01:00:00;0.780 01.02.2014 02:00:00;0.746

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>myChart</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var config = {
                chart: {
                    renderTo: 'chart',
                    type: 'line',
                    zoomType: 'xy'
                },
                title: {
                    text: 'TestChart'
                },
                subtitle: {
                    text: 'fix data'
                },
                xAxis: {
                    type: 'datetime',
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Values'
                    },
                    min: 0
                },
                plotOptions: {
                    series: {
                        marker: {
                            enabled: true
                        },
                        step: 'left'
                    }
                },
                legend: {
                    enabled: true,
                    align: 'center',
                    shadow: true
                },
                tooltip: {
                    valueDecimals: 2
                },

                series: []
            };

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

                $.each(lines, function (lineNo, line) {
                    var series = {
                        data: []
                    };
                        var x = line.split(';');
                        var dateAndTime = x[0];
                        var value = x[1];

                        var y = dateAndTime.split(' ');
                        var date = y[0];
                        var time = y[1];

                        var a = date.split('.');
                        var b = time.split(':');

                        var UTCDate = Date.UTC(a[0], a[1], a[2], b[0], b[1], b[2]);

                        config.xAxis.categories.push(UTCDate);
                        series.data.push(parseFloat(value));

                    config.series.push(series);

                });

                chart = new Highcharts.StockChart(config)
            });
        });

    </script>
</head>

<body>
    <script src="../../scripts/highstock.js"></script>
    <script src="../../scripts/exporting.js"></script>

    <div id="chart" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

</body>
</html>

Upvotes: 0

Views: 1562

Answers (2)

reneton
reneton

Reputation: 71

I found the solution. Because I have for each value a given date, I need to create the dataset on my own:

series.data.push([Date.UTC(a[2], a[1], a[0], b[0], b[1], b[2],b[2]),parseFloat(value)]);

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You need to load your csv, parse your dates into timestamps (by i.e Date.UTC() or Date.parse()) and extract y value.

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json

Upvotes: 2

Related Questions