CODEWITHSUNDEEP
jqueryflot
elkefreed
elkefreed

Reputation: 964

Curved Lines Using jQuery Flot Chart

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

Upvotes: 3

Views: 3496

Answers (1)

Raidri
Raidri

Reputation: 17550

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/

Upvotes: 3

Related Questions