Highcharts - SPLessons

Highcharts Line Charts

Chapter 9

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts Line Charts

Highcharts Line Charts

shape Introduction

Highcharts line charts are used to draw line or spline charts and are represented by a series of datapoints connected with a straight line. Line charts are used to visualize data that changes frequently. This chapter explains about Highcharts Line Charts and its types.

Line charts

shape Description

The Highcharts Line Charts are used to represent the given variable data in a line format indicating with markers. Both large and small data points can be represented using line charts.

A particular data can be highlighted by customizing the markers. And, the controls like order of rendering and thickness of a line can be controlled in line charts.

Zooming and panning are supported by Highcharts Line Charts and are useful to view a picture or large number of data points.

shape Conceptual
figure

 Below image represents some data in line chart.

Types of line charts.

shape Description

Following are various types of line charts that can be represented using Highcharts.

Basic line charts

shape Description

Basic line charts are used to represent the given data point series in a line format. Usually the line charts are used to view the data that changes over time.

shape Example

Below example demonstrates how to create a basic line chart using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Basic line chart</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
		subtitle: {
            text: 'World Climate'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Asia',
            data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, 27.3, 25.1, 21.6, 17.2, 13.5]
        }, {
            name: 'North America',
            data: [-2.7, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
        }, {
            name: 'South America',
            data: [24, 24.1, 24, 23.3, 22.4, 21.5, 21.4, 21.9, 22.4, 23.1, 23.5, 23.8]
        }, {
            name: '	Africa',
            data: [20, 20.9, 22.1, 23, 23.7, 23.9, 23.9, 24.1, 24, 23.3, 21.7, 20.2]
        },{
            name: '	Australia',
            data: [20, 20.9, 22.1, 23, 23.7, 23.9, 23.9, 24.1, 24, 23.3, 21.7, 20.2]
        },{
            name: '	Europe',
            data: [-2.7, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
        },{
            name: '	Antarctica',
            data: [-12.8, -20.4, -29.7, -33.9, -35.4, -35.4, -37, -37.3, -36.3, -30.4, -20.4, -12.9]
        }]
    });
});
</script>
</body>
</html>

Ajax loaded data, clickable points

shape Description

The Ajax data can be loaded and represented in the form of a line chart by using the following script tag.

<script src=”http://code.highcharts.com/modules/data.js”></script>

Add the above script tag to the header section of the html page.

shape Example

Below code explains creating a line chart by importing Ajax data which shows the number of daily visitors to a page.

<!DOCTYPE html>
<html>
<head>
<title>Ajax loaded data, clickable points</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
   <script src="http://code.highcharts.com/highcharts-more.js"></script>    
   <script src="http://code.highcharts.com/modules/data.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    // Get the CSV and create the chart
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
        $('#container').highcharts({
            data: {
                csv: csv
            },
            title: {
                text: 'Daily visitors'
            },
            xAxis: {
                tickInterval: 7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },
            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],
            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },
            tooltip: {
                shared: true,
                crosshairs: true
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (e) {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: e.pageX || e.clientX,
                                        y: e.pageY || e.clientY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                                        this.y + ' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: 'All visits',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New visitors'
            }]
        });
    });
});
</script>
</body>
</html>

With data labels

shape Description

Data labels can be displayed for each data point values by setting plotOption.dataLables to true.

shape Example

Below example demonstrates how to create a line chart with data labels using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>With data labels</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: 'World Climate'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'Asia',
            data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, 27.3, 25.1, 21.6, 17.2, 13.5]
        }, {
            name: 'North America',
            data: [-2.7, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
        }, {
            name: 'South America',
            data: [24, 24.1, 24, 23.3, 22.4, 21.5, 21.4, 21.9, 22.4, 23.1, 23.5, 23.8]
        }, {
            name: '	Africa',
            data: [20, 20.9, 22.1, 23, 23.7, 23.9, 23.9, 24.1, 24, 23.3, 21.7, 20.2]
        }]
    });
});
</script>
</body>
</html>

Spline with inverted axes

shape Description

The chart can be represented with Spline by giving the chart.type as spline and the axes can be inverted by setting chart.inverted to true.

