JQuery JQPlot interactive web charts

JQuery JQPlot interactive web charts
09 November, 2016
Fady Soliman
4129 Views
 2 users marked as helpfull

JQuery JQPlot interactive web charts

The need for charts

The business need for integrating websites with charts has become widely needed across the internet. Integrating websites with charts has become a task of necessity in the life cycle of building a website and improving its business intelligence. Charting is a heavy task for developers and web designers. They always need a good development tool to provide nice looking charts and they might need it interactive. That's why in this post we will put JQPlot below the spot lights.

JQPlot charts

JQPlot is a nice plugin that can be easily integrated with your website. It almost provides all the needed features for a chart in one place. JQPlot is built under JQuery and HTML 5 which makes it almost having no browser compatibility issues.

This post will focus on how to integrate with JQPlot to render the linear and the area graphs, like shown in the following figures, from scratch to having such graphs on your ASP.NET web page.


JQPlot Filled Graph

JQPlot Line Graph










Figure 1: Area chart Figure 2: Linear chart


Required plugins

The first step you need to do when integrating with JQPlot is to include their plugins along with the JQuery into the head element of your web page. Place the following plugins anywhere between the opening and closing HTML head tags.



<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.cursor.min.js"></script>
<script type="text/javascript" src="jqplot.dateAxisRenderer.min.js"></script>


All the above plugins are required to build area and linear charts like shown in the previous figures. The first plugin is well known. It's the JQuery plugin. The second one is the JQPlot plugin. The third, fourth, fifth and sixth plugins are for rendering the x and y axes with their ticks. The rest of the plugins are for rendering a tool tip when the mouse hovers over any data point in the graph as shown in the figures.
Data source and format

Data source and format

Before going on into details of JQPlot, you need to get your data ready first for the graphs. JQPlot accepts the graph data only in JSON format. For example check the following JSON array of plots.


[[3],[4],[2],[6],[3],[2],[0]]


This array of numbers will represent the y-axis data of the graph. In this case, the x-axis data is not presented for JQPlot to render, so it will give your x-axis data an assumed array of numbers incremented by 1. This data format is not recommended as you should always provide your data for both x-axis and y-axis values as shown next.


[[["30 Jan 2013", 12], ["1 Feb 2013", 16], ["3 March 2013", 20]]]


Note: To test and check the validity of your JSON format, you can use http://jsonlint.com/

In the previous data format example, you will find that for every data point the x-axis value is defined as a date in a string format and the other y-axis value is a number. X-axis values do not have to be as dates, but they are intended to be so in this post for some purposes. If the data is passed to JQPlot as shown in the previous example, it will be understood automatically by JQPlot that the date value is for the x-axis and the number value is for y-axis.

In this post, it's assumed you are building an ASP.NET website and trying to integrate it with JQPlot. First, you should prepare your data in your server side logic. Lets assume you have built a list that is populated from the database. Lets assume you have a list of objects of type "Earning" and the "Earning" object has the following schema.


public class Earning{
public int Id {set; get;}
public double EarningValue {set; get;}
public DateTime EarningDate {set; get;}
}

So you will need to plot the EarningDate property of each object in the list for x-axis and the EarningValue for y-axis. So obviously what we need to do is to build a string that looks like the previous JSON format. This can be done by looping over each object in the list pulling every EarningDate and EarningValue and concatenating them together in one string to look like the previous format. But be careful. There is a very important case that should be highlighted here. When you build the string you should put the dates or (x-axis values if they are strings) between single quotes instead of the double quotes, the reason for this will be discussed later in this post. Your code should look like the following one in the code-behind of your ASPX page for example.

string result = string.Empty;

foreach(Earning earning in earnings){

result += "['"+earning.EarningDate+"',"+earning.EarningValue+"]";

}

result = "[["+result+"]]";

The previous listing will give you the same format as the previous JSON one. Now you have your data formatted in the code-behind and it's ready to be transferred to the client-side (your ASPX page) for the JQPlot.


Provide JQPlot with data

