Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts - How to start x axis from an arbitrary value

I am using [highcharts][1] to plot a graph between a range of values from data base. I want by X Axis values to start from the user input.

For example, if the user wants the values between range 50 and 100, I want my x axis to start from 50.

The range would be of variable size. The size of the data is large so I can't do something like getting all and using min and max for display.

Thanks in advance.

This is my chart object. I have two input fields for user that I use to query the database and return rows in between.

I use multiple type of graphs. The problem is that I have no idea on how to define the start of X axis as 50 if I am getting data from database between 50 and 100. It shows 50 values but start them from 0 upto 50.

I tried min 10 and so. That do start from that value but skips the first 10 or so values.

The input field has id 'lower' and 'upper'.


var options = {
      chart: {
        renderTo: ctn.attr('id'),
        type: $('#graph_type option:selected').val(),
        zoomType: 'x'
      },
      title: {
        text: $('#graph_title').val()
      },
      subtitle: {
          text: "Graph - " + (graph_no + 1)
      },
      xAxis: {

        title: {
           text: $('#x_label').val()
        }
      },
      yAxis: {
        title: {
          text: $('#y_label').val()
        }
      },

      credits: {
        enabled: false
      },
      series: []
    };
like image 695
L Lawliet Avatar asked Dec 03 '12 23:12

L Lawliet


2 Answers

Thanks everyone for the response. I found the solution. Min max was not actually doing as I wanted it to.

I found the solution.

To start the x axis value from desired value use

plotOptions:
     <your_graph_type>:{
             pointStart: <your_value>
}
like image 200
L Lawliet Avatar answered Oct 09 '22 08:10

L Lawliet


I think setting min and max for xAxis will work. Refer this link

and you can say

startOnTick: false, endOnTick:false

For example refer : example

I have values set min of y to 20 and max to 217,

yAxis: {
        min: 20,
        max:217,
        startOnTick: false,
        endOnTick:false
    },

See how ther chart is displayed. I hope this helps.

like image 27
Nagesh Salunke Avatar answered Oct 09 '22 08:10

Nagesh Salunke