Location of data on the highcharts - javascript

I'm using codeigniter with highcharts, but when I fetch the data from database, it only appears like this:
What do you think is the problem?
controller
public function tabular()
{
$data['pizzas'] = $this->user_model->tabular();
//var_dump($this->user_model->tabular());
$this->load->view('template/header');
$this->load->view('template/menubar');
$this->load->view('template/highcharts',$data);
$this->load->view('template/footer');
}
model
public function tabular() {
$this->db->select('products.name AS name, SUM(order_details.price) AS total');
$this->db->from('order_details');
$this->db->join('products', 'products.prod_id = order_details.prod_id', 'LEFT');
$this->db->group_by("products.prod_id");
$query = $this->db->get();
foreach ($query->result() as $row){
$results[] = array(
'name' => $row->name,
'total' => (float) $row->total
);
}
return $results;
}
view
Highcharts.chart('chart-C', {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: 'P{point.total:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>P{point.total:.2f}</b> of total<br/>'
},
series: [{
name: 'Sales',
colorByPoint: true,
data: <?php echo json_encode($pizzas); ?>
}],
});
json_encode var_dump
string '[{"name":"pizza burger","total":870},{"name":"buffalo chicken","total":1085},{"name":"bacon mushroom","total":165},{"name":"sausage mania","total":450},{"name":"beef shawarma","total":1575},{"name":"yummy hotdog","total":230},{"name":"oreo pina","total":240},{"name":"tuna garlic","total":130},{"name":"all hungarian","total":135},{"name":"beef pepperoni","total":135},{"name":"hawaiian","total":480}]' (length=401)

You can process your php data <?php echo json_encode($pizzas); ?> in js as
var chartData=<?php echo json_encode($pizzas); ?>
var category = [];
var data = [];
for (var i = 0; i < chartData.length; i++) {
category.push(chartData[i].name);
data.push(chartData[i].total);
}
Now category is array containing categories for xAxis of highcharts and data is array containing data for series
these can be used in highcharts as
xAxis: {
categories: category,
},
and
series: [{
name: "Order",
data: data
}],
See the working code below
var chartData = [{
"name": "pizza burger",
"total": 870
}, {
"name": "buffalo chicken",
"total": 1085
}, {
"name": "bacon mushroom",
"total": 165
}, {
"name": "sausage mania",
"total": 450
}, {
"name": "beef shawarma",
"total": 1575
}, {
"name": "yummy hotdog",
"total": 230
}, {
"name": "oreo pina",
"total": 240
}, {
"name": "tuna garlic",
"total": 130
}, {
"name": "all hungarian",
"total": 135
}, {
"name": "beef pepperoni",
"total": 135
}, {
"name": "hawaiian",
"total": 480
}]
var category = [];
var data = [];
for (var i = 0; i < chartData.length; i++) {
category.push(chartData[i].name);
data.push(chartData[i].total);
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'column chart'
},
xAxis: {
categories: category,
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
legend: false,
series: [{
name: "Quantity",
data: data
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Related

Highcharts: Passing a secondary data variable in the tooltip

I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<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/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.
Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<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/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

cannot display data on highchart js

I want to display data from MySQL database to highchart. When I do print_r the data, it can display the array as well, but when I try to display them to the chart, it's not working. here's my code:
controller:
$lokasi = $this->Objekwisata_m->getLokasi();
$jumlahSad = array();
$temp = 0;
foreach ($lokasi as $lok ) {
$sad = $this->Objekwisata_m->getSad($lok['id_lokasi']);
$jumlahSad[$temp] = count($sad);
$temp++;
}
$data['jumlahSad'] = $jumlahSad;
$data['lokasi'] = $this->Objekwisata_m->getLokasi();
$this->load->view('objek_wisata_v', $data);
model
public function getSad($id_lokasi){
$this->db->select('t.result');
$this->db->from('tbl_testimoni t');
$this->db->join('tbl_master_lokasi l', 't.id_lokasi = l.id_lokasi', 'left');
$this->db->where("t.result", "'sad'");
$this->db->where("t.id_lokasi = '".$id_lokasi."'");
$query = $this->db->get();
return $query->result_array();
}
highchart.js
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Grafik Kepuasan Pengunjung KRB'
},
xAxis: {
categories: [<?php foreach($lokasi as $lok){
echo "'".$lok['nama_lokasi']."',";
}?>],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: 'percents'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Sad',
data: [<?php foreach($jumlahSad as $s){
echo "'".$s."',";
}?>]
}, {
name: 'Happy',
data: [<?php foreach($jumlahHappy as $h){
echo "'".$h."',";
}?>]
}, {
name: 'Disgust',
data: [<?php foreach($jumlahDisgust as $d){
echo "'".$d."',";
}?>]
}]
});
</script>