shape Example

Below example demonstrates how to create a chart with spline and invert the axes using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Spline with inverted axes</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline',
            inverted: true
        },
        title: {
            text: 'Monthly Average Temperature of Asia'
        },
        subtitle: {
            text: 'Climate conditions'
        },
        xAxis: {
            reversed: false,
            title: {
                enabled: true,
                text: 'Altitude'
            },
            labels: {
                formatter: function () {
                    return this.value + 'km';
                }
            },
            maxPadding: 0.05,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            },
            lineWidth: 2
        },
        legend: {
            enabled: false
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: '{point.x} km: {point.y}°C'
        },
        plotOptions: {
            spline: {
                marker: {
                    enable: false
                }
            }
        },
        series: [{
            name: 'Temperature',
            data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, 27.3, 25.1, 21.6, 17.2, 13.5]
        }]
    });
});
</script>
</body>
</html>

Spline with symbols

shape Description

Different symbols or images, known as markers, can be shown while representing a line chart using the property marker.symbole.

shape Example

Below example demonstrates how to create symbols on spline using the CDN access for both the Highchars and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Spline with symbols</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: 'Asia',
            marker: {
                symbol: 'square'
            },
            data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, {
                y: 27.3,
                marker: {
                    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
                }
            }, 25.1, 21.6, 17.2, 13.5]

        }, {
            name: 'North America',
            marker: {
                symbol: 'diamond'
            },
            data: [{
                y: -2.7,
                marker: {
                    symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
                }
            }, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
        }]
    });
});
</script>
</body>
</html>

Spline with plot bands

shape Description

User can mention the plot band ranges for the given data set by using the property yAxis.plotBands.

shape Example

Below example demonstrates how to create a chart that displays the plot bands for given data set.

<!DOCTYPE html>
<html>
<head>
<title>Spline with plot bands</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Wind speed'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            }
        },
        yAxis: {
            title: {
                text: 'Wind speed (m/s)'
            },
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            alternateGridColor: null,
            plotBands: [{ // Light air
                from: 0.3,
                to: 1.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Light air',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Light breeze
                from: 1.5,
                to: 3.3,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Light breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Gentle breeze
                from: 3.3,
                to: 5.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Gentle breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Moderate breeze
                from: 5.5,
                to: 8,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Moderate breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Fresh breeze
                from: 8,
                to: 11,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Fresh breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Strong breeze
                from: 11,
                to: 14,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Strong breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // High wind
                from: 14,
                to: 15,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'High wind',
                    style: {
                        color: '#606060'
                    }
                }
            }]
        },
        tooltip: {
            valueSuffix: ' m/s'
        },
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 3600000, // one hour
                pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
            }
        },
        series: [{
            name: 'Hestavollane',
            data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]

        }, {
            name: 'Vik',
            data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
});
</script>
</body>
</html>

Logarithmic axis

shape Description

Huge Volumes of data can be represented using the logarithmic axis. Usually the logarithmic axis is used to show the data like Light intensity, and earthquake.

shape Example

Below example demonstrates the simple code for creating a Logarithmic axis chart using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({

        title: {
            text: 'Logarithmic axis'
        },

        xAxis: {
            tickInterval: 1
        },

        yAxis: {
            type: 'logarithmic',
            minorTickInterval: 0.1
        },

        tooltip: {
            headerFormat: '<b>{series.name}</b><br />',
            pointFormat: 'x = {point.x}, y = {point.y}'
        },

        series: [{
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
            pointStart: 1
        }]
    });
});
</script>
</body>
</html>

Summary

shape Key Points

  • The line charts are used to view the data of different time intervals.
  • Highcharts provide different options for a user to create an attractive and professional line charts.
  • Line charts support panning, animation, exporting images and zooming.

shape Programming
Tips

  • Give the chart type as line in the chart.type option.
  • Add the JavaScript files to the header section of the HTML page for creating a chart.
  • Ensure that all the chart options or settings are correct before running the application.
  • Using CDN access for both jQuery and Highcharts is an easy way for end-user to create Highcharts.