常連

javascriptを始めて間もない者です。
Highstockを用いてグラフを書きたいのですが、jsonからのデータの抽出方法がわかりません。

sample.jsonの中身は
{data:[{"data1":~,"data2":~,"data3":~]},{・・・・・}]}
となっております。
これをjavascriptで読み込み、新たな配列
data=[
[data[0].data1,data[0].data2],
[data[1].data1,data[1].data2],
・・・・・
]
となるように抽出したいと考えています。
htmlファイルとjsonファイルはサーバ上の同じディレクトリ内に配置しています。
$.getJSONの使い方などをいろいろと調べましたが、ずっとうまくいかなかったのでこちらで質問させていただきました。。。
よろしくお願いします。

jsonファイルを読み込んでデータ配列をつくる

blade上で日付検索をしてConroller内でその日付を$hidukeという変数に入れてwhereに書いています。
そしてそのクエリを$sqlという変数に入れて先ほどと同じbladeに渡しています。
そしてその結果を同じbladeにHighchartsを使用してグラフ化しようとしていてそこで$sqlを使用しています。

ですが、最初にページを開いた際にタイトルのエラーが出てしまいます。

最初にアクセスした時に変数が空なのでエラーが出てしまうのは理解しているのですが
対処法がわかりませんでした。

初回アクセス時に変数を無いことにしたいのですができますでしょうか？

よろしくお願いします。
```search.blade.php
{{ Form::open(['route' => ['time.search'], 'method' => 'post', 'id' => 'searchForm', 'name' => 'searchForm', 'class' => 'form-horizontal']) }}
        <div class="row">
            <div class="col-md-12">
                <div class="panel-body">
                    <div class="form-group">
                        {{ Form::label('hiduke', '日付：', array('class' => 'col-sm-2 control-label')) }}
                        <div class="col-sm-10">
                            <div class="input-daterange input-group" id="datepicker">
                            {{ Form::tel('hiduke', null, ['class' => 'input-sm form-control', 'placeholder' => '入力', 'id' => 'hiduke']) }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" class="btn btn-default" id='compositeBtn' value="検索">
                            <input type="button" class="btn btn-default" id='clearBtn' value="クリア">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{ Form::close() }}

.
.
.
<script>
.
.
.
 series: [{  //グラフの中身（データの設定）
                pointWidth: 50,
            name: "本日の送信件数",  //各データの名前
            data:[<?php echo $sql; ?>
                  ],
                  dataLabels:{
                  enabled:true,
                  color:'#000000'//各データ(数値)
              }
        }]
.
.
.
</script>
```

```SearchController
 public function index(){
       
       return view('admin::time.search');  
   }
   
   /**
    * 検索
    */
   public function search(){
       //入力値取得
       $hiduke = Request::Input('hiduke');
  
       //日付が入力されていない場合エラー
       if(!$hiduke){
           return redirect()->route("time.search")->withErrors('日付を入力してください。')->withInput();
       }
       
       $sql = Read::select(DB::raw('CONVERT(varchar,work_dt,111)'))
                       ->join('arrival','comp.key_no','=','arrival.key_no')
                       ->where((DB::raw('CONVERT(varchar,send_dt,111)')),'like',"$hiduke%")                               
                       ->groupBy((DB::raw('CONVERT(varchar,work,111)')))
                       ->count('send_dt');
       
       return view('admin::time.search',['sql' => $sql]);
   }
```

```routes.php
Route::get('time/search',['as' => 'time.search', 'uses' => 'SearchController@index']);
Route::post('time/search', ['as' => 'time.search', 'uses' => 'SearchController@search']);
```

LaravelでUndefined variable

Highchartsを使って円グラフを作成しています。

基本的な質問で申し訳ございませんが

1.こちらの円グラフの色を変えるのはどうすればいいでしょうか。

2.データラベルが左右に表示されているのでスマホで見たときに円グラフ自体の幅が狭くなり、小さくなってしまいます。データラベルの表示方法を変えたりするのはどうすればいいでしょうか。

宜しくお願い致します。

![イメージ説明](c58d662ced15064593594391438f0615.jpeg)

highchartsで円グラフの色とデータラベルの表示方法を変えたい

プログラム初心者です。
highchartsを使ってhtmlファイルを表示させたいのですが、うまくいきません。（黒色の画面表示になってしまいます）
![イメージ説明](1605e8f229c6dd91377b4117cc894b3d.png)
![イメージ説明](2533c9233360d8e5125049d3ce936f05.png)
こちらのブログを参考にして作成しました。
http://hutabah.hatenablog.jp/entry/2017/06/22/203000


