Dynamic Graph With Highcharts.js Based On Polynomial Function & Configurable Intervals By User

While checking interview questions for JavaScript and HighCharts.js, I found one problem to plot a graph based on polynomial function entered by user.

Mentioned below is problem and solutions for same.

Problem:

Using highcharts to plot the points, create a webpage that accepts a polynomial function of one variable and plots the points on user configurable intervals. The website will have a graph that defaults to plotting on the interval for all x values from ­10 to 10 and all y values from ­10 to 10 if the user does not supply their own values. The user will be able to select the interval as they wish for any x and y ranges. You will need to parse the input (of accepted forms shown below) with JavaScript, calculate the points to plot for the curve, and finally plot those points.

Base HTML components:

­Chart for plotting function
­Text input for user to enter function
­Text input for x­min value
­Text input for x­max value
­Text input for y­min value
­Text input for y­max value
­Input button to refresh chart with user supplied polynomial function and x and y interval values.

Solution: 

 

Working Demo For Solution:

Click on link mentioned below for live working demo of solution.

Dynamic Graph With Highcharts.js Based On Polynomial Function & Configurable Intervals By User Solution Demo

 

Graph For Dynamic Polynomial Function

 

Note:

For parsing formula entered by user, I have used math.js javascript library. Further documentation for Math.js library is available in link mentioned below,

Math.js JavaScript library documentation

Thanks guys. Comment if you have any questions regarding this blog or need further details on same.

 

Comments
  1. oakley prescription glasses

Leave a Reply

Your email address will not be published. Required fields are marked *