axis options getting ignored

33 views
Skip to first unread message

NRaj005

unread,
Jul 22, 2020, 9:27:21 AM7/22/20
to Flot graphs

My aim is to plot two sets of data with dots of chosen color.  Also required are the customization of  for x and y axis with min, max and ticks.

The following code clipping is what I have,   "placeholder1" is where I show two sets of data. The data are plotted but the xaxis and yaxis options are getting ignored, they are getting auto scaled.  Also, the fillColor option is being ignored, though the "show" and "fill" settings are obeyed.

For "placeholder2" all is ok. What is wrong with the code for "placeholder1" ? I followed this example.  Am I seeing the wrong example? Thanks for helping me out!

var options = {
  points
: { show: true, fill: true,fillColor: "rgba(255,0,0 ,1)"},
  xaxis
: { min: 0,  max:63, ticks:16},
  yaxis
: { min: 0,  max:9, ticks:9},
  colors
: ["#FF0000"],
 
};

//$.plot($("#placeholder1"), [d1],options);

$
.plot($("#placeholder1"), [
   
{
       data
: d1,
       xaxis
: { min:0, max:63, ticks:16 },
       yaxis
: { min:0, max:9, ticks:9 },
       points
:{ show: true, fill: false, fillColor: "rgba(255,0,0,1)"},
       colors
: ["#0000ff"]
   
},
   
{
       data
: d3,
       points
: { show: true, fill: true, fillColor: "rgba (0,255,0,1)"},
       colors
: ["#00FF00"]
   
}
 
]
);

$
.plot($("#placeholder2"), [d2],options);



NRaj005

unread,
Jul 22, 2020, 9:27:23 AM7/22/20
to Flot graphs
My aim is to show a single plot with two datasets d1 and d3 shown with red and yellow dots. See code below, "placeholder1".  Flot displays the data points without error, however the problem I face is that the options for xaxis and yaxis are ignored and the plot is shown autoscaled. Likewise, the "fillColor" is ignored even though the "show" and "fill" settings are obeyed.

No such problems with placeholder2 display.

I looked up this example. Did I look up the wrong example? Is there something wrong with my code? Thanks for helping me out!

Ced

unread,
Jul 22, 2020, 5:50:04 PM7/22/20
to Flot graphs
It looks like there's some confusion as to where each option belongs.

There are plot options and series options.  Series options that apply to all series may be specified in plot options.  And these series options may be overridden in the individual series objects.

- Flot isn't ignoring the options.  Your code sample doesn't specify any options for placeholder1.
- `colors` is an array of colors that Flot will use to choose colors sequentially for each series.  If you only specify one color, Flot will only use one color.  In your case it's probably best to leave this option unchanged.

This example seems to be working for what you want:

Jonathan Meyer

unread,
Jul 22, 2020, 5:56:31 PM7/22/20
to Flot graphs
So, the 'xaxis' and 'yaxis' parameters you are setting alongside the data are not what you think they are. Those are meant to simply assign which axis is used for that particular dataset (if there are multiple axes of that orientation). For configuring the actual axes themselves, you must define them within the 'xaxes' and 'yaxes' parameters. Taken from the 'axes-multiple' example:

            $.plot("#placeholder", [
                { data: oilpriceslabel: "Oil price ($)" },
                { data: exchangerateslabel: "USD/EUR exchange rate"yaxis: 2 }
            ], {
                series: {
                    lines: {lineWidth: 2}
                },
                xaxes: [ { mode: "time"timeBase: "milliseconds" } ],
                yaxes: [ { min: 0 }, {
                    // align if we are to the right
                    alignTicksWithAxis: position == "right" ? 1 : null,
                    position: position,
                    tickFormatter: euroFormatter
                } ],
                legend: { position: "sw" }
            });

Jonathan Meyer

unread,
Jul 22, 2020, 5:59:55 PM7/22/20
to Flot graphs
I shouldn't have said "must", as providing them in the options as Ced demonstrated is also obviously fine.
Reply all
Reply to author
Forward
0 new messages