以下、作成したファイルです  

test.html
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/home/yoshiaki/JS/highcharts.js"></script>
  <link rel="stylesheet" type="text/css" href="/home/yoshiaki/test/sample.css">
</head>

<body>
  <div id="container"></div>
  <script src="/home/yoshiaki/test/sample.js"></script>
</body>
</html>

```  
sample.css
```
#container {
	min-width: 310px;
	max-width: 650px;
	height: 400px;
	margin: 0 auto;
}
```  

sample.js
```
Highcharts.chart('container', {  //グラフ描画のテンプレート

    title: {  //グラフのタイトル
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {  //グラフのサブタイトル
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {  //y軸の設定
        title: {  //y軸のタイトル
            text: 'Number of Employees'
        }
    },
    legend: {  //グラフの凡例
        layout: 'vertical',  //縦方向に並べる
        align: 'right',  //グラフの右に表示（左右中央）
        verticalAlign: 'middle'  //グラフの中央に表示（上下中央）
    },

    plotOptions: {  //点の設定
        series: {
            pointStart: 2010  //2010から書き始める
        }
    },

    series: [{  //グラフの中身（データの設定）
        name: 'Installation',  //各データの名前
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]  //各データ(数値)
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]  //nullに設定すると表示されません
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]

});
```

highchartsで作成したグラフが表示されない

### 前提・実現したいこと

HighChartsで表示するデータによってY軸のMIN/MAXを切り替えたい


### 発生している問題・エラーメッセージ

chartを最初にnewで作成しておき、その後指定された条件によって、
データの異なる1種類、または2種類のグラフを切り替えて表示するため、
addSeries()を利用しています。
グラフのタイプは棒グラフです。
データによって、Y軸のMIN値を０ではなく30などの値でグラフを
表示させたいのですが、どうすればよいかわかりません。

毎回、newしてグラフを作成すれば実現できるのはわかっているのですが、
new後にyAxisのmin,maxの値を変更する方法はないのでしょうか？


### 関連質問

折れ線グラフの場合、yAxisのmin/maxを指定しないと、
表示する値によってmin/maxが自動で計算されます。
棒グラフの場合のminは必ず0、maxは自動で決まるようです。
これはグラフの種類によって、デフォルトでは
そのように表示するようにしているのでしょうか？

HighChartsのaddSeriesでY軸のMIN/MAXを変更したい

JavaScriptでCSVから値を読み、JSON形式に格納してHighChartsを使って積み上げ棒グラフを表示させることを考えています。

CSVのデータとしては、
日付1,日付2,日付3,日付4...
凡例名1,凡例名2,凡例名3...
日付1・凡例名1の値,日付2・凡例名1の値,日付3・凡例名1の値,日付4・凡例名1の値...
日付1・凡例名2の値,日付2・凡例名2の値,日付3・凡例名2の値,日付4・凡例名2の値...
日付1・凡例名3の値,日付2・凡例名3の値,日付3・凡例名3の値,日付4・凡例名3の値...
.
.
.
のようになっています。
このCSVのデータを自前の関数を使って、二次元配列で取り出します。
```JavaScript
// CSVファイル読み込み
function csvToArray(path) {
        var csvData = new Array();
        var data = new XMLHttpRequest();        
        data.open("GET", path, false);
        data.send(null);
        var LF = String.fromCharCode(10);
        var lines = data.responseText.split(LF);
        for (var i = 0; i < lines.length;++i) {
                var cells = lines[i].split(",");
                if( cells.length != 1 ) {
                        csvData.push(cells);
                }
        }
        return csvData;
}
```

戻り値を使って、CSVの1列目を横軸、2列目をデータの凡例、
3列目以降は凡例・横軸ごとの数値データとしてJSON形式で設定します。

```JavaScript
   //横軸
   var xAxis = {
      categories: csvData[0]
   };
```

```JavaScript
   var series= [{
        name: '凡例1',
            data: intParse(csvData[2])
        }, {
            name: '凡例2',
            data: intParse(csvData[3])
       ...省略...
        }, {
            name: '凡例n',
            data: intParse(csvData[n + 1])
   }];  
```
のように設定したいのですが、この凡例の数nにかかわらず
動的にJSONパラメータを設定する方法がわかりません。

どなたかご教授いただけないでしょうか。

JavascriptでJSONを動的に生成する方法について

【やりたいこと】
PHP＋「highcharts」でグラフ作成に挑戦してます。
同一ページ内に、同じ種類のグラフを複数作成したいです。
※グラフ数は可変


【参考にしたページ】
[円グラフ](http://www.tailtension.com/demo/highcharts/hightcharts_pie.html)


例えばこの円グラフを3つにしたい場合です。
※数値データ自体はもちろん変えて



【調べた結果】
別種類のグラフを重ねたり、別種類のグラフを複数表示する方法は見つかりました。
ですが、今回やりたいことは「同じ種類の」グラフなので違うようでした。


【質問】
実現するにはどんな方法があるでしょうか？

グラフを作成したい回数だけhighchartsの「グラフ生成メソッド」を呼べば良いと考えましたが
html(view)側からjqueryのメソッドを複数回呼ぶことは可能なのでしょうか？
まずここが分かりません。

あるいは、jqueryのメソッド側を修正すべきでしょうか？


よければアドバイス宜しくお願い致します。



```JavaScript
<script type="text/javascript">
$(function () {
	$('#container').highcharts({
        chart: {
            type: 'pie',
        },
        series: [{
            data: [
                ['Firefox',<?php echo $f_count; ?>],
                ['IE', <?php echo $i_count; ?>],
                ['Chrome', <?php echo $c_count; ?>],
                ['Safari', <?php echo $s_count; ?>],
                ['Opera', <?php echo $o_count; ?>],
                ['Others', <?php echo $others; ?>]
            ]
        }]
    });
});
</script>
コード
```

【highcharts】同じ種類のグラフを複数表示したい

[https://aozora-cere-gp.sakura.ne.jp/highcharts-practice/](https://aozora-cere-gp.sakura.ne.jp/highcharts-practice/)

上記のURLは私がアップロードしたものです。そしてレジェンド部分を拡大したものが下の画像です。

![イメージ説明](53b25aec7e47169d190d686bbd979ac5.png)

上の画像を見るとお分かりのとおり、レジェンド部分のラインカラーが上位血圧の場合水色だったり、体温の場合緑色だったりしますが、これを変更したいのです。

レジェンド部分の説明は、公式サイト内の
[legend | highcharts](https://api.highcharts.com/highcharts/legend)
にあると思い、調べたのですが、目的のものが見当たらなくて困っている状態です。

ソースコードを下に提示します。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>Highcharts Practice</title>
	
</head>
<body>
	<div id="container"></div>

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/data.js"></script>
	<script src="https://code.highcharts.com/modules/series-label.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script src="https://code.highcharts.com/modules/export-data.js"></script>
	<script src="https://code.highcharts.com/modules/accessibility.js"></script>
	
	<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
	<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
	<script src="js/index.js"></script>
</body>
</html>
```

```JavaScript
'use strict';

const date = ['5/11', '5/12', '5/13', '5/14', '5/16', '5/17', '5/18'];
const HBP = [167, 166, 172, 163, 164, 169, 175];
const LBP = [98, 97, 95, 90, 89, 92, 99];
const KT = [35.8, 36.2, 36.3, 35.8, 36.9, 37.2, 37.8];

Highcharts.chart('container', {
	chart: {
		scrollablePlotArea: {
			minWidth: 700,
		},
	},

	xAxis: [
		{
			categories: date,
		}
	],

	yAxis: [
		{
			title: {
				text: '血圧'
			}
		},
		{
			title: {
				text: '体温'
			},
			opposite: true,
		}
	],

	series: [
		{
			name: '上位血圧',
			type: 'line',
			data: HBP,
			yAxis: 0,
			lineColor: '#333333',
			marker: {
				symbol: 'url(https://aozora-cere-gp.sakura.ne.jp/images/triangle-12.png)',
			},
		},
		{
			name: '下位血圧',
			type: 'line',
			data: LBP,
			yAxis: 0,
			lineColor: '#333333',
			marker: {
				symbol: 'url(https://aozora-cere-gp.sakura.ne.jp/images/inverse-triangle-12.png)',
			},
		},
		{
			name: '体温',
			type: 'line',
			data: KT,
			yAxis: 1,
			lineColor: '#0000ff',
			marker: {
				symbol: 'url(https://aozora-cere-gp.sakura.ne.jp/images/KT-12.png)'
			},
		},
	],

	legend: {
		lineColor: '#FF0000',
	},
});
```

お分かりの方、ご教授お願いできないでしょうか。