Related
This is my current code, the problem is I dont know how to return the value, i dont know why the author from my function are undefined, what i want is to get the data from my query and pass it to the const reportChart, please help, thanks
this is my full code? did i miss something?
<script>
async function myFunction() {
var author = ("SELECT name FROM People", 10, (value)=>{
console.log(value)//please see the data below
return value;
})
return author; //undefined
}
myFunction().then(function(value){reportChart(value);})
const reportChart = (value) => {
console.log("inside chart: ",value) //The value of value is undefined
$("#chart").kendoChart({
title: {
text: "School Library"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [1, 2, 3]
}, {
name: "Total Visits",
data: [1, 2, 3]
}],
valueAxis: {
max: 10,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: [value],//undefined
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(reportChart);
$(document).bind("kendo:skinChange", reportChart);
</script>
the result of console.log(value)
0: ['Mark'] 1: ['Joseph'] 2: ['Luna'] 3: ['Yuno']
Update
I remove some code and replace this
<script>
let myPromise = new Promise(function(myResolve, myReject){
var author = ("SELECT name FROM People", 10, (value) => {
return myResolve(value)
});
})
myPromise.then(
function(value) {reportChart(value);},
function(error) {reportChart(error);}
);
function reportChart (value, index) {
console.log(index, value.length)
var i = 0
var author= []
for(i=0; i<=value.length; i++)
{
author[i] = value[i]
}
$("#chart").kendoChart({
title: {
text: "Library"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [1,2,3,4]
}, {
name: "Total Visits",
data: [4,5,6,7]
}],
valueAxis: {
max: 10,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: [author],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(reportChart);
$(document).bind("kendo:skinChange", reportChart);
</script>
**
this is now the result
What I want is, please help
Here: listsOfPeople = value, I guess what you would like to to is listsOfPeople.push(value); instead?
Your code should be like var author = doQuery("SELECT name FROM People"....
Possible issues:
doQuery() changes listsOfPeople unexpectedly.
Just some typo mistake on your variable name.
Or you mixed the use of listsOfPeople and listsOfAuthor.
I can succesffuly chart the data in a table on mysql
$sql = "SELECT TradeDate as date, LScore2 as L FROM levermann_kurz WHERE Stock_short='MSFT' ORDER BY TradeDate desc";
$stock2 = mysqli_query($mysqli,$sql);
$stock2 = mysqli_fetch_all($stock2,MYSQLI_ASSOC);
$stock2 = json_encode(array_column($stock2,'L'),JSON_NUMERIC_CHECK);
and the body
<script type="text/javascript">
// load("getdata.php")
var data_stock1 = <?php echo $stock1; ?>;
var data_stock2 = <?php echo $stock2; ?>;
Highcharts.chart('container', {
title: {
text: 'Levermann Scores'
},
subtitle: {
text: 'TradeFlags'
},
// xAxis: {
// categories: dates
// },
yAxis: {
title: {
text: 'Levermann Score'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
//pointStart: 0
}
},
series: [{
name: 'AAPL',
data: data_stock1
}, {
name: 'MSFT',
data: data_stock2
// }, {
// name: 'External Data',
// data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
But just can't get it to display the Date array as the x-Axis
It just has values 0,1,2,3,4,... etc.
What am i doing wrong? How do you set the x-axis array in the highchart plot?
I thought you could simply pass through a 2 column array with Dates in the first column and Values in the second column ?
Please help!
I have looked on highcharts documentation but it doesnt seem to explain to me how i should pass the data to the chart container. which format it should be?
CONSOLE LOG:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="container" style="height: 400px; max-width: 800px"></div>
<script type="text/javascript">
// load("getdata.php")
var data_stock1 = [3,2,2,3,3,3,3,3,3,3,3,3,3,3,3,2,3,3,2,3,2,3,2,2,1,-1,0,0,0,0,0,1,1,0,0,-1,0,-1,-1,-1,-1,-1,0,0];
var data_stock2 = [2,3,2,2,2,2,2,2,2,2,2,2,2,1,2,2,3,2,3,3,1,2,0,2,2,2,1,2,2,2,2,2,2,1,2,2,1,2,2,2,2,1,1,2];
var data_datearray = ["2018-05-25","2018-06-01","2018-06-08","2018-06-15","2018-06-22","2018-06-27","2018-07-06","2018-07-20","2018-07-27","2018-08-03","2018-08-10","2018-08-17","2018-08-24","2018-08-31","2018-09-07","2018-09-14","2018-09-21","2018-09-28","2018-10-05","2018-10-12","2018-10-19","2018-10-26","2018-11-02","2018-11-09","2018-11-16","2018-11-23","2018-11-30","2018-12-07","2018-12-14","2018-12-21","2018-12-28","2019-01-04","2019-01-11","2019-01-18","2019-01-25","2019-02-01","2019-02-08","2019-02-15","2019-02-22","2019-03-01","2019-03-08","2019-03-15","2019-03-22","2019-03-29"];
//var seriesOptions = [], seriesCounter = 0, names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
//function createChart() {
Highcharts.stockChart('container', {
///
title: {
text: 'Levermann Scores'
},
xAxis: {
type: 'datetime',
categories: data_datearray
},
series: [{
name: 'AAPL',
data: data_stock1
}, {
name: 'MSFT',
data: data_stock2
}]
////
// responsive: {
// rules: [{
// condition: {
// maxWidth: 500
// },
// chartOptions: {
// legend: {
// layout: 'horizontal',
// align: 'center',
// verticalAlign: 'bottom'
// }
// }
// }]
// }
});
// end of container }];
//}
console.log(data_stock1)
</script>
</body>
i can get the date into this format with two columns but it wont work in the chart
var data_dual = [{"date":"2018-05-25","L":"3"},{"date":"2018-06-01","L":"2"},{"date":"2018-06-08","L":"2"},{"date":"2018-06-15","L":"3"},{"date":"2018-06-22","L":"3"},{"date":"2018-06-27","L":"3"},{"date":"2018-07-06","L":"3"},{"date":"2018-07-20","L":"3"},{"date":"2018-07-27","L":"3"},{"date":"2018-08-03","L":"3"},{"date":"2018-08-10","L":"3"},{"date":"2018-08-17","L":"3"},{"date":"2018-08-24","L":"3"},{"date":"2018-08-31","L":"3"},{"date":"2018-09-07","L":"3"},{"date":"2018-09-14","L":"2"},{"date":"2018-09-21","L":"3"},{"date":"2018-09-28","L":"3"},{"date":"2018-10-05","L":"2"},{"date":"2018-10-12","L":"3"},{"date":"2018-10-19","L":"2"},{"date":"2018-10-26","L":"3"},{"date":"2018-11-02","L":"2"},{"date":"2018-11-09","L":"2"},{"date":"2018-11-16","L":"1"},{"date":"2018-11-23","L":"-1"},{"date":"2018-11-30","L":"0"},{"date":"2018-12-07","L":"0"},{"date":"2018-12-14","L":"0"},{"date":"2018-12-21","L":"0"},{"date":"2018-12-28","L":"0"},{"date":"2019-01-04","L":"1"},{"date":"2019-01-11","L":"1"},{"date":"2019-01-18","L":"0"},{"date":"2019-01-25","L":"0"},{"date":"2019-02-01","L":"-1"},{"date":"2019-02-08","L":"0"},{"date":"2019-02-15","L":"-1"},{"date":"2019-02-22","L":"-1"},{"date":"2019-03-01","L":"-1"},{"date":"2019-03-08","L":"-1"},{"date":"2019-03-15","L":"-1"},{"date":"2019-03-22","L":"0"},{"date":"2019-03-29","L":"0"}];
or using UNIX_TIMESTAMP i converted the date format into timestamps:
var data_dual = [{"date":"1527206400","L":"3"},{"date":"1527811200","L":"2"},{"date":"1528416000","L":"2"},{"date":"1529020800","L":"3"},{"date":"1529625600","L":"3"},{"date":"1530057600","L":"3"},{"date":"1530835200","L":"3"},{"date":"1532044800","L":"3"},{"date":"1532649600","L":"3"},{"date":"1533254400","L":"3"},{"date":"1533859200","L":"3"},{"date":"1534464000","L":"3"},{"date":"1535068800","L":"3"},{"date":"1535673600","L":"3"},{"date":"1536278400","L":"3"},{"date":"1536883200","L":"2"},{"date":"1537488000","L":"3"},{"date":"1538092800","L":"3"},{"date":"1538697600","L":"2"},{"date":"1539302400","L":"3"},{"date":"1539907200","L":"2"},{"date":"1540512000","L":"3"},{"date":"1541116800","L":"2"},{"date":"1541721600","L":"2"},{"date":"1542326400","L":"1"},{"date":"1542931200","L":"-1"},{"date":"1543536000","L":"0"},{"date":"1544140800","L":"0"},{"date":"1544745600","L":"0"},{"date":"1545350400","L":"0"},{"date":"1545955200","L":"0"},{"date":"1546560000","L":"1"},{"date":"1547164800","L":"1"},{"date":"1547769600","L":"0"},{"date":"1548374400","L":"0"},{"date":"1548979200","L":"-1"},{"date":"1549584000","L":"0"},{"date":"1550188800","L":"-1"},{"date":"1550793600","L":"-1"},{"date":"1551398400","L":"-1"},{"date":"1552003200","L":"-1"},{"date":"1552608000","L":"-1"},{"date":"1553212800","L":"0"},{"date":"1553817600","L":"0"}];
but using this array data_dual in the series will just render a chart with blank.
You need to use a datetime axis and provide dates as timestamps or as a Date objects, in the first elemets of the data array:
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
data: [
[1262304000000, 29.9],
[1267401600000, 71.5],
[1270080000000, 106.4]
]
}]
});
Or as an object:
series: [{
data: [{
x: 1262304000000,
y: 29.9
},
{
x: 1267401600000,
y: 71.5
},
{
x: 1270080000000,
y: 106.4
}
]
}]
Live demo: http://jsfiddle.net/BlackLabel/7tov823n/
API Reference: https://api.highcharts.com/highcharts/series.column.data
I have built this electoral map but I have not succeeded drawing a pie chart of the two parties on the pop-up dialog when a map region is clicked. The dialog title is being passed but not the actual values that should build the chat.
The returned json data is here and I just want to push a pie-chart to the dialog when someone clicks on a county on the map. Here's my code and "pointClick" function that should render the pie to a div.
$(function() {
$.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
//THIS IS ACTUALLY WHAT'S NOT WORKING
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
}, {
name: 'jubilee',
color: '#C40401',
y: this.jubilee //returned json data for candidate 2
}],
dataLabels: {
// format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
//AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
},
legend: {
title: {
text: 'Plotical Parties'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' Incumbent Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'Jubilee'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Nasa'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Mandera",
"path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
}, //and a couple more mapdata
]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
});
});
Your JSON data contains number in string format so convert it into Number
like this
Fiddle link
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: Number(this.nasa) //transform to number
}, {
name: 'jubilee',
color: '#C40401',
y: Number(this.jubilee) //transform to number
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
I have dropdown list from sorting grid. I want to manage same grid with pie chart, but I can't bound remote data to the piechart. The piechart must to show categories (the same role, like a dropdown list), but I can't bound to hierarchical remote data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="project">
<div id="grid"></div>
<div id="chart"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
<script>
$(document).ready(function() {
//Grid displays all products or products from one category, which set from dropdown list
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#template").html()),
height: 550,
sortable: true,
pageable: true,
dataBound:function(){
var grid = this;
$.each(grid.tbody.find('tr'),function(){
var model = grid.dataItem(this);
if(model.Discontinued==true){
$('[data-uid='+model.uid+']').addClass('k-state-selected');
}
});
},
columns: [
// { field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
{ field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
{ field: "UnitsInStock", title: "In Stock", width: 150 },
{ field: "Discontinued", title: "Discontinued", width:50 },
{ field: "QuantityPerUnit", title: "Quantity" }
]
});
//DropDown list for sorting by the category
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "odata",
severFiltering: true,
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
var data = [
{
"source": "Hydro",
"percentage": 20,
},
{
"source": "Hydro",
"percentage": 20
},
{
"source": "Solar",
"percentage": 10
},
{
"source": "Nuclear",
"percentage": 30
}
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {field: "source", aggregates: [{
field: "percentage", aggregate: "sum"
}]}
});
dataSource.read();
function getChartData() {
var chartData = [];
var view = dataSource.view();
for(var idx = 0; idx < view.length; idx++) {
chartData.push({
source: view[idx].value,
percentage: view[idx].aggregates.percentage.sum
});
}
return chartData;
}
//From This piechart I want to sorting grid
var chart = $("#chart").kendoChart({
title: {
text: "Categories and Products"
},
legend: {
position: "bottom"
},
dataSource: {
transport: {
read: function(e) {
e.success(getChartData());
}
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
aggregate: "count",
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
}],
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
});
});
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: center;
}
</style>
</div>
You can bind a kendo pie chart with remote data, I have done this many times in the past. Take a look at the following link for an example on how to achieve this.
Kendo pie chart - remote binding
I'm trying to create a multi-pane chart (like this one http://www.highcharts.com/stock/demo/candlestick-and-volume), with the upper one being a "normal" stacked column chart and the lower one being a "percent" stacked column. But I'm only able to make it both "normal" or both "percent", which is not what I want. Tried a few combinations of plotOptions but couldn't get it to work. Here's the fiddle(http://jsfiddle.net/abhikgo/59k90959/3/): TIA.
var chartData = {"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
"bbbBBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
"bbb":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
"BBB":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
"CCC":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
"DDD":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]};
var $chart = $('#chartArea').highcharts('StockChart', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{
title: {
text: "Normal Statcking"
},
opposite: false,
height: "65%"
}
,{
title: {
text: "% Stacking"
},
opposite: false,
height: "65%",
top: '65%',
height: '35%',
offset: 0
}
],
plotOptions: {
column: {stacking: 'normal'}
},
series: [{
type: 'column',
name: 'AAA',
data: chartData.AAA
},
{
name: 'bbbBBB',
data: chartData.bbbBBB
},
{
name: 'CCC',
data: chartData.CCC
},
{
name: 'DDD',
data: chartData.DDD
},
{
name: 'bbb',
data: chartData.bbb,
yAxis: 1,
plotOptions: {
column: {
stacking: 'percent'
}
}
},
{
name: 'BBB',
data: chartData.BBB,
yAxis: 1,
plotOptions: {
column: {
stacking: 'percent'
}
}
}
]
});
The problem is the way you are trying to set stacking per specific series, this is proper way:
{
name: 'bbb',
data: chartData.bbb,
yAxis: 1,
stacking: 'percent'
}, {
name: 'BBB',
data: chartData.BBB,
yAxis: 1,
stacking: 'percent'
}
See demo: http://jsfiddle.net/59k90959/4/
SOLUTION
I could not find a way to do both chats with the library so I calculated the percentages myself and inserted them as separated series. The only catch was to proper format the tooltips.
var chartData = {
"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
"BBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
"CCC":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
"DDD":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
"EEE":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
"FFF":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]
};
var sumData = [];
$.each(chartData, function(i){
$.each(chartData[i], function(j){
if(!sumData[j]) sumData[j] = 0;
sumData[j] += this[1];
});
});
var percentData = {};
$.each(chartData, function(i){
percentData[i] = [];
$.each(chartData[i], function(j){
percentData[i][j] = [this[0], this[1]/sumData[j]];
});
});
var $chart = $('#chartArea').highcharts('StockChart', {
chart: { type: 'column' },
plotOptions: { column: {stacking: 'normal'} },
tooltip: {
formatter: function(){
console.log(this);
var s = '<span style="font-size: 10px">'+
Highcharts.dateFormat('%A, %b %d, %Y',this.x)+
'</span><br/>';
for(var i = 0; i < sumData.length - 1; i++) {
s += '<br/>' + '<span style="color: ' +
this.points[i].series.color+'">\u25CF</span>' +
this.points[i].series.name + ': ' +
this.points[i].y + 'm ' +
this.points[i].percentage.toFixed(1) + '%';
}
return s;
}
},
xAxis: { type: 'datetime', },
yAxis: [
{//normal
title: {
text: "Normal Statcking"
},
opposite: false,
height: "50%"
},
{//percent
title: {
text: "% Stacking"
},
opposite: false,
top: '50%',
height: '50%',
offset: 0
}
],
series: [
{//normal
name: 'AAA',
data: chartData.AAA
},{
name: 'BBB',
data: chartData.BBB
},{
name: 'CCC',
data: chartData.CCC
},{
name: 'DDD',
data: chartData.DDD
},{
name: 'EEE',
data: chartData.EEE
},{
name: 'FFF',
data: chartData.FFF
},
{//percent
name: 'pAAA',
data: percentData.AAA,
yAxis: 1
},{
name: 'pBBB',
data: percentData.BBB,
yAxis: 1
},{
name: 'pCCC',
data: percentData.CCC,
yAxis: 1
},{
name: 'pDDD',
data: percentData.DDD,
yAxis: 1
},{
name: 'pEEE',
data: percentData.EEE,
yAxis: 1
},{
name: 'pFFF',
data: percentData.FFF,
yAxis: 1
}
]
});
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="chartArea"></div>
</body>
</html>