Related
So I'm looking for a way to make one of the lines on my chart NOT smooth and the other smooth. There is a master option to make every line on the chart smooth but not a particular line that I know of.
Here is my chart of what it looks like
PS. Im using JQ Plots http://www.jqplot.com/index.php
Here is my JS code.
//STOCK HIGH VS LOW
var line1 = [['2017-11-27',175.0800],['2017-11-28',174.8700],['2017-11-29',172.9200],['2017-11-30',172.1400],['2017-12-01',171.6700],['2017-12-04',172.6200],['2017-12-05',171.5200],['2017-12-06',170.2047],['2017-12-07',170.4400],['2017-12-08',171.0000],['2017-12-11',172.8900],['2017-12-12',172.3900],['2017-12-13',173.5400],['2017-12-14',173.1300],['2017-12-15',174.1700],['2017-12-18',177.2000],['2017-12-19',175.3900],['2017-12-20',175.4200],['2017-12-21',176.0200],['2017-12-22',175.4240],['2017-12-26',171.4700],['2017-12-27',170.7800],['2017-12-28',171.8500],['2017-12-29',170.5900],['2018-01-02',172.3000],['2018-01-03',174.5500],['2018-01-04',173.4700],['2018-01-05',175.3700],['2018-01-08',175.6100],['2018-01-09',175.0600],['2018-01-10',174.3000],['2018-01-11',175.4900],['2018-01-12',177.3600],['2018-01-16',179.3900],['2018-01-17',179.2500],['2018-01-18',180.1000],['2018-01-19',179.5800],['2018-01-22',177.7800],['2018-01-23',179.4400],['2018-01-24',177.3000],['2018-01-25',174.9500],['2018-01-26',172.0000],['2018-01-29',170.1600],['2018-01-30',167.3700],['2018-01-31',168.4417],['2018-02-01',168.6200],['2018-02-02',166.8000],['2018-02-05',163.8800],['2018-02-06',163.7200],['2018-02-07',163.4000],['2018-02-08',161.0000],['2018-02-09',157.8900]];
var line2 = [['2017-11-27',173.3400],['2017-11-28',171.8600],['2017-11-29',167.1600],['2017-11-30',168.4400],['2017-12-01',168.5000],['2017-12-04',169.6300],['2017-12-05',168.4000],['2017-12-06',166.4600],['2017-12-07',168.9100],['2017-12-08',168.8200],['2017-12-11',168.7900],['2017-12-12',171.4610],['2017-12-13',172.0000],['2017-12-14',171.6500],['2017-12-15',172.4600],['2017-12-18',174.8600],['2017-12-19',174.0900],['2017-12-20',173.2500],['2017-12-21',174.1000],['2017-12-22',174.5000],['2017-12-26',169.6790],['2017-12-27',169.7100],['2017-12-28',170.4800],['2017-12-29',169.2200],['2018-01-02',169.2600],['2018-01-03',171.9600],['2018-01-04',172.0800],['2018-01-05',173.0500],['2018-01-08',173.9300],['2018-01-09',173.4100],['2018-01-10',173.0000],['2018-01-11',174.4900],['2018-01-12',175.6500],['2018-01-16',176.1400],['2018-01-17',175.0700],['2018-01-18',178.2500],['2018-01-19',177.4100],['2018-01-22',176.6016],['2018-01-23',176.8200],['2018-01-24',173.2000],['2018-01-25',170.5300],['2018-01-26',170.0600],['2018-01-29',167.0700],['2018-01-30',164.7000],['2018-01-31',166.5000],['2018-02-01',166.7600],['2018-02-02',160.1000],['2018-02-05',156.0000],['2018-02-06',154.0000],['2018-02-07',159.0685],['2018-02-08',155.0300],['2018-02-09',150.2400]];
var plot2 = $.jqplot('chart1', [line1, line2], {
title: 'AAPL High vs Low',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: { show: true },
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d, %#I %p' },
min: 'November 20 2017',
tickInterval: '1 month'
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'average',
y: 171.21, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: '#FF5555',
shadow: false
}}
]
},
series: [{ lineWidth: 4,
markerOptions: { style: 'square' }
}],
series: [
{ label: 'High' },
{ label: 'Low' }
],
});
If it cant be done in JQ Plots, do you guys know of any other charts that can do this.
Pretty much Im looking for a chart to look like this in the end.
Replying kinda late but..
Yes you can do it in jqplot as well.
Instead of using a seriesDefaults option, go directly and add it in each series you want:
series: [
{
// custom line
lineWidth:2,
markerOptions: { style:'diamond' }
},
{
// here is your smooth line
rendererOptions: {
smooth: true,
},
markerOptions: { style:"circle" }
}
]
Disclaimer: I read it on the internet . . . but apparently d3 can do this (https://gist.github.com/thiyagu-p/3925981). Also, if you Google 'd3 moving average and volume' you get some interesting results. YMMV.
I don't know about jqPlot but you could certainly do this with RGraph:
https://www.rgraph.net/demos/svg-line-trading.html
And if you wanted the gray decorative bar at the back you could use another Bar chart to get this effect before drawing the Line charts and give it some dummy data of:
[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1]
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'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'
},
]
});
}
});
I am using below code to show Y axis of jqPlot at right side but its only showing me at left side:
$.jqplot.config.enablePlugins = true;
var test2 = readXML(posi);
plot2 = $.jqplot('chart2', [test2], {
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: true, wickColor: '282828',
upBodyColor: '00C000', fillUpBody: true, downBodyColor: 'F81700',
fillDownBody: true, lineWidth: 1.5, tickLength: true, background: 'C8C8C6',
closeColor: '282828', openColor: '282828'
}
}, { xaxis: 'x2axis', yaxis: 'y2axis'}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 30
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
x2axis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
autoscale: true
},
y2axis: {
autoscale: true
}
}
});
Please tell me where I am where my mistake is.
I have got the code above from the reference: http://www.jqplot.com/tests/canvasAxisTests.php in this the third example is showing values of at right side. I am using candlestick chart of jqPlot.
Thanks
Take a look at the CSS file that comes with the jqplot. It defines the settings for the jqplot-yaxis, and so you can use that for setting the desired location.
I want to know how to make vary color bar for two series in Jqplot. If I have only one series data, it works perfectly like the image below
The red and green color based on its value.
But if I have two series data, I can't configure to have two series color for each series data. So far, I can only make this graph
I want the two series graph can have vary color based on its value as well as the one series graph.
This is my code
chart = $.jqplot('map-chart', [dataChart, dataChart2], {
title: 'TIME',
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'ne'
},
series: [{label: 'Current data'}, {label: 'Worst data'}],
//seriesColors: seriesColors1,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
//rendererOptions:{
//varyBarColor: true
//}
},
axes: {
xaxis: {
label: 'station',
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: tickers,
tickOptions: {
angle: -30
}
},
yaxis: {
min: 0,
label: 'Time',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
fontSize: '8pt'
}
}
},
highlighter: {show: false}
});
I have tried seriesColors : [seriesColors1, seriesColors2] but it didn't work.
Basically you need to create a series array, that contains a dictionary per entry, with a seriesColors entry. A working example is shown in the following jsfiddle:
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]],
{
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true }
},
series: [
{seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']},
{seriesColors: ["#a30", "#4b0", "#b40", '#af0', '#fa0']}
],
highlighter: { show: false }
});
(The fiddle may stop working if I the external js files are changed; jsfiddle doesn't have jqplot libraries by default.)
I came across this today and as dr jimbob had predicted, all the external files had succumbed to link rot. I found a CDN site and updated the fiddle to the latest jQuery & JQPlot resource files, available here: http://jsfiddle.net/delliottg/WLbGt/96/
Just to satisfy the JSFiddle cop on SO that won't let me post this w/o it:
//this is not my code, it's only here to satisfy the SO require that fiddles have
// code associated with them
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true }
},
series: [
{seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']},
{seriesColors: ["#00f", "#b0b", "#a30", "#4b0", '#af0']}
],
highlighter: { show: false }
});
I had nothing to do with the fiddle itself, I just updated it so it worked. Hope this helps someone (turns out it wasn't what I was looking for, but ya pays yer money & ya takes your chances).