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

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

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)


  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.         <title>Senior Project Timur Aykut YILDIRIM - IH Technology</title>
  6.         <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  7.         <link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/normalize.css">
  8.         <link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/result-light.css">
  9.         <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
  10.         <script type='text/javascript'>
  11.             var serviceDataURL = "http://78.46.106.130:83/get_item_data_ios?generic=";
  12.             
  13.             function setDictionary(x){
  14.              return x;
  15.             } // no need for this method
  16.             
  17.             var dict = "{\"line_ids\":[],\"measure\":\"1\",\"db_name\":\"NPI\",\"timeoffset\":433112400000,\"show_total\":true}";
  18.             
  19.             $(function() {
  20.                 $.getJSON(serviceDataURL.concat(dict), function(data) {
  21.                     // Create the chart
  22.                     window.chart = new Highcharts.StockChart({
  23.                         chart : {
  24.                             renderTo : 'container'
  25.                         },
  26.                         navigation: {
  27.                             buttonOptions: {
  28.                                 enabled: false,
  29.                                 width: 60
  30.                         }
  31.                         },
  32.                         rangeSelector : {
  33.                         buttonSpacing: 20,
  34.                         buttonTheme: { // styles for Q,Y,YTD,ALL buttons
  35.                                 fill: 'none',
  36.                                 stroke: 'none',
  37.                                 'stroke-width': 15,
  38.                                 style: {
  39.                                     color: '#039',
  40.                                     fontWeight: 'bold'
  41.                                 },
  42.                                 states: {
  43.                                     hover: {},
  44.                                     select: {
  45.                                         fill: '#039',
  46.                                             style: {
  47.                                                 color: 'white'
  48.                                             }
  49.                                     }
  50.                                 }
  51.                         },
  52.                             selected : 3, // 3=ALL buton at first
  53.                             inputDateFormat: '%Y-%m-%d',
  54.                             inputEditDateFormat: '%Y-%m-%d',
  55.                             buttons:[
  56.                                 {
  57.                                     type: 'month',
  58.                                     count: 3,
  59.                                     text: 'QQ'
  60.                                 },
  61.                 
  62.                                 {
  63.                                     type: 'year',
  64.                                     count: 1,
  65.                                     text: 'YY'
  66.                                 },
  67.                 
  68.                                 {
  69.                                     type: 'ytd',
  70.                                     text: 'YTD'
  71.                                 },
  72.                 
  73.                                 {
  74.                                     type: 'all',
  75.                                     text: 'ALL'
  76.                                 },
  77.                             ]
  78.                         },
  79.                         title : {
  80.                             text : 'My Total Market'
  81.                         },
  82.                         credits: {
  83.                          text: " ",
  84.                          href: " ",
  85.                         },
  86.                         series : [{
  87.                             name : 'Total Market',
  88.                             data : arr,
  89.                             tooltip: {
  90.                                 valueDecimals: 2
  91.                             }
  92.                         }],
  93.                         exporting: {
  94.                         enabled: false
  95.                         }
  96.                     }, function(chart){
  97.                             // apply the date pickers
  98.                             setTimeout(function(){
  99.                                 $('input.highcharts-range-selector').attr('readonly',1); // burda webviewı engelledik
  100.                                 $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
  101.                             },0)
  102.                         });
  103.                 });
  104.                 
  105.             });
  106.             
  107.                 //]]>
  108.         </script>
  109.     </head>
  110.     <body>
  111.         <div id="container" style="height: 500px; min-width: 500px;"></div>
  112.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  113.         <script src="http://code.highcharts.com/stock/highstock.js"></script>
  114.         <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
  115.     </body>
  116. </html>