Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Curved Lines Using jQuery Flot Chart

Tags:

jquery

flot

I currently have a flot chart that is a pretty simple line graph. Trying to smooth out the curve using the CurvedLines plugin, but the points don't round out.

My code is here:

var d = [[2010, ], [2011, 0], [2012, 1000], [2013, 835000], [2014, 5100000], [2015, 15300000], [2016, 33400000], [2017, ]];


    var data1 = [{data: d, color: "#0086e5", points: { symbol: "circle", fillColor: "#ffffff", radius: 5 }, lines: {show: true}, points: {show: true}, curvedLines: {apply: true, monotonicFit: true}}];

    var options = {
             series: {
                 curvedLines: {active: true}                    
             }
          };

          /*series: {
            lines: { show: true },
            points: { show: true },
            curvedLines: {active: true}         
        },*/

    $.plot("#homechart",data1, {            

        xaxis: {
          tickColor: '#def2ff',
          tickDecimals: 0

        },

        yaxis: {
          tickLength: 0,
          show: false
        },
        grid: {
            backgroundColor: { colors: [ "#effaff", "#d7f3ff" ] },
            borderWidth: 0
        }

        });

        var ticklabel = $('.tickLabel');
        ticklabel.each(function(index, domElement) {
        var $element = $(domElement);

        if ($element.text() === "2010") {
            $element.hide();
        }

        if ($element.text() === "2017") {
            $element.hide();
        }
}, options);

The chart is generated but without the rounded curve.Flot Chart

like image 230
elke_wtf Avatar asked Jun 09 '26 20:06

elke_wtf


1 Answers

The options for the plot call are missing the

series: {
    curvedLines: {active: true}                    
}

(and min/max-value for the xaxis).

After adding this, it works: https://jsfiddle.net/khwc415t/

like image 115
Raidri Avatar answered Jun 11 '26 10:06

Raidri



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!