We Keep Coding

Gradient for Highchart column in special way

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

Plot a a json chart with HighCharts & Vue.js

I'm trying to plot some data I have in my database. I'm following this jsfiddle for the structure. However even though I manage to get the data correctly from my API, the chart shows up but no data is plotted.
My app.js looks something like this:
// Load Sessions
var sessions = new Vue({
el: '#sessions',
delimiters: ["v{","}"],
data: { date:'', sessions:'', json:'', timestamp:''},
methods: {
loadSessions: function(){
var vm = this
axios.get('/api/v1/metrics/')
.then(function(response) {
vm.json = response.data
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Session Over Time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Sessions'
}
},
legend: {
enabled: false
},
plotOptions: {
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
}
},
series: [{
type: 'area',
name: 'Sessions',
data: vm.json
}]
});
})
}
}
})
The vm.json file looks like this:
[ { "date": "2017-01-02", "timestamp": 1483401600, "sessions": 1100 }, { "date": "2017-01-03", "timestamp": 1483488000, "sessions": 1159 }, { "date": "2017-01-04", "timestamp": 1483574400, "sessions": 1084 }]
And I load vue in my html with a simple:
<div id='sessions'>
<a class="button is-primary" #click='loadSessions'>Load Sessions</a>
<!-- Just to test that data is loaded correctly from API -->
<ul style="margin-left: 20px;">
<li v-for="item in json">
<b>Date: </b> v{item.date} <br />
<b>Sessions:</b> v{item.sessions} <br />
<b>Timestamp:</b> v{item.timestamp}
</li>
</ul>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
Now I think that my problem is on formatting the json, isn't it? The on in the jsfiddle example looks a bit different. How can I get my data to show up?

You can convert your data into the format that is shown in the example.
series: [{
type: 'area',
name: 'Sessions',
data: vm.json.map(d => [new Date(d.date).getTime(), d.sessions])
}]
I converted your date properties to Javascript Date objects in order to use getTime because your timestamp property, where ever it came from, is not a proper Javascript timestamp.
Example.

How to achieve Time series, zoomable highcharts on ruby

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)

Highchart Series Data Format for Google Spreadsheet

I'm attempting to use Highcharts Series function to create a combination bar/line chart, but I'm having trouble just getting the series to display. There's nothing in the API about how to format data from Google Spreadsheets when using series so I took a stab at it and the chart does not display:
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: '#fff',
shadow: false,
width: null,
height: null
}
});
$('#ms-96-enrollment').highcharts({
series: [{
type: 'bar',
data: [{
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 7
}],
}]
});
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<div>
<div id="ms-96-enrollment"></div>

Highcharts is a little bit misleading having two "data"s - in series and on top level. The first is used for javascript point arrays while the later is for facilitating adding existing datasets (http://api.highcharts.com/highcharts#data)
Thus for Google Spreadsheets
$('#ms-96-enrollment').highcharts({
chart: {
type: 'bar'
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 7
},
title: {
text: 'My google data'
},
yAxis: {},
xAxis: {
labels: {
enabled: true,
}
}
});
Here's the sample based on your data http://plnkr.co/edit/aIqMVcaeyYEbHcdxoMaT
UPDATE
If you need to show multiple series add extra columns and specify series:
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 2,
startRow: 0,
googleSpreadsheetWorksheet: 7
}
...
series: [{
type: 'bar'
}, {
type: 'line'
}]
Here's the updated sample http://plnkr.co/edit/UQprlugBtUXQX9OffUm4?p=preview

Highcharts - kind of hack for stick plot timeseries

Hi all from a highchart developer Pawel-fus on Highcharts official forum, I came to know that highchart doesn't support stick plot, and similar effects can be achieved using linked series.
I have u and v components which I want to show as stick using highcharts, So theoretically what I know is
A stick plot is a plot on the u-v plane. Suppose you have a time
series of a vector (u(t), v(t)). Then, you plot line segments
from (ct, 0) to (ct+u(t), v(t))
on the u-v plane for all values of t, where c is an arbitrary
constant. Each line segment represents the vector (u(t), v(t))
but its origin is shifted as (ct, 0).
So, the vertical axis is v and the horizontal axis is u.
But, the horizontal axis is "labeled" with time t, just for
convenience, to represent the shift of the origin (ct,0).
from Pawel-Fus help, I could able to implement theory like this, here x axis is numeric that is 0 - 3, checkout Fiddle - working theory
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'main',
id: 'main',
data: [
[0, 0],
[(-3.969 +0), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[1, 0],
[(-4.578 + 1), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[2, 0],
[(1.593 + 2), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[3, 0],
[(-1.622 + 3), 1.580]
]
}]
});
});
</script>
but my ultimate aim is to make time series plot, so I tried like this, here I replaced with date, unfortunately I didn't get result like above checkout Bad Fiddle
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats : {
year: '%e %b %Y',
}
},
series: [{
name: 'main',
id: 'main',
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 2, 16), 0],
[(-4.578 + Date.UTC(1982, 2, 16)), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 3, 16), 0],
[(1.593 + Date.UTC(1982, 3, 16)), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 4, 16), 0],
[(-1.622 + Date.UTC(1982, 4, 16)), 1.580]
]
}]
});
});
</script>
So what I am doing wrong with time series plot ? whether timeseries can be done like first working script ? and I want to add arrow for each stick on top
Someone please help me...
Please shout at me, if you need more clarification...
Thanks..

Your dates are too close to get any sort of slope to your line. Date.UTC returns milliseconds since 1/1/1970, so subtracting off only 3 or 4 milliseconds, will just produce vertical lines. This:
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
is equal to:
data: [
[382665600000, 0],
[382665599996.031, -1.001]
]