numbers are too long to show correctly in highcharts/javascript

I have a weird question:
The series1 variable is an array of date-times, which are too long. Because of this, the chart cannot display correctly. However, if I change series1 to make it contain the values of series2. It will work correctly. Can you let me know what I should do?
Also, how can I get each value in series1 shown as a date? suppose it is a variable from flask {{series1}}. thank you.
$(function () {
var series1 = [1489298400000L, 1492923600000L, 1492318800000L, 1480226400000L, 1494133200000L, 1490504400000L, 1488088800000L, 1475384400000L, 1493528400000L, 1491109200000L, 1480831200000L, 1471755600000L]
var series2 = [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1]
var series3 = [102, 95, 110, 111, 81, 104, 99, 92, 90, 100, 103, 98]
var myChart =
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
credits: {
text: 'Songhuiming',
href: 'http://www.songhuiming.com'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: series1,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: series2,
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: series3,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
About suffix "L" on the end you can read here.
What you need at first to make all items in series1 array be a string, because as it now, you will have an error. Then remove "L" and convert to dates
let series = ['1489298400000L', '1492923600000L', '1492318800000L', '1480226400000L', '1494133200000L', '1490504400000L', '1488088800000L', '1475384400000L', '1493528400000L', '1491109200000L', '1480831200000L', '1471755600000L'];
let series1 = series.map((item) => {
let date = new Date(parseInt(item.replace("L", ""))));
return `${date.getMonth()} ${date.getFullYear()}`;
});

Struggling to get this JSON data into highcharts

I have the following snippet of code which takes data from a JSON URL and inputs it into MariaDB.
Now I want to take that data back out the database (as the database records the JSON over time), and then put this into a graph, but I am having difficulty in getting the data out the JSON URL into highcharts... My data looks like this:
[{"time":"1509488314","hashrate":"34096322642","minersTotal":"99"},
{"time":"1509490093","hashrate":"34096645609","minersTotal":"101"},
{"time":"1509490201","hashrate":"34096374421","minersTotal":"101"},
{"time":"1509490321","hashrate":"34138925733","minersTotal":"101"},
{"time":"1509490441","hashrate":"34062086317","minersTotal":"101"},
{"time":"1509490561","hashrate":"34116887228","minersTotal":"101"},
{"time":"1509490681","hashrate":"34053449517","minersTotal":"103"},
{"time":"1509490801","hashrate":"34060600882","minersTotal":"103"},
{"time":"1509490921","hashrate":"34065888457","minersTotal":"103"},
{"time":"1509491041","hashrate":"34093378965","minersTotal":"105"}]
I wish to basically plot the time across the X axis, and hashrate as a line and minersTotal as a bar.
I have done the PHP / MariaDB bit, but doing this part is proving to be a struggle for me.
My php code:
$mysqli = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $mysqli->query("SELECT * FROM hashrates LIMIT 100")) {
while($row = $result->fetch_object()) {
$myArray[] = $row;
}
echo json_encode($myArray);
}
$result->close();
$mysqli->close();
According this demo (Highcharts Demos › Dual axes, line and column). The data must be an array of values e.g: ["Item1", "Item2", "Item3"].
With your data, you can use Array#map().
var times = data.map(function(x) {
return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
return x.minersTotal * 1;
});
You can do something like this:
(function() {
var data = [{
"time": "1509488314",
"hashrate": "34096322642",
"minersTotal": "99"
},
{
"time": "1509490093",
"hashrate": "34096645609",
"minersTotal": "101"
},
{
"time": "1509490201",
"hashrate": "34096374421",
"minersTotal": "101"
},
{
"time": "1509490321",
"hashrate": "34138925733",
"minersTotal": "101"
},
{
"time": "1509490441",
"hashrate": "34062086317",
"minersTotal": "101"
},
{
"time": "1509490561",
"hashrate": "34116887228",
"minersTotal": "101"
},
{
"time": "1509490681",
"hashrate": "34053449517",
"minersTotal": "103"
},
{
"time": "1509490801",
"hashrate": "34060600882",
"minersTotal": "103"
},
{
"time": "1509490921",
"hashrate": "34065888457",
"minersTotal": "103"
},
{
"time": "1509491041",
"hashrate": "34093378965",
"minersTotal": "105"
}
];
var times = data.map(function(x) {
return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
return x.minersTotal * 1;
});
Highcharts.chart("container", {
chart: {
zoomType: "xy"
},
title: {
text: "Data"
},
subtitle: {
text: "Subtitle"
},
xAxis: [{
categories: times,
crosshair: true
}],
yAxis: [{ // Primary yAxis.
labels: {
format: "{value}",
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: "Hashrate",
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis.
title: {
text: "MinersTotal",
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: "{value}",
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: "vertical",
align: "left",
x: 120,
verticalAlign: "top",
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || "#FFFFFF"
},
series: [{
name: "MinersTotal",
type: "column",
yAxis: 1,
data: minersTotals,
tooltip: {
valueSuffix: ""
}
}, {
name: "Hashrate",
type: "line",
data: hashrates,
tooltip: {
valueSuffix: ""
}
}]
});
})();
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: 0 auto; min-width: 310px;"></div>
Let me know if this works for you.
I ended up going with this
$(function () {
var hashrates = new Array();
var minersTotal = new Array();
function refreshdata() {
$.getJSON("data.json", function(data) {
var hashrates = new Array();
var minersTotal = new Array();
for (i = 0; i < data.length; i++) {
var object = data[i];
var time = object.time * 1000;
hashrates.push([time, parseFloat(object.hashrate) / 1000000000]);
minersTotal.push([time, parseFloat(object.minersTotal)]);
}
$('#container').highcharts().series[0].setData(minersTotal, true);
$('#container').highcharts().series[1].setData(hashrates, true);
$('#container').highcharts().redraw();
});
}
$('#container').highcharts({
chart: {
backgroundColor: "rgba(0,0,0,0)",
color: "#FF0000",
alignTicks: false,
events: {
load: function () {
setInterval(function () {refreshdata();}, 60000);
}
}
},
title: {
text: "Pool performance"
},
subtitle: {
text: "3 days (15 min intervals)"
},
tooltip: {
shared: true,
valueDecimals: 2
},
legend: {
layout: "horizontal"
},
xAxis: {
title: {
text: "Time (UTC)"
},
type: "datetime",
showFirstLabel: true
},
yAxis: [{
title: {
text: "Hashrate (GH/s)"
},
labels: {
style: {
color: "#434348"
},
formatter: function() {
return this.axis.defaultLabelFormatter.call(this).toString().substr(0,4);
}
},
gridLineColor: "#434348",
tickInterval: 10,
min: 0
},{
title: {
text: "Miners",
style: {
color: "#95CEFF"
},
},
labels: {
style: {
color: "#95CEFF"
}
},
opposite: true,
tickInterval: 40,
gridLineColor: "#95CEFF"
}],
series: [{
name: "Miners",
type: "spline",
data: minersTotal,
yAxis: 1
},{
name: "Hashrate",
data: hashrates,
type: "spline"
}]
});
refreshdata();
});
It can be seen in action here: https://metaverse.farm/

Highchart : Unable to populate data from JSON

I was trying to learn highchart but when I am trying to populate the data from JSON it is not working fine. But I hardcode the data it works fine. So , I think I am doing some mistake while calling the JSON.
My JSON looks like :--
[{
"data": ["11-Aug 12:03", "11-Aug 12:45", "11-Aug 13:13", "11-Aug 13:53", "11-Aug 14:03", "11-Aug 14:33", "11-Aug 14:54", "11-Aug 15:17", "11-Aug 15:49", "11-Aug 16:07", "11-Aug 17:00", "11-Aug 17:33"]
}, {
"data": [23987, 24784, 25899, 255, 25897, 25668, 24114, 23899, 224987, 25111, 25899, 23]
}, {
"data": [12.4, 4.56, 3.8, 1.2, 11, 12.3, 5.67, 7.65, 34.5, 12.78, 10.5, 2.8]
}]
Adding whole code :--
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Job Status'
},
xAxis: [{
categories: [],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Transaction Count',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Time',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} min',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: []
}, {
name: 'Temperature',
type: 'spline',
data: []
}]
$.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
});
I am unable to create a JSFiddle to show the live example.
Can you please help in where I am doing wrong while calling the data from JSON.
Regards
Syntax of code is incorrect. Morefer you run highcharts two times. Fixed code:
$(function () {
var options = {
chart: {
zoomType: 'xy',
renderTo: 'container'
},
title: {
text: 'Job Status'
},
xAxis: [{
categories: [],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Transaction Count',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Time',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} min',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: []
}, {
name: 'Temperature',
type: 'spline',
data: []
}]
};
$.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function (json) {
options.xAxis[0].categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});

Categories