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]
]
Related
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!
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/
Hi every one I am using Highchart of columnrange type, i got chart from
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ and modified it according to my need , now i need months name in the x-axis and y-axis values are fixed . Currently i am not able to change the x-axis numbers to months.
My script is as :
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Employee Bill Pending Detail'
},
subtitle: {
text: 'Month Wise'
},
xAxis: {
categories: ['Bank Bill Pending', 'Clam Pending']
},
yAxis: {
title: {
text: 'Session (2013-14)'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Months',
data: [
[1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[2, 8] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
});
});
Any help will be highly appreciable.
This is actually really easy. Relevant API documenation:
dateFormat()
yAxis.type
You need to set your data up like this (or use explicit js timestamp):
series: [{
name: 'Months',
data: [
[Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
Note that Data.UTC() is zero based so that January is '0'. The last element in that list is the date. Since your data is just by month I made it '1'. You can have whatever you want here as the display on the dataLabel and the tooltip is handled with the dateFormat.
Example jsFiddle.
I am hoping someone out there can tell me if what I am trying to do is even possible with the FLOT Javascript library. I am trying to show a chart (below) with dual axis and three data sets. One data set is on the left axis and two data sets on the right axis. What I really want to be able to do is stack the two data sets on the right axis since they should show cumulatively. Thus far I have been unable to get this chart to respond to the stack: true setting at all.
If anyone could help me out with it I would GREATLY appreciate it. My code and a snapshot of the chart currently. I am trying to stack the blue and green areas which correspond to the right axis (y2).
$(function () {
var previousPoint;
var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]];
var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]];
var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]];
var ds = new Array();
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 3,
}
});
//tooltip function
function showTooltip(x, y, contents, areAbsoluteXY) {
var rootElt = 'body';
$('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y - 35,
left: x - 5,
border: '1px solid #000',
padding: '1px 5px',
'z-index': '9999',
'background-color': '#202020',
'color': '#fff',
'font-size': '11px',
opacity: 0.8
}).prependTo(rootElt).show();
}
//Display graph
$.plot($("#placeholder1"), ds, {
grid:{
hoverable:true
},
xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ],
yaxes: [ { min: 0,
tickFormatter: function numberWithCommas(x)
{
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
},
}
],
y2axis: [ ],
legend: { show: true }
});
});
This is very straightforward. The stacking plugin isn't well documented, but in the source code, you can see there are two ways to specify that you want stacking turned on.
Two or more series are stacked when their "stack" attribute is set to
the same key (which can be any number or string or just "true"). To
specify the default stack, you can set
series: {
stack: null or true or key (number/string) }
or specify it for a specific series
$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
In this case, we want to specify it within the two series objects that we want stacked, which would look like this:
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 3,
}
});
Add those two stack:true bits and include the stack plugin into your javascript sources and that will do it. See it in action here: http://jsfiddle.net/ryleyb/zNXBd/