I'd like to achieve time series, zoomable highcharts,like following picture, on ruby.
http://www.highcharts.com/demo/line-time-series
I've achieved the following line chart using lazy_high_charts However I have no idea how to get the time series chart. Could you tell me how to solve the problem?
def show
#graph = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'A/B Price')
f.xAxis(categories: #date_array)
f.plotOptions(line: {marker: {enabled: false}})
f.series(name: 'A/B', data: #rate_array)
end
end
Two things:
1) f.xAxis(categories: #date_array) - creates an array of categories, while you need f.xAxis(:type=> "datetime") instead. Also, #rate_array should be an array of arrays, like this:
[ [date_1, value_1], [date_2, value_2], ... ]
2) Change type from line to area, for example:
f.series(:type=> "area", :name=> 'A/B', :data=> #rate_array)
You need to add some area attributes to your plotOptions. A very simple example would be:
f.plotOptions(line:{marker: {enabled: false}}, area: {fillColor: '#000000'})
A more complex example is link on http://www.highcharts.com/demo/line-time-series:
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
By writing as following, I've got the chart like attached picture.
#graph = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'A/B')
f.xAxis(categories: #date_array)
f.yAxis(title: {text: 'Exchange rate'})
f.chart(
type: "area",
zoomType: 'x'
)
f.plotOptions(
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "rgb(255, 255, 255)"],
[1, "rgb(240, 240, 255)"]
]
},
marker: {
radius: 1
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: nil
}
)
f.series(name: 'A/B', data: #rate_array)
Related
I've drawn a column chart with gradient Highcharts library .
that you can see here
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
events: {
load: function() {
this.xAxis[0].setExtremes(0, 5);
}
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'S1',
'S2',
'S3',
],
crosshair: false,
gridLineWidth: 0,
tickWidth: 0
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'S1',
data: [30, 50, 100],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'red'],
[1, 'green']
]
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" ></div>
The problem is about gradient ,
I have three bars here
the first column value is 30
the second is 50
and last is 100
but gradient is the same for all !
(all of the have green and red )
and it is not right !
I want a gradient in order that
the first column to be in green zoon
something like this
How can I achieve it ?
From docs:
Note that linear gradients can be differently defined (as an array or
an object). Also, start/end positions might be calculated differently
depending on the gradientUnits property (this property can only be set
in linear gradient declared as object).
gradientUnits values:
userSpaceOnUse Default when gradient declared as an array. Start and end positions have to be declared as pixels on the chart.
objectBoundingBox Default when gradient declared as an object. Start and end positions are in the range of 0 to 1 as described above.
Using this might sometimes result in the disappearance of the coloured
element.
So, instead of object for linearGradient, use array (which has values in pixels).
color: {
linearGradient: [0, 0, 0, 400],
stops: [
[0, 'red'],
[1, 'green']
]
}
Live demo: https://jsfiddle.net/BlackLabel/tfxLpck1/
Docs: https://www.highcharts.com/docs/chart-design-and-style/colors
I am new to High Charts for drawing charts. My requirement is to draw a small vertical line on top of already drawn chart by specifying end coordinates. I can easily draw one using the JqPlot plugin and the image is given below.
The options I have used in JqPlot is
canvasOverlay: {
show: true,
objects: [
{line: {
name: 'stack-overflow',
lineWidth: 6,
start: [8, 0.5],
stop:[8, 0.7],
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
On some research I have found that I can use plotLines in High charts
Stackoverflow Post
I have tried this option but it draws a full length red vertical line and I don't see any option to restrict the length of the line.
The code I have used is given below
xAxis: {
min: 0,
max: 35,
tickInterval: 5,
title: {text: "Time"},
plotLines: [{
color: 'red',
width: 5,
value: 5.5
}]
}
UPDATE:
JSFiddle link is given below
JSFIddle
Am I missing something or do I need to try some other options
You could use the Highcharts renderer option
function (chart) {
var lineStartXposition2 = lineStartXposition + chart.plotLeft + 10,
lineStartYposition2 = lineStartYposition + chart.plotTop + 10,
lineEndXposition2 = lineEndXposition + chart.plotLeft + 10,
lineEndYposition2 = lineEndYposition + chart.plotTop + 10;
chart.renderer.path(['M', positionX, positionY, 'L', positionX, positionEnd])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
});
Update 3 : New fiddle using point coordinates and variables
Fiddle
I hope the following link will help you
chart.addSeries({
name: 'Line Marker Values',
type:'scatter',
marker: {
symbol:'hline',
lineWidth:2,
lineColor:'rgba(253,0,154,0.9)',
radius:12
},
data: [32,35,37,28,42,35,27]
});
click here
You can use appropriately configured scatter series for this.
var chart = Highcharts.chart('container', {
series: [{
data: [1, 3, 4, 5, 1]
}, {
tooltip: {
pointFormat: null // don't dispaly tooltip
},
states: {
hover: {
enabled: false
}
},
type: 'scatter', // points don't need to be sorted
lineWidth: 3,
marker: {
enabled: false
},
showInLegend: false,
data: [
[2, 3], [2, 5]
]
}]
});
Live demo: http://jsfiddle.net/kkulig/gab2ow7f/
I have a similar problem like posted on highchart chart redraw method is not refreshing the chart but I am working with polar chart, so the solution given there is not solving my issue.
So, the code below is showing the highchart correctly, but doesn't refreshing data. Now I'm asking for advice/help how to solve it.
$(function() {
$.getJSON('wind_graph.php?callback=?', function(dataWind) {
var direction = Wind_direction;
var polarOptions = {
chart: {
polar: true,
events : {
load : function () {
setInterval(function(){
RefreshDataWind();
}, 1000);
}
}
},
title: {
text: 'Wind Direction'
},
pane: {
startAngle: 0,
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
// the value axis
xAxis: {
tickInterval: 15,
min: 0,
max: 360,
labels: {
formatter: function() {
return this.value + '°';
}
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 30,
marker: {
enabled: false
},
},
}
};
// The polar chart
$('#graph-1').highcharts(Highcharts.merge(polarOptions, {
yAxis: {
tickInterval: 5,
min: 0,
max: 25,
visible: false
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: 'Direction',
data: [
[0, 0],
[direction, 20]
],
lineColor: '#7cb5ec',
enableMouseTracking: false,
visible: true,
lineWidth: 2,
zIndex: 8,
}
]
}));
function RefreshDataWind()
{
var chart = $('#graph-1').highcharts();
$.getJSON('wind_graph.php?callback=?', function(dataWind)
{
var direction = Wind_direction;
chart.redraw();
});
chart.redraw();
}
});
});
To be more precise: if given Wind_direction value is equal to 0 (zero), then I need to display on chart the following "spline":
{
type: 'spline',
name: 'CentralCicrleCalmWind1',
data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
pointInterval: 30,
pointStart: 0,
lineColor: windLineColor,
enableMouseTracking: false,
lineWidth: windLineWidth,
visible: showCentralCicrleCalmWind,
}, {
type: 'spline',
name: 'CentralCicrleCalmWind2',
data: [2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5],
pointInterval: 30,
pointStart: 0,
lineColor: windLineColor,
enableMouseTracking: false,
lineWidth: windLineWidth,
visible: showCentralCicrleCalmWind,
}
So as You can see, I have additional parameters like "showCentralCircleCalmWind" set to TRUE or FALSE depends on the given "Wind_direction" value and logic for this I have prepared at top of my code (not pasted here).
The thing what I need is:
Read value of variable in given JSON
Set variable "direction" at the begining of javascript code
Display the chart using higcharts library
Read the new value from JSON
Change the variable "direction" to the new value.
Display the new chart for a given value
Back to the point number 4...
Your problem may be helped by using the setData() function (see http://api.highcharts.com/highcharts/Series.setData).
In your example, I'd suggest the following:
function RefreshDataWind()
{
var chart = $('#graph-1').highcharts();
$.getJSON('wind_graph.php?callback=?', function(dataWind)
{
var direction = Wind_direction;
chart.series[0].setData(direction);
/* assuming "direction" to be an array like [1, 2, 3] */
});
}
The following Highcharts demo shows you how this works: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-setdata/
Depending on the format of your "Wind_direction" variable, you may need to have a statement before setData() that explicitly makes it an array, since that's what the function is expecting.
I'd also suggest you remove the second instance of chart.redraw(), as the setData() makes that unnecessary.
I hope this is helpful for you!
I've been trying to get this to work and I'm completely stuck. I think I've done everything properly. Included all needed file but my chart won't show when I use:
$('#index-container').highcharts('StockChart', {
my chart does not show. But when I use
$('#index-container').highcharts('Chart', {
chart shows but does not show the controls properly.
See my code below
$(function() {
$.getJSON('get-chart-data.php?series=c&x=NSE&s=<?php echo $secsymbol ?>&callback=?', function (data) {
$('#index-container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: true,
selected: 1
},
title: {
text: 'company'
},
series: [
{
name: 'symbol',
data: data,
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
}
}
]
});
});
});
<div id="index-container" class="col-md-12 col-sm-12 col-xs-12" style="min-height:450px; min-width: 480px"></div>
I'd appreciate if someone could help this has been a pain the last three hours.
Thanks in advance
Hey I need to convert zamel code to JavaScript Code. One of the controllers of zamel, allows monitoring of Scada alerts. I have the following controller:
The way this controller works:
we have 20 alerts on board, each alert has 3 states:
Ok State - color with green.
Alert state - color with yellow.
Danger state - color with red.
I need to build a controller using Highcharts API, The controller need to deal with real time data(update on live). The controller need to be responsive and collapsible.
Can I achieve this goals using HighCharts API , If so how.
I would be glad for any initial help in build this controller.
I think that in your case the best idea will be to use simple heatmap chart. It will give you a possibility of changing the data, resizing the chart, using tooltip etc.
Here you can find code that may help you:
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
title: {
text: 'Example'
},
colorAxis: {
stops: [
[0, 'green'],
[0.5, 'green'],
[0.49, 'yellow'],
[0.9, 'yellow'],
[0.9, 'red']
],
min: 0,
max: 1
},
legend: {
enabled: false
},
series: [{
borderWidth: 10,
borderColor: 'white',
keys: ['x', 'y', 'value', 'name'],
data: [
[0, 0, 1, 'name1'],
[0, 1, 0, 'name2'],
[0, 2, 0.5, 'name3'],
[0, 3, 0.5, 'name4'],
[0, 4, 0, 'name5'],
[1, 0, 1, 'name6'],
[1, 1, 0, 'name7'],
[1, 2, 1, 'name8'],
[1, 3, 0, 'name9'],
[1, 4, 0, 'name10']
],
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return (this.key)
}
}
}]
});
I have used 3 values: 0 for 'ok', 0.5 for 'alert' and 1 for 'danger'.
Here you can see an example how it can work: http://jsfiddle.net/d7zt64v4/1/