Drawing A Line Graph, On Button Press Using Javascript/JQuery

Question

What is the best and simplest way of creating a line graph using Javascript or JQuery? I tried http://www.chartjs.org/ and http://www.oesmith.co.uk/morris.js/lines.html but nothing appeared.

I need it to appear when the button is pressed.

Any help?

Answer 1

There are many client-side API's which offer charts. I, personally, like working with HighCharts . It is very simple, in some cases requires minimum setup and supports various data types as inputs.

You may find demos & examples here .

All you have to do is:

1. Include a jQuery library (available here );
2. Include the HighCharts API files (JS & CSS), available here ;
3. Create a placeholder for the chart (eg a DIV with the id "myLineChart");
4. Keep your data in a JavaScript object/array (note that there are several ways to provide data to the HighCharts, the best practice is a JSON object);

5. Call the HighCharts method, either when the page loads ($(document).ready) or upon another event of your choice. The following is a short example:

    $('#myLineChart').highcharts({ chart: { type: 'line' }, title: { text: 'Monthly Average Temperature' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' } }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] 

   });

In the example above, the data is provided as two arrays, each of them representing a series and will form a line-chart with 2 lines.

Note that HighCharts API Reference features full documentation on its options.

Hope it helps.