javascript-csv-data-to-highcharts/index.html at master · jsolenth/javascript-csv-data-to-highcharts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Data to Highcharts</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>

</head>

<body>
    <h1>Example 1</h1>
    <div id="hc1" class="hc1 chart">
      <p>Couldn't load the file. Is the project on a server?</p>
    </div>
    <h1>Example 2</h1>
    <div id="hc2" class="hc2 chart"></div>
    <script type="text/javascript">

        //when on Server htdoc/

        $.ajax({
            type: "GET",
            url: 'csv_example_data.csv',
            // url: 'php_request_script.php',// Use a Serverside script to get Data with Credentials i.e.
            success: function(data) {

                console.log(data);
                $('#hc1').highcharts({
                    chart: {
                        type: 'column' //or spline
                    },
                    data: {
                        csv: data,
                        itemDelimiter: ';',
                        lineDelimiter: '\n'
                    },
                    title: {
                        text: 'Meteomatics CSV Data to Highcharts'
                    },
                    subtitle:{
                      text:'From csv file must be on a server'
                    }
                });
            },
            error: function() {
                console.log('error');
            }
        });

        //For testing local without Server Side
        var csvString = `validdate;t_2m:C;relative_humidity_2m:p
        2017-06-07T13:35:00Z;13.6;56.5
        2017-06-07T16:35:00Z;13.4;60.2
        2017-06-07T19:35:00Z;11;68.4
        2017-06-07T22:35:00Z;8.9;77
        2017-06-08T01:35:00Z;7.4;84.2
        2017-06-08T04:35:00Z;9.1;70.3
        2017-06-08T07:35:00Z;14.3;57.5
        2017-06-08T10:35:00Z;18;56.4
        2017-06-08T13:35:00Z;19.8;53.9
        `
        $('#hc2').highcharts({
            chart: {
                type: 'column' //or spline
            },
            data: {
                csv: csvString,
                itemDelimiter: ';',
                lineDelimiter: '\n'
            },
            title: {
                text: 'Meteomatics CSV Data to Highcharts'
            },
            subtitle:{
              text:'From csv in a string'
            }
        });
    </script>


</body>

</html>