Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Rendering Lines one at a time...

    I'm using a graph plugin from highcharts.com and i have a little question about the series on the graph.

    When the graph loads up it has each series selected and displayed on the graph.
    How can I have the graph to load up with just one of the series selected and all of the other series unselected?

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>Highcharts Example</title>
    
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    		<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Round Score',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Score My Round',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Score'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y +'°C';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Driver',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '3 Wood',
                    data: [-0.2, 0.8, 5.7, 11.3, 7.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }, {
                    name: '5 Wood',
                    data: [-0.9, 0.6, 3.5, 5.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                    name: 'Hybrid',
                    data: [6.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    				 }, {
                    name: '3 iron',
                    data: [4.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 5.8]
    				 }, {
                    name: '4 iron',
                    data: [2.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 6.8]
    				 }, {
                    name: '5 iron',
                    data: [1.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 7.8]
    				 }, {
                    name: '6 iron',
                    data: [3.8, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 8.8]
    				 }, {
                    name: '7 iron',
                    data: [3.6, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 9.8]
    				 }, {
                    name: '8 iron',
                    data: [3.5, 4.1, 5.5, 1.5, 18.9, 13.2, 16.0, 16.8, 14.6, 10.4, 6.4, 4.4]
    				 }, {
                    name: '9 iron',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    				 }, {
                    name: 'P Wedge',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    				 }, {
                    name: 'S Wedge',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
        });
        
    });
    		</script>
    	</head>
    	<body>
    <script src="../../js/highcharts.js"></script>
    <script src="../../js/modules/exporting.js"></script>
    
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    
    	</body>
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Probably something like the following but I can't test it:

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>Highcharts Example</title>
    
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    		<script type="text/javascript">
    $(function () {
        var allSeries = [{
                    name: 'Driver',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '3 Wood',
                    data: [-0.2, 0.8, 5.7, 11.3, 7.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }, {
                    name: '5 Wood',
                    data: [-0.9, 0.6, 3.5, 5.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                    name: 'Hybrid',
                    data: [6.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    				 }, {
                    name: '3 iron',
                    data: [4.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 5.8]
    				 }, {
                    name: '4 iron',
                    data: [2.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 6.8]
    				 }, {
                    name: '5 iron',
                    data: [1.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 7.8]
    				 }, {
                    name: '6 iron',
                    data: [3.8, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 8.8]
    				 }, {
                    name: '7 iron',
                    data: [3.6, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 9.8]
    				 }, {
                    name: '8 iron',
                    data: [3.5, 4.1, 5.5, 1.5, 18.9, 13.2, 16.0, 16.8, 14.6, 10.4, 6.4, 4.4]
    				 }, {
                    name: '9 iron',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    				 }, {
                    name: 'P Wedge',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    				 }, {
                    name: 'S Wedge',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }];
        
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Round Score',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Score My Round',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Score'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y +'°C';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: new Array(allSeries[0])  // the first one
            });
        });
        
    });
    		</script>
    	</head>
    	<body>
    <script src="../../js/highcharts.js"></script>
    <script src="../../js/modules/exporting.js"></script>
    
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    
    	</body>
    </html>
    You then need to use the graph's API to replace, or add, other series from the array.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •