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)
- <!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://78.46.106.130:83/get_item_data_ios?generic=";
-
- function setDictionary(x){
- return x;
- } // no need for this method
-
- var dict = "{\"line_ids\":[],\"measure\":\"1\",\"db_name\":\"NPI\",\"timeoffset\":433112400000,\"show_total\":true}";
-
- $(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>