Cara Menggunakan Chart dengan data JSON

maaf, saya baru belajar. saya punya trouble ketika menampilkan data dari sebuah data JSON, ketika tampil di bagian Legend tidak bisa di klik sama sekali, xAxis dan di bagian series data yang muncul tidak sesuai. saya lampirkan coding nya

 echo "<div data-plugin='chart' style='height:300px' data-options='{
      tooltip : {
        trigger: \"axis\"
      },
      legend: {
        data:$xa
      },
      calculable : true,
      xAxis : [
        {
          type : \"category\",
          data : $xa
        }
      ],
      yAxis : [
        {
          type : \"value\"
        }
      ],
      series : [
        {
          name:$xa,
          type:\"bar\",
          data:$percent,
          markPoint : {
            data : [
              {type : \"max\", name: \"Max\"},
              {type : \"min\", name: \"Min\"}
            ]
        },
          markLine : {
            data : [
              {type : \"average\", name: \"Average\"}
            ]
          }
        }
      ]
    }'>";
echo "</div>";

data JSON saya tampung di variable

 $xa

dan Output Data nya seperti ini :

 ["Butter Rice Salmon|Salmon","Chicken Steak|Grilled Chicken Steak","Dory Pesto Rice|Pesto","Green Rice Chicken Salsa|Paket Green Rice Chicken Salsa","Hamburg Egg Rice|Paket Hamburg Egg Rice","Ice Tea|Lychee Ice Tea","Ice Tea|Peach Ice Tea","Mango|Mango Peach"]

nah data diatas akan saya tampilkan di bagian Legend, xAxis dan Series.

dari data di atas setiap data memiliki Nilai yang saya simpan dalam variable

 $percent

Value dari Data Nilainya seperti berikut :

 [100,100,100,100,100,100,100,100]

saya lampirkan gambar outputnya http://imgur.com/a/N4G5F yang saya garis merah di atas bagian Legend nya tidak berfungsi, mungkin karena tidak cocok sama series nya, trus diagram batangnya yang saya beri garis biru di tengah juga sama seperti tidak singkron sama series nya dan yang bawah di bagian series tidak menampilkan nama item yang seperti di legend.

mohon bantuannya. teirma kasih banyak