I am using jqplot for a bar graph that has 1 very high number around 7 million and 2 very low numbers, less than 100,000 when they are charted on a bar graph the two low numbers are only a couple of pixels tall, you can barely see them.
I am wondering if it is possible to use disproportionate intervals on the x axis for example the lower half of the chart would be say 0 - 100,000 and then the upper half would go from 100,000 - 7,000,000
I can't find it in the options anywhere, I've set custom 'ticks' but all that does is squeeze all the low numbers into a tiny space at the bottom.
Google is no help.
Here is what I have so far
function init_graph() {
var line1 = [19877, 6643895, $('#inpSalary').val()];
var tickers = ['low number', 'huge number', 'low number'];
plot1 = $.jqplot('jqplot', [line1], {
stackSeries: true,
legend: {
show: true,
location: 'ne'
},
title: 'Data per month stack by user',
seriesColors:['#fcbaac','#f5564d','#1e3045'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
// barPadding: 6,
// barMargin: 15,
barWidth: 60,
highlightMouseOver: true
}
// shadowAngle: 135
},
series: [{
label: 'User1'
}],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickers
},
yaxis: {
ticks: [0,20000,30000,40000,50000,60000,70000,80000,90000,100000,7000000],
min: 0
}
}
});
}
You could switch to using the LogAxisRenderer, which by default with give you a log base 10 scale on the y-axis:
<snip>
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickers
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
min: 100
}
}
<snip>
Related
I need to show some empty space to far right of the chart. To do so I use "overscroll" option (https://api.highcharts.com/highstock/xAxis.overscroll). But if user zoom in chart and pans chart to far right there can be empty space without any part of candlestick chart displayed (https://screencast-o-matic.com/watch/cqnfFq3CII). Please advise is it possible to implement following chart behaviour and how to do so: to keep some part of chart in visible area always, even if "overscoll" option is set and user pans chart to the far right? Thanks!
Here is my code:
var ohlc = JSON.parse(ohlcStringified),
volume = JSON.parse(volumeStringified);
var interval = ohlc[ohlc.length - 1].x - ohlc[ohlc.length - 2].x;
var chart = Highcharts.stockChart('container', {
chart: {
borderWidth: 1,
panning: true,
},
title: {
text: 'Chart'
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1,
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
},
yAxis: [{
height: '40%'
}, {
top: '40%',
height: '30%',
offset: 0
}, {
top: '70%',
height: '30%',
offset: 0
}],
series: [{
type: 'candlestick',
id: 'candlestick',
name: 'AAPL',
data: ohlc,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false,
}
}, {
type: 'column',
id: 'volume',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
enabled: false,
}
}]
});
Here is live demo: http://jsfiddle.net/ogorobets/bfcs9gx7/2/
It's possible, however, it requires some custom logic. It can be achieved using xAxis.events.afterSetExtremes callback where you can check if the current axis minimum is greater than your limit (a value lower than maximum xData value). When it is true, set new axis extremes with your limit as a minimum value. Check the code and demo posted below.
Code:
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
events: {
afterSetExtremes: function() {
var chart = this.chart,
xData = chart.series[0].xData,
maxValue = xData[xData.length - 5],
min = chart.xAxis[0].min,
max = chart.xAxis[0].max
if (min > maxValue) {
chart.xAxis[0].setExtremes(maxValue, max, true, false);
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/p6d73nk8/
API reference:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I am using Chartjs to display a time series line graph.
My setup is as following...
this.chartSetup = {
type: 'line',
data: {
labels: this.times,
datasets: [{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
label: title,
data: this.vals,
pointRadius: 0,
}]
},
options: {
spanGaps: true,
legend: {
position: 'bottom',
labels: {
boxWidth: 10
}
},
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
stepSize: 6,
unitStepSize: 5
},
type: 'time',
time: {
displayFormats: {
hour: 'h:mm a',
minute: 'h:mm a',
}
}
}],
},
}
};
Chart.defaults.global.animation.easing = "easeOutBounce";
this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);
My chart looks like the following screen shot
The data is Date for the X axis (Labels), and just numbers for the Y.
The time data goes from 6am to 6pm (12 hours worth)
I have a couple of issues here all relating to the X axis label formatting.
The initial 6am label is being cut off
How can I change the X axis label rotation (so perhaps by 90 degrees will fix the truncated first value)
My data goes to 6pm, but it is showing an extra X axis value (7pm). Can I get rid of this?
Thanks in advance for any suggestions here.
What worked for me was setting
autoskip: true
autoSkipPadding: 30
in the tick configuration.
1,2 - set minRotation = 90
3 - set Max value on your x axes
I've a little problem with jQplot. I'm trying to do a DateAxisRenderer like this :
http://tinyurl.com/p8v5coh
And i've this :
http://tinyurl.com/qd2lbxh
I don't want to make a rotation on my test. I just want to input a line break between my hour and my date.
There is my code :
var plot1 = $.jqplot('chart1', [test2], {
title:'Plot to test JQPLOT',
legend: {
show: true,
placement: 'outsideGrid'
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 0,
fontSize: '10pt'
}
},
axes: {
xaxis: {
label: "X Axis",
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H %#.2f %n %#.2f %#d-%#m-%Y',
},
//min:'June 16, 2008 8:00AM',
tickInterval:'14400000',
},
yaxis: {
label: "Y Axis",
renderer: $.jqplot.LogAxisRenderer,
tickOptions: {
angle: 0
}
}
},
highlighter: {
show: true,
sizeAdjust: 20,
},
cursor:{
show: true,
zoom: true,
showTooltip:false
},
series:[{showMarker:false}],
});
As you can see, i've tried '%n' as it's write in the [official doc][1].
I think it's idiot, but I can't solve this problem myself. The line break doesn't work.
Can you show me the right way?
Ty
jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html
jqplot sometimes does strange things with axes and labels. That's why I usually manually define my own axes ticks like this:
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Date',
tickOptions:{formatString:'%b %Y'},
pad: 0,
ticks: lsTicks,
renderer: $.jqplot.DateAxisRenderer
},
where lsTicks looks lomething like this:
["2014-01", "2014-02", "2014-03", "2014-04"]
and its length is the same as your data. To make things more readable, you can add tickOptions: {angle: -20},, so that your dates come in at an angle if you have too many to fit next to each other.
tickOptions:{formatString:'%b %Y'} says: display a 3 letter month, then a 4 digit year. For more options and info, see here.
Alternatively, you can use min, max and tickInterval, but I have found that they misbehave sometimes. See here and here for more.
I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data
If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).
I'm using some code based on jqplot which draws a barchart and allows toggling the series of the chart by clicking on the legendnames, see function code below.
Is it possible to control the series of various charts by means of only one legend? If so, how?
function drawBarchart(name,ticks,labels,s11,s12,s21,s22){
var plot1 = $.jqplot(name, [s11,s12,s21,s22], { //'chart1' -> define wrapper <div id='chart1'> </div>
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
seriesDefaults:{renderer:$.jqplot.BarRenderer, //choose bar chart
rendererOptions: {fillToZero: true},
pointLabels: { show: true, location: 'e', edgeTolerance: -15 } //adds values+labels to bars
},//seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[ //define labels
{label:labels[0], shadow: false},
{label:labels[1], shadow: false},
{label:labels[2], shadow: false},
],//series
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid',
renderer: $.jqplot.EnhancedLegendRenderer //enables toggling data and legends
},//legend
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {showGridline: false}
},//xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks:false,
label: 'axis1',
pad: 1.05,
tickOptions: { showGridline: false}
},//yaxis
y2axis: {
showTicks:false,
label: 'axis2',
pad: 1.05,
tickOptions: {showGridline: false}
}//yaxis
},//axes
series:[
{yaxis:'yaxis', label:'s11[0]'},
{yaxis:'y2axis', label:'s11[1]'},
{yaxis:'yaxis', label:'s12[0]'},
{yaxis:'y2axis', label:'s12[1]'},
{yaxis:'y2axis', label:'s21'},
{yaxis:'y2axis', label:'s22'},
]
}); //$.jqplot('chart1', [s1, s2, s3],
}//barchart
I have done it. here is the implementation on your code Jsfiddle Link
Take into consideration that you have to draw Legends by your self and not by using jqplot.
if you can do that then my code will take care of the rest.
$(document).ready(function () {
var graphObj = [];
var s11 = [["a",1],["b",1],["c",5],["d",2]];
var s12 = [["a",2],["b",2],["c",6],["d",5]];
var s21 = [["a",3],["b",3],["c",7],["d",1]];
var s22 = [["a",4],["b",4],["c",8],["d",8]];
drawBarchart("chart1", s11, s12, s21, s22, 0);
drawBarchart("chart2", s11, s12, s21, s22, 1);
$(".jqplot-table-legend tr").click(function(){
var index = this.rowIndex;
for(var j =0; j<graphObj.length; j++){
graphObj[j].series[index].show = !graphObj[j].series[index].show;
graphObj[j].redraw();
}
});
function drawBarchart(name, s11, s12, s21, s22, i) {
graphObj[i] = $.jqplot(name, [s11, s12, s21, s22], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid: {
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //choose bar chart
rendererOptions: {
fillToZero: true
},
pointLabels: {
show: false,
location: 'e',
edgeTolerance: -15
} //adds values+labels to bars
}, //seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
showGridline: false
}
}, //xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks: false,
label: 'axis1',
pad: 1.05,
tickOptions: {
showGridline: false
}
}, //yaxis
y2axis: {
showTicks: false,
label: 'axis2',
pad: 1.05,
tickOptions: {
showGridline: false
}
} //yaxis
}, //axes
series: [{
yaxis: 'yaxis',
label: 's11[0]'
}, {
yaxis: 'y2axis',
label: 's11[1]'
}, {
yaxis: 'yaxis',
label: 's12[0]'
}, {
yaxis: 'y2axis',
label: 's12[1]'
}, {
yaxis: 'y2axis',
label: 's21'
}, {
yaxis: 'y2axis',
label: 's22'
},
]
});
}
});