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 have created a dynamic bar graph using jqplot, the problem is that some values are quite big i.e. 10000000 and others are pretty small i.e. 2000 or 10000. Because of this range issue, i am only able to see the bigger valued graphs while the rest dont even appear up or appear as just a line on the axis.
Could someone please let me know how this range issue could be solved?
Following my comment, and your need to achieve a solution which includes jqplot bar chart, i'll suggest illustrating the massive difference of values by adding a second line graph to the plot.
$(document).ready(function(){
var data = [10000000, 5000000,10000,2000];
var options= {
title: 'Bar and Line Chart',
series:[{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 5,
fillToZero: true
},
pointLabels: {
show: true,
seriesLabelIndex:1,
hideZeros:false
}
}],
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
renderer: $.jqplot.CategoryAxisRenderer,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
padMin: 0,
pad: 1.1,
label: ' logarithmic scale',
rendererOptions: { forceTickAt0: true}
}
},
};
$.jqplot('graph', [data,data], options );
});
Here is a working solution in jsfiddle
This is what I would like to do.
my current options setting on axis:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xticks,
},
yaxis: {
min:0,
tickOptions: {formatString: '%1.0f'}
}
},
xticks is an array of strings. I can only get it to work if I dont use a renderer and my custom ticks, but I want to use my own specified ticks.
Thanks for the help!
Instead of fighting the CategoryAxisRenderer, I'd fudge it with the default numerical one:
var chartData = [[1.5, 2.61], [2.5, 5.00], [3.5, 6.00]];
var plot2 = $.jqplot('chart1', [chartData], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {barWidth: 50}
},
axes: {
xaxis: {
ticks: [[0,"Midnight"],[1,"1 AM"],[2,"2 AM"],[3,"3 AM"],[4,"4 AM"]]
},
yaxis: {
}
}
});
Produces:
Fiddle here.
A way to do it (not really a nice way I think) it's to use CSS.
You can move to your left the xaxis bloc thanks to jqplot-xaxis :
.jqplot-xaxis{
left: -15px;
}
If someone have a better way to do it (in ticks options), I'd like to hear about it.
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).