CODEWITHSUNDEEP
javascripthighcharts
sachinb
sachinb

Reputation: 435

Simple Line Chart using HighChart

I am trying to generate a simple line chart using HighChart. The source code is given below. The challenge is that I am getting my X-Axis and Y-Axis on the screen but the chart itself is missing. When I move the cursor across the screen, I can see the X and Y values displayed on the screen. I have tried to debug the program but I am not able to find a solution. Can someone guide me?

Regards

Sachin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        
        <!--[if IE]>
            <script type="text/javascript" src="../js/excanvas.compiled.js"></script>
        <![endif]-->
        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: 'Pollution Level'
                },
                xAxis: {
                    categories: [''],
                        title: {
                            text: 'Date'
                        }
                },
                yAxis: {
                    title: {
                        text: 'Pollution %'
                    }
                 },
                series: []
            };
            

            $.get('data/graphs/pollution.csv', function(data) {
            window.alert(data);    
            // Split the lines
            var lines = data.split('\n');
            window.alert(lines);
            lines = lines.map(function(line) {
                var data = line.split(',');
                data[1] = parseFloat(data[1]);
                return data;
            });

            window.alert(lines);
            var series = {
                data: lines
            };
            options.series.push(series);

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

    </head>
    <body >
        <div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
            </body>
</html>

Update 1-Mar-2016

I have modified the program as follows. I am still not able to get a line chart. The funny thing is that if I change the type of chart from 'line' to 'column' I can see a chart. Not sure of the problem. Please advise.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        
        <!--[if IE]>
            <script type="text/javascript" src="../js/excanvas.compiled.js"></script>
        <![endif]-->
        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Pollution Level'
                },
                xAxis: {
                    categories: [''],
                        title: {
                            text: 'Date'
                        }
                },
                yAxis: {
                    title: {
                        text: 'Pollution %'
                    }
                 },
               series: [ {
                    plotLines: [{
                            color: '#000000'
                        }],
                       data: []
                    }]
            };
            

            $.get('data/graphs/pollution.csv', function(data) {
            window.alert(data);    
            // Split the lines
            var lines = data.split('\n');
            window.alert(lines);
            var series = {
                      data: [],
                      name: 'serie1'  
            };
            lines = lines.map(function(line) {
                var data = line.split(',');
                if (data[0] != "DATE"){
                    options.xAxis.categories.push(data[0]);
                    data1 = parseFloat(data[1]);
                    series.data.push(parseFloat(data[1]));
                    return data;
                    }
                });
                options.series.push(series);
                var chart = new Highcharts.Chart(options);
            });

    });
</script>

    </head>
    <body >
        <div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
        <?php
        ?>
    </body>
</html>

Upvotes: 0

Views: 131

Answers (1)

mustapha mekhatria
mustapha mekhatria

Reputation: 3909

Be sure you are fetching valid values instead of a string: Please, check this section:

  lines = lines.map(function(line) {
                var data = line.split(',');
                data[1] = parseFloat(data[1]);
                return data;
            });

Q: Could you share your CSV (pollution.csv)?

Thanks for your data: please check the following example The parsing section is:

  for (i = 0; i < lines.length; i++) {
    var items = lines[i].split(',');
    if (i == 0) {
      ctg[0] = items[0];
      ctg[1] = items[1];
    } else {
      dataYAxis.push([(new Date(items[0])).getTime(), parseFloat(items[1])]);
    }
  }

As you can see, I isolated the titles (DATE, LVL) from the data, the next step is to save data in dataYAxis array: date first and data second. I am using 'datetime' in xAxis to show date in xAxis' labels.

Upvotes: 2

Related Questions