competitorCost(time)
Googleチャートにグラフ化したい線形関数があります。フォームを使用してデータを取り込み、このデータを使用して線形関数を作成します。ただし、グラフにはなりません。
var upfront;
var monthlyrate;
var wifi;
var firewall;
var backup;
var vpn;
var install;
var result;
var competitorCost = function(time){
return upfront + (time * monthlyrate);
};
var ourCost = function(time){
return 1000 + (time * 50);
};
$(document).ready(function(){
$('#submit').click(function(){
wifi = $('input[name=wifiPrice]').val();
firewall = $('input[name=firewallPrice]').val();
backup = $('input[name=backupPrice]').val();
vpn = $('input[name=vpnPrice]').val();
install = $('input[name=installPrice]').val();
cloudbackup = $('input[name=cloudbackuprate]').val();
support = $('input[name=supportrate]').val();
upfront = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install);
monthlyrate = parseInt(cloudbackup) + parseInt(support);
});
});
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'Entreda', 'Competitors'],
['0', ourCost(0), competitorCost(0)],
['6', ourCost(6), competitorCost(6)],
['12', ourCost(12), competitorCost(12)],
['18', ourCost(18), competitorCost(18)],
['24', ourCost(24), competitorCost(24)]
]);
var options = {
title: 'Entreda vs Competitor Costs Over Time',
width: 480,
height: 270,
pointSize: 5
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
competitorCost(time)
はグラフにしませんが、グラフにourCost(time)
します。それらをインスタンス化するときに値を与えるupfront
とmonthlyrate
、関数は問題なくグラフになるため、関数で使用されていることに問題がupfront
ありmonthlyrate
ます。誰かが私の間違いを見ますか?
更新:ページが読み込まれるとすぐにGoogleチャートが描画されるため、グラフが描画されると未定義になるupfront
ことに気付きました。monthlyrate
これを回避する方法について誰か提案がありますか? 送信ボタンが押された後にグラフ自体を描画することを考えていましたが、どうすればそれを行うことができますか?