CODEWITHSUNDEEP
javascriptjqueryjqplotlinegraph
roshambo
roshambo

Reputation: 107

I can't get my line graph to plot correctly using jqplot

I want to plot a graph with the following as the xaxis:

var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];

notice how there is a skip between 31.5 and 32.1. However, when I plot my line graph, there is a large space between these two points. Here's my code:

 $(document).ready(function(){

                var cust1 = [[31.1,10],[31.2,15],[31.3,25],[31.4, 60],[31.5,95]];
                var cust2 = [[31.1,0],[31.2,15],[31.3,30],[31.4, 50],[31.5,85]];

                var data = [];
                data.push(cust1);
                data.push(cust2);

                var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];

                var plot3 = $.jqplot('line-chart', data, 
                  { 
                      title:'Design Progress', 

                      axes: {
                          xaxis: {
                              //renderer: $.jqplot.LineRenderer,
                              label: 'Work Weeks',

                              ticks: xaxis
                          },
                          yaxis: {
                              label: "Percent Complete",
                              max: 100,
                              min: 0
                          }
                      }
                  }
                );

            });

I think it's because I'm not specifying a renderer option in my xaxis options. However, I've tried to use $.jqplot.LineRenderer and $.jqplot.CategoryAxisRenderer without any luck (I even set my xaxis values as strings but that didn't work). Anybody know what's going on?

Here's a pic to further clarify:

enter image description here

Upvotes: 0

Views: 475

Answers (1)

Ori Refael
Ori Refael

Reputation: 3028

Reason why it happens : jQuery flot library is building the graph with values that determined by your data.

When you provide such data, the plugin will set the axis values to be as same as the text and with the borders of the numbers you gave. what you can do, is set the text to be different than the axis value.

You can easily do it by options.xaxis.ticks.push([value, "the text"]).

Pay attention that you are the one who is going to set which label will have which axis value, and this calls for setting the options parameter before calling the $plot

Upvotes: 1

Related Questions