michaelzinsmaier / curvedlines Goto Github PK

The plugin seems to enter an endless loop when there's only one datapoint in the graph

If a line vertex falls on the x-axis, the curved line gets cut off? In the example screenshot, the minimum y-axis is 0 (time lapsed) and in this case, I don't want to show negative values in the y-axis range to make sure the line doesn't get cut off.

I'm trying to use the curved lines plugin with the stacked option and I get the problem of both the original and the curved lines data series being stacked -- creating a striped look and doubling the Y axis scale. Is there a workaround for this? Here is a jsfiddle showing the problem: http://jsfiddle.net/mcbridekm/K9p3H/

hi,
i'm using this plugin with flot 0.8.1 and i try to display tooltip but i cannot display it.
this my experiment http://jsfiddle.net/BkruN/2/
here is the example that i want
http://famille.lhuillier.free.fr/__essai_flot_tooltip.php

Hi,
I'm using flot curved lines. I have an issue.Curved line is not smooth. I have attached herewith a screenshot.

Here is the sample code snippet.
var options = {
series: {
curvedLines: {
active: true
}
},
xaxis: {
mode: "time",
tickSize: [1, "day"],
timezone: "browser",
timeformat: "%m/%d
%a",
min: 1393828200000,
max: 1394505000000,
tickLength: 0,
panRange: [1378809000000, 1394505000000],
dayNames: ["S", "M", "T", "W", "T", "F", "S"]
},
yaxis: {
panRange: [0, 500],
ticks: ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength: 0,
tickDecimals: 0
},
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
clickable: true,
hoverable: true
},
pan: {
interactive: true
}
};
var dataLinesArray = {
data: [
[1385490600000, 150],
[1386009000000, 450],
[1392834600000, 444],
[1393266600000, 100],
[1393353000000, 147],
[1393439400000, 105],
[1393525800000, 179.5],
[1393612200000, 85],
[1393871400000, 107.5]
],
lines: {
show: true
},
curvedLines: {
apply: true,
fit: true
},
clickable: false,
hoverable: false,
color: '#7D177A'
};
var Data = [];
Data.push(dataLinesArray);
$.plot("#placeholder", Data, options);

Is there a way of displaying tooltips for the original data points but not for the "helper" data points added to smooth the lines?

For an example, please see this fiddle. Is there any way to have tooltips appearing only on the original 24 data points?

Hi

I'm having the following issue:

I have a dataset which produces following graph.

Looks slick with curvedlines!

But the y-axis are percentages, when i set its min value to 0 i get the following curve.

The spots where it would head below the x-axis are flatted out. But it doesn't gradually go to zero...

I tried uncommenting the part in the code which did not allow negative values, but without effect. Any other propositions?

please see http://stackoverflow.com/questions/35259594/flot-multiple-line-graph-animation

