I like to reverse engineer the following highcharts chart: Bitconnect
This is so I can better calculate my intrest on that site.
Thank you
Dev tools -> source -> found element id -> searched source for id -> found code below.
$('#highchartload-closing-day').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
xAxis: [{
categories: date,
type: 'datetime',
crosshair: true
}],
yAxis: [{
labels: {
format: '{value} %',
style: {
color: '#FA890F'
}
},
title: {
text: 'Rate of interest',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
series: [{
name: 'Rate of Interest',
type: 'column',
yAxis: 0,
data: rate_of_interest,
color: '#FFC46D',
tooltip: {
valueSuffix: ' %'
}
}]
});
Related
The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.
I am trying to parse the data from the CSV file and I went through the instructions in http://www.highcharts.com/docs . However, the code provided use the parsed data directly to create a new chart and I cannot understand how to apply it to my current chart. I am trying to take the strings from CSV file and use them as arrays in JavaScript to substitute the numerical arrays in the code below.
This is the graph that needs to be used:
http://jsfiddle.net/strawberry/Cyxv6/
Data that needs to be taken from the file is the following:
categories: ['2010', '2011', '2012', '2013', '2014']
name: 'avocado'
...
data: [1600,1540,1350,1450,1600],
name: 'apples',
...
data: [39000, 40000, 40500, 41000, 42000],
name: 'oranges',
...
data: [8000, 5000, 4000, 4500, 3000],
name: 'bananas',
...
data: [4000, 6000, 4500, 5000, 4600],
The data from CSV file:
year avocado apples oranges bananas
y2010 1600 39000 8000 4000
y2011 1540 40000 5000 6000
y2012 1350 40500 4000 4500
y2013 1450 41000 4500 5000
y2014 1600 42000 3000 4600
The code:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'apples and oranges and bananas and avocado'
},
// subtitle: {
// text: 'Source: WorldClimate.com'
// },
xAxis: [{
categories: ['2010', '2011', '2012', '2013', '2014']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
},
title: {
text: 'other',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'fruits',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
align: 'center',
layout: 'horizontal',
x: 0,
title: {
text: '<span style="font-size: 11px; color: #666; font-weight: normal" >To single out the different datasets, please click on the respective names below:</span>',
style: {
fontStyle: 'italic'
}
}
},
series: [{
name: 'avocado',
color: '#d6bfe3',
type: 'column',
yAxis: 1,
data: [1600,1540,1350,1450,1600],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'apples',
marker: {
enabled: false
},
color: '#4da90c',
lineWidth: 3,
type: 'spline',
dataLabels: {
enabled: 'True'
},
data: [39000, 40000, 40500, 41000, 42000],
tooltip: {
valueSuffix: ''
}
},
{
name: 'oranges',
marker: {
enabled: false
},
color: '#f8a632',
lineWidth: 3,
type: 'spline',
data: [8000, 5000, 4000, 4500, 3000],
tooltip: {
valueSuffix: ''
}
},
{
name: 'bananas',
marker: {
enabled: false
},
color: '#939b9d',
style: "Dash",
lineWidth: 3,
type: 'spline',
dashStyle: 'longdash',
data: [4000, 6000, 4500, 5000, 4600],
tooltip: {
valueSuffix: ''
}
}
]
});
})
At the beginning you need to familiar how our parse works with our data. Then adapt parser to your data, to achive structure (like you have hardcoded). You need to also convert 'y2003' to year, by skipping first letter. (i.e by indexOf or match on string).
I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.
What is the JSON format that a high-charts speedometer accepts? Please help me on this as I am very new to high-charts.
A speedometer only requires one value for it's dataseries. e.g. data: [80] sets the speed to 80.
Here is a basic example which shows a speed of 80:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: {
min: 0,
max: 200,
title: {
text: 'km/h'
}
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
Here is an example of it, with a function updating it using point.update: http://jsfiddle.net/JYjP7/
I am new to Scencha. I am using a bar chart example of Scencha charts. I could not change colors of the charts, it comes by default. Where can I change the color in the following code? How can I transpose bar chart also, it comes as left to right?
var barChart = new Ext.chart.Panel({
title: 'Bar Chart',
layout: 'fit',
iconCls: 'bar',
dockedItems: {
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',
handler: onRefreshTap1
},
items: [{
xtype: 'chart',
cls: 'barcombo1',
theme: 'Demo',
store: store1,
animate: true,
shadow: false,
legend: {
position: {
portrait: 'right',
landscape: 'top'
}
},
interactions: [
'reset',
'togglestacked',
{
type: 'panzoom',
axes: {
left: {}
}
},
{
type: 'iteminfo',
gesture: 'taphold',
panel: {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details'
}],
html: 'Testing'
},
listeners: {
'show': function(me, item, panel) {
var storeItem = item.storeItem;
// panel.update('<ul><li><b>Month:</b> ' + storeItem.get('name') + '</li><li><b>Value: </b> ' + storeItem.get('2008') + '</li></ul>');
}
}
},
{
type: 'itemcompare',
offset: {
x: -10
},
listeners: {
'show': function(interaction) {
var val1 = interaction.item1.value,
val2 = interaction.item2.value;
barChart.descriptionPanel.setTitle('Trend from ' + val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
barChart.headerPanel.setActiveItem(1, {
type: 'slide',
direction: 'left'
});
},
'hide': function() {
barChart.headerPanel.setActiveItem(0, {
type: 'slide',
direction: 'right'
});
}
}
}],
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['TY', 'LY'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Hits (Billions)',
minimum: 0
},
{
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Weeks'
}],
series: [{
type: 'bar',
label: {
Field:'TY'
},
xField: 'name',
yField: ['TY', 'LY'],
axis: 'bottom',
highlight: true,
showInLegend: true
}]
}]
});
Change the type 'bar' to 'column' in the following snippet:
series: [{
type: 'bar',
label: {
Field:'TY'
},