Строка в Linechart со значениями, взятыми из текстового поля

Question

Я боролся с моим большим проектом с течением времени, но благодаря вашей помощи здесь, в stackoverflow, мне удалось сделать 90% работы очень быстро. Спасибо за это, вы УДИВИТЕЛЬНЫ!

Теперь у меня есть моя последняя проблема, а именно, построение одной строки, взятой из значений текстовой области. Вот мой код:

$(function() { 
var chart; 
var params = getParams(document.location.search); 
var title= "Graphical representation"; 
var subtitle= "Options"; 

var yaxis= "Increasing in %"; 

var xvalues = []; 
if(params.hasOwnProperty("xvalues")) 
{ 
     if(params.xvalues != "") 
     { 
     xvalues = CSVToArrayStr(params.xvalues, ','); 
     } 
} 
else 
{ 
    params.xvalues= [ '2007', '2008', '2009', '2010']; 
    xvalues = CSVToArrayStr(params.xvalues, ','); 
} 


// Drawing the first sample 
    var series = Array(); 
var sample = {}; 
sample.name = 'Sample1'; 
sample.data = [1.6, 3.9, 3.3, 4.0]; 
series.push(sample); 

//Calculating the 2nd sample using math formula 
    function calc(data) { 
    ret = []; 
    for(var i = 0; i < data.length; i++) { 
    data[i] = parseFloat(data[i]); 
    ret[i] = (3.5 + data[i] + 0.5 * (data[i] - 3)); //parse the string to float 
    ret[i] = Math.round(ret[i] * 100)/100; // rounding to 2 decimals 
} 
    return ret; 
} 

//Drawing the second sample according to the math formula 
var stapka = {}; 
stapka.name = 'Sample2'; 
stapka.data = calc(sample.data); // - calculated data 
series.push(stapka); 


//Taking value from the textarea 
     $.valHooks.textarea = { 
    get: function(elem) { 
    return elem.value.replace(/\r?\n/g, "\r\n"); 
    } 
}; 


//Transfering values from the textarea to array 
var sample3 = {}; 
sample3.data = $('textarea').val(); 
sample3.data = sample3.data.split(","); 



if(params.hasOwnProperty("values_serie1")) { 
    if(params.values_serie1 != "") 
    { 

     series = getSeries(params); 



    // The following code is PROBLEMATIC   


var result = {}; 
result.name = 'Calculated values'; 
result.data = calc(sample3.data); //here seems to be the problem 
series.push(result); 


    } 
} 

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
     }, 
     title: { 
      text: title, 
      x: -20 //center 
     }, 
     xAxis: { 
      categories: xvalues[0] 
     }, 

     yAxis: { 
      title: { 
       text: yaxis 
      }, 

     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'<\/b><br/>'+ 
        'Year ' + this.x +': Rate '+ this.y + '%'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right' 
     }, 

     series: series 

    }); 
}); 
}); 

Я знаю, что это длинный код, но, пожалуйста, посмотри на коде, где это проблематичное. Вот что этот код нужно сделать:

1. Участок первой линии согласно представленным данным выборочных
2. участок второй линии в соответствии с представленной математической формулой
3. Пользователь вводит значения в первой строке
4. диаграмма рисует первую линию
5. диаграмма рисует аВТОМАТИЧЕСКИ вторую линию, в соответствии с представленной формулой (что моя проблема)

Я не могу понять, где моя ошибка, все работает ... Образцы 2 успешно отрисовываются, введенные значения (для 1-й строки) также нарисованы также, но когда мне нужно рассчитать их для второго линии, они не хотят появляться на графике:/

Вот весь код с HTML http://jsfiddle.net/Avramoski/LsTet/2/

А вот образ того, как я хочу выглядеть ... http://imagizer.imageshack.us/v2/800x600q90/17/tbjm.png

Пожалуйста, помогите мне, это очень важно для меня. Спасибо, миллион!

Answer 1

Я - веб-мастер plotvar.com. Я рад слышать, что вы использовали его для своего кода для создания графического графика;)

Вы не используете правильные функции getSeries и getParams. Эти функции используются для обработки кратных серий (получение их из URL-адреса).

В любом случае, я сделал небольшой образец рабочего кода для вас.

Адаптировать его для ваших нужд;)

<!DOCTYPE html> 
<html> 
<head> 
<title>Amortization</title> 
<meta charset="utf-8" /> 
<link rel="stylesheet" type="text/css" href="style.css" media="all" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="./js/highcharts.js" type="text/javascript"></script> 
    <script src="./js/modules/exporting.js" type="text/javascript"></script> 
    <script src="./js/utils.js" type="text/javascript"></script> 



</head> 
<body> 
<h3 align="center">Calculating for different values:</h3> 


<form action="#container" method="GET"> 
     <div class="item" align="center"><label for="xvalues" >Insert years for X axis</label><br/><input type="text" name="xvalues" placeholder="2007, 2008, 2009, 2010, 2011"></div> 

     <div class="item_expandable" style="display:none" align="left"><label for="serie1">Inflation :</label><input type="text" name="serie1" placeholder="Инфлација"> </div> 

     <br/> 
     <div align="center"> 
<label for="values_serie1" >Put the inflation rate:</label><br/><textarea id="inflacija" rows="4" name="values_serie1" placeholder="1.6, 3.9, 3.3, 4, 2.5, 2.8"></textarea></div> 

<div align="center"> 
<button>Calculate the result</button> 
</div> 
     <br/> 
     <br/> 
</form> 

<script type="text/javascript"> 
    $(function() { 
    var chart; 

    var params = getParams(document.location.search); 

    var title= "Graphical representation of inflation and interest rate"; 
    var subtitle= "Options"; 

    var yaxis= "Increasing in %"; 

/*Array xvalues... if there are inserted values in the field for the years, we take them and convert to string*/ 
    var xvalues = []; 
    var yserie = "Foo"; 
    var yvalues = []; 
    if(params.hasOwnProperty("xvalues")) 
    { 
      if(params.xvalues != "") 
      { 
      xvalues = CSVToArrayStr(params.xvalues, ','); 

      } 
    } 

    if(params.hasOwnProperty("serie1")) { 
     if(params.serie1 != "") { 
      yserie = params.serie1; 
     } 
    } 

    if(params.hasOwnProperty("values_serie1")) { 
     if(params.values_serie1 != "") { 
      yvalues = CSVToArrayInt(params.values_serie1, ','); 
     } 
    } 
    alert("xcalues : " + xvalues + "\nyserie : " + yserie + "\nyvalues : " + yvalues); 

    var inflatdata = yvalues[0].slice(0); 
    var inflatserie = "inflat"; 
    for(var i = 0; i < inflatdata.length; i++) { 
    inflatdata[i] = parseFloat(inflatdata[i] + 5); 
    // here we parse our string to float 
    //inflatdata[i] = (3.5 + inflatdata[i] + 0.5 * (inflatdata[i] - 3)); 
    //inflatdata[i] = Math.round(inflatdata[i] * 100)/100; 
    } 

    console.log(JSON.stringify(xvalues)); 
    console.log(JSON.stringify(yserie)); 
    console.log(JSON.stringify(yvalues)); 
    console.log(JSON.stringify(inflatserie)); 
    console.log(JSON.stringify(inflatdata)); 
    //console.log(JSON.stringify(data)); 

//Options for desigining the chart 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'line', 
      }, 
      title: { 
       text: title, 
       x: -20 //center 
      }, 


      xAxis: { 
       categories: xvalues[0], 
       lineWidth: 1 
      }, 
      yAxis: { 
       title: { 
        text: yaxis 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }], 

       lineWidth: 1, 
       lineColor: '#92A8CD', 
       tickWidth: 3, 
       tickLength: 6, 
       tickColor: '#92A8CD', 
       minorTickLength: 3, 
       minorTickWidth: 1, 
       minorTickColor: '#D8D8D8', 

       tickInterval: 2, 
       minorTickInterval: 1, 
       minorGridLineColor: '#ADADAD', 
       minorGridLineDashStyle: 'LongDashDot' 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'<\/b><br/>'+ 
         'Year ' + this.x +': Rate '+ this.y + '%'; 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 100, 
       borderWidth: 1 
      }, 

       credits: { 
       position: { 
        align: 'left', 
        x: 20, 
        y: -7 
       }, 
       text: 'Uist Design Team', 
       href: 'http://uist.edu.mk' 
      }, 

      series: [{ 
       name: yserie[0], 
       data: yvalues[0] 
      }, { 
       name: inflatserie, 
       data: inflatdata 
      }] 
}); 
    }); 

}); 

</script> 


    </div> 
    </div> 

<div id="container"style="min-width: 100px; height: 400px; margin: 0 auto"></div> 

    </div> 
</body> 


    </div> 
    </div> 
</html> 

Надеется, что это помогает.

Для вас информация, есть также «секретный» equation line graph tool на моем сайте, возможно, он также может помочь.