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);
});
});
Related
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()}`;
});
I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image
The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands
I am passing the ecpm as you can see below as ["0.4", "0.2", "0.6", "0.3"] to be the data for y axis to draw a spline on a multi axis graph, using highcharts. But it is drawing the spline as a straight horizontal line considering the values as 0. Values on tooltip for every point is also coming as 0.
Following is the script used:
$('#dual-axes-line-and-column4').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Some Matrix'
},
subtitle: {
text: ''
},
xAxis: [{
categories: perfCategoriesStr
}],
yAxis: [
{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
},
title: {
text: 'Views',
style: {
color: '#89A54E'
}
},
opposite:false
}, { // Secondary yAxis
title: {
text: 'Revenue in $',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}, { // Secondary yAxis
title: {
text: 'eCPM in $',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 70,
verticalAlign: 'top',
y: 10,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Views',
color: '#4572A7',
type: 'column',
data: views,
tooltip: {
valueSuffix: ' views'
}
}, {
name: 'Revenue',
color: '#89A54E',
type: 'spline',
yAxis:1,
data: revenue,
tooltip: {
valuePrefix: '$ '
}
}, {
name: 'eCPM',
color: '#000000',
type: 'spline',
yAxis: 1,
data: ecpm,
tooltip: {
valuePrefix: '$ '
}
}]
});
Just figured it out. The values passed should be a number rather than a string. Its working fine if we are passing javascript numbers in an array instead of string as you can see in the question.
how do i set a title of highcharts from an element?
here is my code:
$(function () {
var chart;
$('#second-chart').highcharts({
chart: {
type: 'bar'
},
subtitle: {
text: 'Assortment # by SKUs'
},
xAxis: {
categories: ['Lazada', 'C1', 'C2', 'C3']
},
yAxis: {
title: {
text: '# of SKUs'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'SKU',
data: [500, 120, 150, 300]
}]
});
chart = $('#container').highcharts();
$('#chart-modal').on('shown.bs.modal', function () {
var title_string = $(this).closest('.row').find('.form-control').val().toString();
chart.setTitle({ text: title_string});
// alert(title_string);
});
});
here is the jsfiddle: http://jsfiddle.net/omp4b291/
what am i doing wrong here
In your modal code you need to make use of parent() instead of children in order to access the textControl.
And when deciding on the highCharts, you have to map it with second-chart as you already defined that one only and since there is no #container you need to have that in one which is in your markup
Here is a Working Fiddle
Code Snippet
$(function () {
var chart;
$('#second-chart').highcharts({
chart: {
type: 'bar'
},
subtitle: {
text: 'Assortment # by SKUs'
},
xAxis: {
categories: ['Lazada', 'C1', 'C2', 'C3']
},
yAxis: {
title: {
text: '# of SKUs'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'SKU',
data: [500, 120, 150, 300]
}]
});
$('#chart-modal').on('shown.bs.modal', function () {
var chart = $('#second-chart').highcharts();
var title_string = $(this).parent().find('.form-control').val().toString();
console.log(chart);
chart.setTitle({ text: title_string});
});
});
Highcharts is displaying a chart perfectly in Chrome, but in Firefox, IE10, it returns the error:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]
This is the code I'm using:
$('#graf-1').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Titel'
},
subtitle: {
text: null
},
xAxis: [{
categories: datax
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value:,.0f} €',
style: {
color: cor1
}
},
title: {
text: null
}
}, { // Secondary yAxis
title: {
text: null //eixoz,
},
labels: {
format: '{value} %',
style: {
color: cor2
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: eixoz,
color: cor2,
type: 'line',
yAxis: 1,
data: dataz,
tooltip: {
valueSuffix: ' %'
},
zIndex: 2
}, {
name: eixoy,
color: cor1,
type: 'column',
data: datay,
tooltip: {
valueSuffix: ' €'
},
zIndex: 1
}]
});