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});
});
});
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()}`;
});
Create Line chart with JSON data using i have a data in json in following format:
Data
{"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]}
Highchart code:
$.post(trendUrl,params,function(data)
{
console.log("you are submitting"+data);
});
$('#trendChart').highcharts({
title: {
x: -20 //center
},
subtitle: {
x: -20
},
xAxis: {
gridLineWidth: 1,
categories: []
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
color:'#FBA208',
data: []
}]
});
Here i would like to plot categories in X and Series in y.
Thanks in advance
try:
$(function () {
data = {"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]};
$('#container').highcharts({
title: {
text: 'title',
x: -20 //center
},
subtitle: {
text: 'subtitle',
x: -20
},
xAxis: {
categories: data.Categoires
},
yAxis: {
title: {
text: 'yaxis'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'dd'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'data',
data: data.Series
},]
});
});
jsfiddle: http://jsfiddle.net/e2bm7wu8/
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);
});
});
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
}]
});
I would like to align the values shown on the right of the bar chart (34.4, 21.8, 20.1 etc.) to the far side of the chart as shown in the diagrams below:
Original:
Desired Right Alignment of Values:
I am using HighCharts, my code is:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: [ 50, 50, 100, 80],
inverted: true
},
title: {
text: 'World\'s largest cities per 2008'
},
xAxis: {
categories: [
'Tokyo',
'Jakarta',
'New York',
'Seoul',
'Manila',
'Mumbai',
'Sao Paulo',
'Mexico City',
'Dehli',
'Osaka',
'Cairo',
'Kolkata',
'Los Angeles',
'Shanghai',
'Moscow',
'Beijing',
'Buenos Aires',
'Guangzhou',
'Shenzhen',
'Istanbul'
],
labels: {
rotation: 0,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
' millions';
}
},
series: [{
name: 'Population',
data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
dataLabels: {
enabled: true,
rotation: 0,
color: 'Black',
align: 'right',
//x: parseFloat(this.y) + 10,
x: 40,
y: 10,
formatter: function() {
return this.y;
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
I have a jsFiddle here
I think it's not possible to do it using it's API yet.
But the following code can do it for you:
// #container is your chart container id
$('#container .highcharts-data-labels g').attr('transform', function(i, value) {
return value.replace(/\d+/, chart.containerWidth - 150);
});
If you inspect your chart content you'll see that each label has transform attr, this is used to place the labels into the chart, so the code above replace the first parameter(x) of it's attr.
demo
I had to do this for one of my projects. Here is the fiddle. http://jsfiddle.net/kashyap02004/veJ38/.
basically you have to render the values like this :
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 645, 203, 20]
}]
},
// this is where all the magic happens
function (chart) {
for (var i = 0; i < chart.series[0].data.length; i++) {
var point = chart.series[0].data[i];
var text = chart.renderer.text(
point.y, // you can display any property on that object.
//tweek these values to align it
chart.plotLeft + chart.plotSizeY - 30,
chart.plotHeight - point.barX + 45).attr({
zIndex: 5,
fill: '#666679',
}).add();
}
});