how to enable drawing multiple lines on highstock basic-line graph?

Question

I want to draw multiple line for this type of graph of your library : http://www.highcharts.com/stock/demo/basic-line

I found this sample on internet: http://jsfiddle.net/yildirim_timur/Hb3Q7/

Below you can see my html file. I tried to do couple of things but couldn't make it. How can i make my chart to be able to draw multiple lines as well? (it is for an ipad app project)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Senior Project Timur Aykut YILDIRIM - IH Technology</title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/result-light.css">
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
        <script type='text/javascript'>
            var serviceDataURL = "http://xx.xx.xxx.xxx:83/get_item_data_ios?generic=";

            function setDictionary(x){
                return x;
            } // no need for this method

            var dict = "web service query string will be here";

            $(function() {
                $.getJSON(serviceDataURL.concat(dict), function(data) {
                    // Create the chart
                    window.chart = new Highcharts.StockChart({
                        chart : {
                            renderTo : 'container'
                        },
                        navigation: {
                            buttonOptions: {
                                enabled: false,
                                width: 60
                            }
                        },
                        rangeSelector : {
                            buttonSpacing: 20,
                            buttonTheme: { // styles for Q,Y,YTD,ALL buttons
                                fill: 'none',
                                stroke: 'none',
                                'stroke-width': 15,
                                style: {
                                    color: '#039',
                                    fontWeight: 'bold'
                                },
                                states: {
                                    hover: {},
                                    select: {
                                        fill: '#039',
                                            style: {
                                                color: 'white'
                                            }
                                    }
                                }
                            },
                            selected : 3, // 3=ALL buton at first
                            inputDateFormat: '%Y-%m-%d',
                            inputEditDateFormat: '%Y-%m-%d',
                            buttons:[
                                {
                                    type: 'month',
                                    count: 3,
                                    text: 'QQ'
                                },

                                {
                                    type: 'year',
                                    count: 1,
                                    text: 'YY'
                                },

                                {
                                    type: 'ytd',
                                    text: 'YTD'
                                },

                                {
                                    type: 'all',
                                    text: 'ALL'
                                },
                            ]
                        },
                        title : {
                            text : 'My Total Market'
                        },
                        credits: {
                            text: " ",
                            href: " ",
                        },
                        series : [{
                            name : 'Total Market',
                            data : arr,
                            tooltip: {
                                valueDecimals: 2
                            }
                        }],
                        exporting: {
                            enabled: false
                        }
                    }, function(chart){
                            // apply the date pickers
                            setTimeout(function(){
                                $('input.highcharts-range-selector').attr('readonly',1); // burda webviewı engelledik
                                $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
                            },0)
                        });
                });

            });

                //]]>
        </script>
    </head>
    <body>
        <div id="container" style="height: 500px; min-width: 500px;"></div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    </body>
</html>

Answer 1

Right now you have:

                    series : [{
                        name : 'Total Market',
                        data : arr,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]

So you have just one object inside series. If you want multiple series then should be something like that:

                    series : [{
                        name : 'Total Market I',
                        data : arr_1,
                        tooltip: {
                            valueDecimals: 2
                        }
                    },{
                        name : 'Total Market II',
                        data : arr_2,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]

Edit:

To add multiple series, push them to array:

var mySeries = [];

mySeries.push({
    name : 'Total Market I',
    data : arr_1
});
mySeries.push({
    name : 'Total Market II',
    data : arr_2
});
mySeries.push({
    name : 'Total Market III',
    data : arr_3
});

Then create chart:

series: mySeries

how to enable drawing multiple lines on highstock basic-line graph?

Question

1 answers

solution1
2 ACCPTED 2014-05-29 09:46:49

how to enable drawing multiple lines on highstock basic-line graph?

Question

1 answers

solution1 2 ACCPTED 2014-05-29 09:46:49

solution1
2 ACCPTED 2014-05-29 09:46:49