After you have prepared your data you should send it to JQPlot. To do this you should add a hidden field on you ASPX page and assign the string resulted in the previous step to it. That's why it was recommended to use single quotes instead of double quotes in formatting your string. Double quotes will conflict with the hidden field as the hidden field's value directive needs its data to be placed between double quotes already, so the first double quote in your JSON string will terminate the value of the hidden field. However single quotes are not correct in JSON format, this will be solved later in this post.

Now it's time to get your client-side JSON ready for the JQPlot. Follow these steps.

1. Create a script tag on your ASPX page, where you should use JQPlot to render the graph.
2. Pull the JSON value from inside the hidden field and save it to a JavaScript variable. This can be done using normal JQuery.
3. Replace all the occurrences of single quotes inside this string by double quotes. This can be done using the following listing.


hiddenFieldValue = hiddenFieldValue.replace(/\'/g, '\"');



where hiddenFieldValue is the variable you stored the JSON string in step 2.

4. Build your chart using JQPlot. The following listing will render the linear graph.


plot = $.jqplot(graphContainerId, JSON.parse(hiddenFieldValue), {
grid:{ borderColor: 'transparent', shadow: false, drawBorder: false, shadowColor: 'transparent', background: 'transparent'},
series: [
{
showMarker: false,
shadow: false,
color: 'black',
lineWidth: 0.5
}
],
highlighter: {
show: true
},
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
labelOptions: {
fontSize: "7pt"
},
showTicks: false,
tickOptions: {
showGridline: false
},
pad: 0,
padMin: 0
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions:{
formatString:'LE %.2f',
fontSize: '6pt',
showGridline: false
},
labelOptions: {
fontSize: "8pt"
},
pad: 0,
padMin: 0
}
}
});


Here is most of the previous listing's details:

  • The plot variable is where your graph object will be saved. It's not used here but you might need it.
  • graphContainerId is the ID of an HTML div element that will contain the graph. This div should be just empty.
  • JSON.parse(hiddenFieldValue) will parse your JSON formatted string to convert it to real JSON array not just a string.
  • The next setting for the grid just used to make the chart's background transparent and remove all the grid lines.
  • The highlighter setting's show is set to true to show the on mouse hover tool tip for every data point on the graph.
  • The x-axis renderer setting is set to DateAxisRenderer (the one illustrated in the plugins section above) to allow the JQPlot to understand the x-axis data as real dates and you can benefit from that in using different date formats.
  • The showTicks is set to false to hide the x-axis ticks as they are all dates with big strings and they might overlap. You can decide to include the dates in your graph but it will be recommended to set an angle for the x-axis ticks to avoid overlapping.
  • The pad and padMin settings are set to 0 to assure that the graph canvas renders starting from the graph's origin at point (0, 0). Sometimes you should use the min setting and set it to the first x-axis tick value to force the x-axis ticks to start from your own minimum value. That's usually done in case your x-axis data are not in numbers (strings or dates .. etc.) so setting the pad and padMin to 0 will not work.

The previous listing will render a linear graph. For area graphs, all you need to do is to add the following setting.


seriesColors: ['#7D9B34'],
seriesDefaults: {
fill: true,
showMarker: false
}


The seriesColors will set the color of the area plotted and the fill setting that is set to true will tell JQPlot to render an area graph.

Happy charting

You are done configuring and integrating your ASP.NET website with JQPlot. It's important to note that JQPlot has a lot deeper and wider configurations and many other graph types and options. For more details and demos about the features in JQPlot, please visit http://www.jqplot.com/tests/

28 August, 2013
Fady Soliman
c sharp , charts , javascript
4129 Views

Did you find this helpfull?

About The Author

Fady Soliman

An experienced, resourceful and highly motivated IT professional, with a proven record of success in both Stack Development and Software Architecture. Possesses a wealth of transferable skills, including outstanding interpersonal, problem solving and staff management abilities. A capable organizer, quick to grasp – and make good use of – new ideas and information, and reliable and conscientious in all he takes on.

leave A Comment