Spline with Plot Bands Chart Tutorial

Today, We want to share with you Spline with Plot Bands Chart Tutorial.In this post we will show you Spline chart with plot bands using highcharts, hear for How to add plot bands in spline chart using highcharts we will give you demo and example for implement.In this post, we will learn about highcharts add plot line dynamically, with an example.

Spline with Plot Bands Chart Tutorial

There are the Following The simple About highcharts xaxis datetime interval Full Information With Example and source code.

As I will cover this Post with live Working example to develop highcharts line chart example code, so the highcharts plotbands opacity is used for this example is following below.

Highcharts Spline with Plot Bands Chart Example

index.html

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Spline with plot bands chart - www.pakainfo.com</title>
    <script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
    <script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var graphtype = {
                type: 'spline'
            }
            var graphTitle = {
                text: 'Wind speed during two days'
            }
            var graphchildtitle = {
                text: 'May 31 and and June 1, 2045 at two locations in Vik i Sogn, Pipaliya'
            }
            var graphxaxis = {
                type: 'datetime',
                labels: {
                    overflow: 'justify'
                }
            }
            var graphyaxis = {
                title: {
                    text: 'Wind speed (m/s)'
                },
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
                plotBands: [{ // Light air
                    from: 0.3,
                    to: 1.5,
                    color: 'rgba(68, 171, 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, 171, 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, 171, 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, 171, 213, 0.1)',
                    label: {
                        text: 'High wind',
                        style: {
                            color: '#606060'
                        }
                    }
                }]
            }
            var graphtooltip = {
                valueSuffix: ' m/s'
            }
            var graphplotoptions = {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: false
                    },
                    pointInterval: 3698989, // one hour
                    pointStart: Date.UTC(2045, 4, 31, 0, 0, 0)
                }
            }
            var graphseries = [{
                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]
            }]
            var chartnavigation = {
                menuItemStyle: {
                    fontSize: '10px'
                }
            }
                $('#chart-full-content').highcharts({
                    chart:graphtype,
                    title: graphTitle,
                    subtitle: graphchildtitle,
                    xAxis: graphxaxis,
                    yAxis: graphyaxis,
                    tooltip:graphtooltip,
                    plotOptions: graphplotoptions,
                    series: graphseries,
                    navigation: chartnavigation
                });
        });
    </script>
</head>
<body>
    <div id="chart-full-content" style="min-width: 335px; height: 425px; margin: 0 auto"></div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

  Waterfall Chart Tutorial With Examples and Demo

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about highcharts line chart example code.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Spline Chart Updating Each Second Tutorial With Examples
  2.   Area Range Chart Tutorial With Examples
  3.   Donut Chart Tutorial With Examples with demo
  4.   Data Labels Chart Tutorial With Examples
  5.   3D Column with Null and 0 Values Chart Tutorial
  6.   Semi Circle Donut Tutorial With Examples
  7.   Pie with Monochrome Fill Chart Tutorial With Examples
  8.   Bubble Chart Tutorial With Examples with demo
  9.   Stacked Percentage Column Chart Tutorial With Examples
  10.   Basic Column Chart Tutorial With Examples

Leave a Reply

Your email address will not be published. Required fields are marked *