I've been working on getting CurvedLines to work with the flot.tooltip plugin [https://github.com/krzysu/flot.tooltip] , and I'd like to be able to tell the difference between a "real" datapoint (ie, one that's actually defined in the user input data) vs. the dozens of points that are created by CurvedLines. Is there currently a way to do this? I'm hoping that either for each series or for each point, there would be a parameter such as:
this.plotOptions.series.curvedLines.data-type == "real-data" || "interpolated-data"
or something like this.

Can you suggest either a way of detecting this using the plugin as it is, or where I might look to insert such a datum into CurvedLines current output? I've puzzled over the code, but I can't figure out where one might start to implement such a thing.

Could you perhaps version this library and publish it through a CDN (e.g. CDNJS)?
That would make it much more accesbile.

To make it easy for users to use the library, you could supply the latest stable RawGit CDN link in the readme. To make it easy for people to use this CDN with fallback you could supply an expression to test whether the library has been loaded properly. Here is an example of CDN with fallback using jquery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>(window.jQuery)||document.write('<script src="/lib/jquery/script"><\/script>');</script>

Just switch window.jQuery with somthing that evaluates to true if CurvedLines has been loaded correctly like so:

<script src="https://cdn.rawgit.com/MichaelZinsmaier/CurvedLines/1.1.1/curvedLines.js"></script>
<script>([curvedlines_detection_expression])||document.write('<script src="[server_local_copy]"><\/script>');</script>

Hi

I have problems with the following dataset, using fit:true doesn't work. (plotting using fit: false is no problem)

Am i doing something wrong?

var d1 = [[1340316000000,0],[1342303200000,10], [1343685600000,0]];
var options = { series: { curvedLines: { active: true, fit: true }}};
$.plot($("#placeholder"), [
    {data:d1,lines:{show:true},curvedLines:{apply:true}},
    {data:d1,points:{show:true}}
], options);

I've installed this plugin in the newest version of Wordpress, but copy-pasted code (from examples) shows straight lines...

I suppose Wordpress is interfering with this plugin, but console is showing no errors (through examples are working flawlessly on local).

Is there any chance to get that working?

Trying to run curvedPoints with a "working" flot line chart errors out with pointsTop is null after calculateCurvePoints is called in processDatapoints. I'm entirely lost what might be the reason for this. Any ideas?

Thanks,
Andi

Hi,

In chrome, If I have less data points(2 or 3 or 4) and if my curvePointFactor is more say 100 or 200, curved line is not proper(it is either very thick line or it is slightly like zig-zag).

Additional info --> Virtual points are proper but curved line is screwed up. In third screenshot, Red dot line is virtual data points and the blue line is the curved line.

Here is the code snippet,
var options = {
series: {
curvedLines: {
active: true
}
},
xaxis: {
mode: "time",
tickSize: [1, "day"],
timezone: "browser",
timeformat: "%m/%d%a",
min: 1393396200000,
max: 1394073000000,
tickLength: 0,
panRange: [1378809000000, 1394505000000],
dayNames: ["S", "M", "T", "W", "T", "F", "S"]
},
yaxis: {
panRange: [0, 500],
ticks: ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength: 0,
tickDecimals: 0
},
pan: {
interactive: true
}
}

        var dataSet = [
            [1393525800000,60],
            [1393612200000, 50]
        ];


        var dataLinesArray = {
            data: dataSet,
            lines: {
                show: true
            },
            curvedLines: {
                apply: true,
                /*play with parameters (lines)*/
                //fitPointDist: 86400,
                curvePointFactor: 200,
                fit: true
            },
            clickable: false,
            hoverable: false,
            color: '#3BC2CF'
        };

        var dataShowVirtualPoints = {
            data: dataSet,
            points: {
                show: true
            },
            curvedLines: {
                apply: true,
                /*play with parameters (points)*/
                //fitPointDist: 86400,
                curvePointFactor: 200,
                fit: true
            },
            color:'red'
        };

        var Data = [];
        Data.push(dataLinesArray);
        /*see virtual points*/
        //Data.push(dataShowVirtualPoints);

        $.plot("#placeholder", Data, options);

Please look into this and tell me what might be the problem.

Thanks,
Raj

I tried to add CurvedLines (found in bower's registry as flot.curvedlines) to rails-assets.org but encountered the following error:

flot.curvedlines has no versions defined. Please create an issue in component's repository

Could you add the proper versioning so that this works?

Thanks!

hi,
In my example [(http://jsfiddle.net/jd9q53fw/61/)] curve line start with (0,0) but I need my line starts with (20,20)... how can I do this?

I am getting an error while using this plugin from jquery flot tooltop plugin ..

Uncaught TypeError: Cannot read property '0' of undefined
    at i.stringFormat (jquery.flot.tooltip.min.js:12)

The configuration is :

scope.flotChartData = [
          {
              "label": "High",
              "data": [[1487133026000, "150"], [1487219426000, "180"], [1487305826000, "60"], [1487392226000, "75"], [1487478626000, "194"], [1487565026000, "180"], [1487651426000, "130"]]
          },
{
   "label": "Medium",
   "data": [[1487133026000, "15"], [1487219426000, "60"], [1487305826000, "40"], [1487392226000, "175"], [1487478626000, "90"], [1487565026000, "75"], [1487651426000, "55"]]
},
{
   "label": "Low",
   "data": [[1487133026000, "112"], [1487219426000, "68"], [1487305826000, "160"], [1487392226000, "75"], [1487478626000, "94"], [1487565026000, "80"], [1487651426000, "20"]]
}
      ];

      scope.lineOptions = {
          series: {
            
              curvedLines: {
                  apply: true,
                  active: true,
                  monotonicFit: true

              },
              lines: {
                  show: true,
                  lineWidth: 2,
                  fill: true,
                  fillColor: {
                      colors: [
                          {
                              opacity: 0.0
                          },
                          {
                              opacity: 0.0
                          }
                      ]
                  }
              }
          },
          xaxis: {
              mode: "time",
              timeformat: "%m/%d",
              tickDecimals: 0
          },
          colors: ["#ed5565", "#f8ac59", "#3f51b5"],
          grid: {
              color: "#999999",
              hoverable: true,
              clickable: true,
              tickColor: "#D4D4D4",
              borderWidth: 0
          },
          legend: {
              position: 'ew'
          },

          tooltip: true,
          tooltipOpts: {
              content: "x: %x, y: %y"
          }
      };

As I tried to used curvedLines on a time series, I failed. After much eliminating, it seemed that it fails with non ordered data, eg the following does not smooth:

var d2 = [[1431129600000, 1004 ] , [1426377600000, 1023 ] , [1421539200000, 1018 ] ,
[1421452800000, 1022 ] , [1420934400000, 1004 ] , [1420848000000, 1003 ] , 
[1417219200000, 998 ] , [1414281600000, 993 ] , [1411257600000, 996 ] ];

http://jsfiddle.net/nojrc6hp/

I wanted to have a scattered and line (curved line) plot on the same canvas.
However, plugin "curves" all series in the plot. Any way (maybe parameter?) I can deal with it?

The changes made in Flot 0.8.0 cause data series that specify a fill to throw an error:

"Uncaught TypeError: Cannot read property '0' of undefined"

You can check this with the example https://github.com/MichaelZinsmaier/CurvedLines/blob/master/exampleFillMultiAxis.js

If you comment out "fill: true" the graph will display ok.

Using Flot version 0.7.0 all works fine.

Here is a jFiddle trying to use time. I've also included regular data to show that it works fine with regular data...

http://jsfiddle.net/UEePE/

Hi,
I'm using flot curved lines. I have an issue. Curved line is crossing the maximum point even after enabling "fit:true"

1. Please refer screenshots "Flot graph 1" where at 02/20 the line is going up and in "Flot graph 2" at 12/10 the line is coming down.
2. It some times goes up or down so much that it screws up the entire y-axis.

This is kind of urgent.

Here is the code snippet.

var options = {
series: {
curvedLines: {
active: true
}
},
xaxis: {
mode: "time",
tickSize: [1, "day"],
timezone: "browser",
timeformat: "%m/%d
%a",
min: 1393828200000,
max: 1394505000000,
tickLength: 0,
panRange: [1378809000000, 1394505000000],
dayNames: ["S", "M", "T", "W", "T", "F", "S"]
},
yaxis: {
panRange: [0, 500],
ticks: ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength: 0,
tickDecimals: 0
},
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
clickable: true,
hoverable: true
},
pan: {
interactive: true
}
};
var dataLinesArray = {
data: [
[1385490600000, 150],
[1386009000000, 450],
[1392834600000, 444],
[1393266600000, 100],
[1393353000000, 147],
[1393439400000, 105],
[1393525800000, 179.5],
[1393612200000, 85],
[1393871400000, 107.5]
],
lines: {
show: true
},
curvedLines: {
apply: true,
fit: true
},
clickable: false,
hoverable: false,
color: '#7D177A'
};
var Data = [];
Data.push(dataLinesArray);
$.plot("#placeholder", Data, options);

According to flot documentation null values on either axis should produce "breaks" when plotting line. With CurvedLines active this is not the case. Instead the line is leaving the graph area.