i tried to create this charts with area chart but i can't get it to work :
here is the jsfiddle : http://jsfiddle.net/okc8q0zn/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
categories: [67,69]
},
credits: {
enabled: false
},
series: [ {
name: '67',
data: [24,24],
color: '#0F0'
}, {
name: '69',
data: [ 17,17],
color: '#00F'
}]
});
});
thank you.
You will need to customize the xAxisand the yAxis to only show the desired values and some modification on the series too like this :
xAxis: {
max: 80,
tickInterval: 1,
tickWidth: 0,
labels: {
step: 1,
formatter: function() {
if (this.value === 67 || this.value === 69) {
return this.value;
}
}
}
},
yAxis: {
max: 30,
tickInterval: 1,
tickWidth: 0,
gridLineWidth:0,
labels: {
step: 1,
formatter: function() {
if (this.value === 17 || this.value === 24) {
return this.value;
}
}
}
},
series: [{
name: '67',
data: [{
x: 0,
y: 17
}, {
x: 69,
y: 17
}],
color: 'rgba(30,80,250,0.5)'
}, {
name: '69',
data: [{
x: 0,
y: 24
}, {
x: 67,
y: 24
}],
color: 'rgba(250,250,50,0.3)'
}]
Fiddle
Related
I'm trying to plot a scatter plot using the Highcharts library. I get some results from my database and format them in front end level using javascript (transformGraph2Data function in the following code does this work - I don't include the code of this function here to keep the question clear and short). More specifically I have the following piece of code:
<script type="text/javascript">
var graph2dataa;
function plotGraph2() {
graph2dataa = transformGraph2Data(<%=graph2data%>);
console.log(graph2dataa);
console.log(typeof graph2dataa);
Highcharts.chart('graphDiv2', {
chart: {
type: 'scatter',
zoomType: 'xy',
events: {
click: function (e) {
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
series.addPoint([x, y]);
}
}
},
xAxis: {
title: {
enabled: true,
text: '<b><%=graph2XaxisTitle%></b>'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2
}]
},
yAxis: {
title: {
text: '<b><%=graph2YaxisTitle%></b>',
style: {
fontWeight: 'normal'
}
},
plotLines: [{
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2
}]
},
plotOptions: {
series: {
cursor: 'pointer',
turboThreshold: 0
},
scatter: {
marker: {
radius: 2,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
}
}
},
graph2dataa //THIS VARIABLE HOLDS THE ACTUAL DATA I'D LIKE TO PLOT
});
}
</script>
The graph2dataa variable gets the following string value:
series: [{ name: "22h - 4h", color: "#000000", data: [{ name: "HACD3", x: 0.417666669, y: 1.841010179 }, { name: "VPS53", x: 0.113499999, y: 0.153579771 }, { name: "IPO11", x: -0.300000004, y: 0.734065117 }, { name: "FIP1L1", x: 0.067000012, y: 0.165934747 }, { name: "HSPE1", x: 0.186666687, y: 0.407514478 }] }] which is valid and can be plotted if I hardcode it. The problem occurs when I try to pass that value using the graph2dataa variable.
Any ideas what am I doing wrong?
Highcharts require a specific series structure and it should be an array of object, not a string. Your transformGraph2Data function should return the correct structure, which looks this way:
var graph2dataa = [{
name: "22h - 4h",
color: "#000000",
data: [{
name: "HACD3",
x: 0.417666669,
y: 1.841010179
}, {
name: "VPS53",
x: 0.113499999,
y: 0.153579771
}, {
name: "IPO11",
x: -0.300000004,
y: 0.734065117
}, {
name: "FIP1L1",
x: 0.067000012,
y: 0.165934747
}, {
name: "HSPE1",
x: 0.186666687,
y: 0.407514478
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4ath23yo/
Please refer below JS fiddle link.
https://jsfiddle.net/2pd1natw/1/
// this is my JS for reference
$(function () {
var k = 0;
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'xy',
events: {
drilldown: function (e){
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'2015':{
name: '2015',
data: [
['Q4-2015',89]
]
},
'2016':{
name: '2016',
data: [
['Q2-2016',95],
['Q3-2016',99]
]
}
},
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
],
yAxis: 1
},
'2016':{
type: 'spline',
name: '2016',
yAxis: 1,
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
series = drilldowns[e.point.name],
seriesLine = drilldownsLines[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Rental & Capital Value Trend'
},
exporting: {
enabled: true,
csv:{
columnHeaderFormatter:function(item, key, series){
if(key === '' || key === undefined){
return 'Period';
}else if(key === 'y' && k == 0){
k = k + 1;
return 'Rental Value (INR/SF/Month)';
}else if(key === 'y' && k == 1){
k = 0;
return 'Capital Value (INR/SF)';
}
}
},
buttons:{
contextButton:{
menuItems: [{
textKey: 'downloadCSV',
onclick: function (){
this.downloadCSV();
}
}]
}
}
},
xAxis: {
type: 'category',
},
yAxis: [{
min: 0,
title: {
text: 'Rental Value (INR/SF/Month)'
},
labels: {
format: '{value}'
}
}, {
min:0,
tickInterval:5,
title: {
text: 'Capital Value (INR/SF)'
},
labels: {
format: '{value} K'
},
opposite:true
}],
tooltip:{
formatter:function(){
var s='';
$.each(this.points, function () {
if(this.series.type == 'spline'){
s += '<br/>Capital Value : ' + this.y+ 'K';
}else{
s += '<br/> Rental Value : ' + this.y;
}
});
return s;
},
shared:true
},
legend: {
layout: 'horizontal',
align: 'left',
size: '12px',
x: 50,
verticalAlign: 'bottom',
y: 20,
floating: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Renatl Value (INR/SFT/Month)',
color: '#EE8908',
data: [
{
name: '2015',
y: 89,
drilldown: true
}, {
name: '2016',
y: 90,
drilldown: true
}
]
},{
name:'Capital Value (INR/SF)',
color:'#F8BB6C',
type:'spline',
yAxis:1,
data:[
{
name:'2015',
y:11.45
},{
name:'2016',
y:15.22
}
],
tooltip: {
valueSuffix: 'K'
}
}
],
drilldown: {
/*activeAxisLabelStyle: {
textDecoration: 'none'
},*/
series: []
}
});
});
There are two scenarios where I got stuck.
when I try to export chart as csv after drill down downloaded file name should be "Quarterly rental-capital trend" and before drill down "Yearly rental-capital trend".
e.g. before drill down file name should be like "Yearly rental-capital trend.csv"
after drill down file name should be like "Quarterly rental-capital trend.csv"
after exporting to csv the capital value should be append with "K".
e.g. period | rental value | capital value
2015 | 90 | 11.15 K
Any help will be appreciated and thanks and advance.
I am having problems with polar chart customization. I would like two nested circles.
Here's the fiddle and this is the result I would like to get:
- Expected Result:
$(function () {
var data = [{"name":"ビタミンA","y":3650,"color":"#9fe642","bg_color":"#F9D5B5","compare":"過剰"},{"name":"ビタミンB1","y":2783,"color":"#274ffb","bg_color":"#BBDEE8","compare":"不足"},{"name":"ビタミンB2","y":3616,"color":"#705ba4","bg_color":"#D8E4BE","compare":"適度"},{"name":"ビタミンC","y":3661,"color":"#a54593","bg_color":"#F9D5B5","compare":"過剰"},{"name":"カルシウム","y":2783,"color":"#d1d700","bg_color":"#BBDEE8","compare":"不足"},{"name":"鉄","y":3615,"color":"#06675e","bg_color":"#BBDEE8","compare":"不足"}];
Highcharts.chart('polar-chart', {
chart: {
polar: true
},
title: {
text: ''
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
backgroundColor: {
linearGradient: {x1: 1, y1: 1, x2: 1, y2: 1},
stops: [
[0, '#FFF'],
[1, '#F9D5B5']
]
},
borderWidth: 0,
outerRadius: '100%'
}
]
},
xAxis: {
tickInterval: 60,
min: 0,
max: 360,
labels: {
formatter: function () {
if (this.value == 0) {
return 'ビタミンA';
} else if (this.value == 60) {
return 'ビタミンB1';
} else if (this.value == 120) {
return 'ビタミンB2';
} else if (this.value == 180) {
return 'ビタミンC';
} else if (this.value == 240) {
return 'カルシウム';
} else {
return '鉄';
}
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 60,
dataLabels: {
enabled: false,
format: ''
}
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Nutrition',
data: data,
showInLegend: false,
zIndex: 3,
},
{
type: 'column',
name: 'Line',
data: [{
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}],
zIndex: 2,
pointPlacement: 'between',
showInLegend: false,
},
{
type: 'column',
name: 'Line',
data: [{
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}],
zIndex: 1,
pointPlacement: 'between',
showInLegend: false,
},
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="polar-chart" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
Use yAxis.plotBands. One plot band per circle.
yAxis: {
plotBands: [{
from: 0,
to: 25000,
color: 'blue'
}, {
from: 25000,
to: 50000,
color: 'green'
}, {
from: 50000,
to: 75000,
color: 'red'
}],
example: http://jsfiddle.net/jLctf348/
I am using Highchart library but very disappointed after using the same. Highchart call back function formatter not working for me for any of the chart.
I am using Highchart API, It return image of the chart. but with wrong x-axis value. I want value to be "hello1, hello2, hello3 etc." but it only gives me number 1, 2, 3...
Please help me.
Link Of Js Fiddle : https://jsfiddle.net/stjk38rz/
Code is
var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness'],
count = 0;
var options = {
exporting: {
url: 'https://export.highcharts.com/'
},
chart: {
polar: true,
renderTo: 'container',
zoomType: 'x'
},
pane: {
startAngle: 45,
},
title: {
text: 'Highcharts Polar Chart'
},
xAxis: {
tickInterval: 1,
min: 0,
max: 6,
labels: {
enabled: true,
formatter: function () {
if(this.value.toString().substring(0, 6) == 0)
{
return "hello1";
}
if(this.value.toString().substring(0, 6) == 1)
{
return "hello2";
}
if(this.value.toString().substring(0, 6) == 2)
{
return "hello3";
}
if(this.value.toString().substring(0, 6) == 3)
{
return "hello4";
}
if(this.value.toString().substring(0, 6) == 4)
{
return "hello5";
}
if(this.value.toString().substring(0, 6) == 5)
{
return "hello6";
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + categories[Highcharts.numberFormat(this.x, 0) - 1] + '</b><br/>' + 'value: ' + this.y;
}
},
yAxis: {
labels: {
enabled: false
},
min: 0,
tickInterval: 10,
tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
minorTickInterval: 0
},
plotOptions: {
series: {
pointStart: 0.5,
pointInterval: 1
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'test data',
data: [{
y: 9.5,
color: '#0FCCD9'
}, {
y: 1,
color: '#ED1334'
}, {
y: 3,
color: '#EDCC13'
}, {
y: 4,
color: '#34ED13'
}, {
y: 5,
color: '#34ED13'
}, {
y: 6,
color: '#34ED13'
}]
}]
};
var obj = {},
exportUrl = options.exporting.url;
obj.options = JSON.stringify(options);
obj.type = 'image/png';
obj.async = true;
$.ajax({
type: 'post',
url: exportUrl,
data: obj,
success: function (data) {
var imgContainer = $("#imgContainer");
$('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
$('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);
}
});
It appears that formatter isn't being called at all.
This could be because it's a polar chart or possibly there's some other conflict in your code overriding this?
As long as you only want text, you can pass the text in as categories, ie:
var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness']
xAxis: {
categories: categories
}
Updated fiddle
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle