CODEWITHSUNDEEP
javascriptjquerychartsjqplot
Carlitos
Carlitos

Reputation: 419

How to make one line smooth and the other NOT on a chart?

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 enter image description here

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.

enter image description here

Upvotes: 1

Views: 257

Answers (3)

Devx
Devx

Reputation: 11

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" }
      }
]

Upvotes: 1

Richard
Richard

Reputation: 5101

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]

Upvotes: 0

tmurphree
tmurphree

Reputation: 87

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.

Upvotes: 0

Related Questions