Emily
Emily

Reputation: 256

JavaScript Charting with non-uniform data, displayed with uniform axes labels, without upsampling data source

I'm looking for a Javascript charting framework that allows for non-uniform x-axis spacing. I have perused many JS charting frameworks, but the online documentation that I have found universally does not make clear whether or not the tool allows irregularly-spaced x-axis values.

I know that one solution is to just resample my data at the GCD of my data points, but that is impractical given the size of my dataset. Instead, it would be most beneficial if I could simply plot only the x-axis values I choose.

Is there any tool that contains this capability?

Edit: It's fine if the chart has a uniform axis, but I want my data source to be non-uniform. In other words, it's ok if my axis goes 1 2 3 4 5 6 7, but I might only want to plot data at 2 3 5 7.

Edit 2: What I really want is a JS library that can make a plot look like this:

enter image description here

which is easily generated by the following MATLAB code:

t = [ 13.23, 105.81, 196.40]; y = [ 10, 11.5, 14.8]; plot(t,y);
hold on
plot(t,y,'o','MarkerSize',6)
axis([0 200 0 20])

Upvotes: 2

Views: 125

Answers (2)

Jailbot
Jailbot

Reputation: 2608

In ZingChart, you can use [x,y] pairs in the values array.

   "scale-x":{
       "values":"0:200:20"
   },
   "scale-y":{
       "values":"0:20:2" 
   },
   "series": [
       {
           "values": [[13.23,10],[105.81,11.5],[196.40,14.8]]
       }
    ]

Here's a live demo.

Disclaimer: I'm on the ZingChart team. If you have any questions about implementation, feel free to give us a holler.

Upvotes: 1

Stephen Thomas
Stephen Thomas

Reputation: 14053

Ah, what the heck. Using, for example, Flot:

$.plot("#placeholder", [ 
    [[13.23, 10], [105.81, 11.5], [196.40, 14.8]]
],{
    xaxis: { min: 0, max: 200 },
    yaxis: { min: 0, max: 20  }
});

Upvotes: 2

Related Questions