JQuery mobile and jqPlot

Hi guys, its a long time i wrote a post, these days got little busy with work. So now this is a post to integrate jquery mobile api with the jqplot to render some grap dash boards in mobile and these garph dash bords when combined with jquery mobile are compatible with all popular OS like Android and iOS .. etc. So below is the code to do it and its very self explanatory.

Following files are to be included and then start the coding part
Proj_Exp

<html lang="html">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Dynamic collapsible - jQuery Mobile Demos</title>
		<link rel="stylesheet"  href="css/jquery.mobile-1.3.1.min.css">
		<link rel="stylesheet" href="css/jqm-demos.css">
		<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

		<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/jquery.mobile-1.3.1.min.js"></script>

		<script>
			$(document).on("pageshow", function() {
				$.jqplot.config.enablePlugins = true;
				var s1 = [2, 6, 7, 10];
				var ticks = ['a', 'b', 'c', 'd'];

				plot1 = $.jqplot('chart1', [s1], {
					// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
					animate : !$.jqplot.use_excanvas,
					seriesDefaults : {
						renderer : $.jqplot.BarRenderer,
						pointLabels : {
							show : false
						}
					},
					axes : {
						xaxis : {
							renderer : $.jqplot.CategoryAxisRenderer
							//ticks : ticks
						}
					},
					highlighter : {
						show : false
					}
				});

				$('#chart1').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
					$('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
				});

				var data = [['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14], ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]];
				var plot1 = jQuery.jqplot('chart2', [data], {
					seriesDefaults : {
						// Make this a pie chart.
						renderer : jQuery.jqplot.PieRenderer,
						rendererOptions : {
							// Put data labels on the pie slices.
							// By default, labels show the percentage of the slice.
							showDataLabels : true
						}
					},
					legend : {
						show : false,
						location : 'e'
					}
				});
			});
		</script>
	</head>
	<body>

		<!-- Start of first page: #one -->
		<div data-role="page" id="one">

			<div data-role="header">
				<h1>Multi-page</h1>
			</div><!-- /header -->

			<div data-role="content" >
				<h2>Home Page</h2>

				<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
					<li data-role="list-divider">
						Log Analysis Report
					</li>
					<li>
						<a href="index.html" data-theme="e">Bar Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Pie Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Line Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Combination Chart Analysis</a>
					</li>
				</ul>
				<div>
					<span>You Clicked: </span><span id="info1">Nothing yet</span>
				</div>

				<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>

				<h3>Show internal pages:</h3>
				<p>
					<a href="#two" data-role="button" data-transition="slideup">Show Pie Report</a>
				</p>

			</div><!-- /content -->

			<div data-role="footer" data-theme="d">
				<h4>Page Footer</h4>
			</div><!-- /footer -->
		</div><!-- /page one -->

		<!-- Start of second page: #two -->
		<div data-role="page" id="two" data-theme="a">

			<div data-role="header">
				<h1>Pie Report</h1>
			</div><!-- /header -->

			<div data-role="content" data-theme="a">
				<h2>Pie Report</h2>
				<div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
				<p>
					<a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to Home Page</a>
				</p>

			</div><!-- /content -->

			<div data-role="footer">
				<h4>Page Footer</h4>
			</div><!-- /footer -->
		</div><!-- /page two -->

		<!-- Don't touch this! -->
		<script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>

		<!-- Additional plugins go here -->

		<script class="include" type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
		<script class="include" type="text/javascript" src="js/jqplot.pieRenderer.min.js"></script>

		<script class="include" type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
		<script class="include" type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>

		<!-- End additional plugins -->

	</body>
</html>

and the following are the simulated output for the above code in the mobile.

first_screen

sec_screen

Happy Coding mobile apps 🙂

Advertisements

FusionCharts+Spring+Ajax calls

Hello all, in this post i am going to take you on a tour how to render fusion charts data dynamically. In my previous post i explained rendering data statically. Here i explain how to make Ajax calls, using ajax we are going to populate region,country. Based on the region and country we get the oilConsumedByCountry by year and change this data based on the country changed, and create a dashboard which displays “Pie and Bar” charts.

*Note: This post assumes you already downloaded FusionCharts API and Maven
Following is the script for creating db table.

DROP TABLE IF EXISTS `test`.`oilconsumebycountry`;
CREATE TABLE  `test`.`oilconsumebycountry` (
  `Region` varchar(45) NOT NULL,
  `Country` varchar(45) NOT NULL,
  `Fipscd` varchar(45) NOT NULL,
  `year_1980` double NOT NULL,
  `year_1981` double DEFAULT NULL,
  `year_1982` double DEFAULT NULL,
  `year_1983` double DEFAULT NULL,
  `year_1984` double DEFAULT NULL,
  `year_1985` double DEFAULT NULL,
  `year_1986` double DEFAULT NULL,
  `year_1987` double DEFAULT NULL,
  `year_1988` double DEFAULT NULL,
  `year_1989` double DEFAULT NULL,
  `year_1990` double DEFAULT NULL,
  `year_1991` double DEFAULT NULL,
  `year_1992` double DEFAULT NULL,
  `year_1993` double DEFAULT NULL,
  `year_1994` double DEFAULT NULL,
  `year_1995` double DEFAULT NULL,
  `year_1996` double DEFAULT NULL,
  `year_1997` double DEFAULT NULL,
  `year_1998` double DEFAULT NULL,
  `year_1999` double DEFAULT NULL,
  `year_2000` double DEFAULT NULL,
  `year_2001` double DEFAULT NULL,
  `year_2002` double DEFAULT NULL,
  `year_2003` double DEFAULT NULL,
  `year_2004` double DEFAULT NULL,
  `year_2005` double DEFAULT NULL,
  `year_2006` double DEFAULT NULL,
  `year_2007` double DEFAULT NULL,
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

lets have a look at configuration files applicationContext.xml,spring-context.xml,hibernate-cfg.xml,web.xml respectively.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xsi:schemaLocation="
            http://www.springframework.org/schema/beans
            http://www.springframework.org/schema/beans/spring-beans.xsd
            http://www.springframework.org/schema/aop
            http://www.springframework.org/schema/aop/spring-aop.xsd
            http://www.springframework.org/schema/tx
            http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
            http://www.springframework.org/schema/jdbc
            http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
            http://www.springframework.org/schema/context
            http://www.springframework.org/schema/context/spring-context-3.0.xsd
            http://www.springframework.org/schema/mvc 
            http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">

	<context:component-scan base-package="com.spark.spring"></context:component-scan>
	<context:annotation-config />
	<tx:annotation-driven />
	
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
		<property name="url" value="jdbc:mysql://localhost:3306/test"></property>
		<property name="password" value="root"></property>
		<property name="username" value="root"></property>
	</bean>

	<bean id="getCountryByCode" class="com.spark.spring.dao.GetCountryByCode">
		<property name="dataSource" ref="dataSource" />
	</bean>

	<bean id="sessionFactory"
		class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
		<property ref="dataSource" name="dataSource"></property>
		<property name="configLocation">
			<value>classpath:hibernate.cfg.xml</value>
		</property>
		<property name="configurationClass">
			<value>org.hibernate.cfg.AnnotationConfiguration</value>
		</property>
		<property name="hibernateProperties">
			<props>
				<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
				<prop key="hibernate.show_sql">true</prop>
			</props>
		</property>
	</bean>
</beans>

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
	xsi:schemaLocation="
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">

	<context:annotation-config />
	<context:component-scan base-package="com.spark.spring"></context:component-scan>
	
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="suffix">
			<beans:value>.jsp</beans:value>
		</beans:property>
		<beans:property name="prefix">
			<beans:value>/</beans:value>
		</beans:property>
	</beans:bean>

</beans:beans>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
		"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
		"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

<hibernate-configuration>
	<session-factory>
		<mapping class="com.spark.spring.model.Oilconsumebycountry" />
	</session-factory>
</hibernate-configuration>
<web-app id="WebApp_ID" version="2.4"
	xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	
	<servlet>
		<servlet-name>springServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring-context.xml</param-value>
		</init-param>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>springServlet</servlet-name>
		<url-pattern>/spring/*</url-pattern>
	</servlet-mapping>
	
	<welcome-file-list>
		<welcome-file>ajaxView.jsp</welcome-file>
	</welcome-file-list>
</web-app>

GlobalAjaxController.java
This controller calls the DAO layes to fetch the data required by client and converts it to JSON format and returns it back to client.

/**
 * 
 */
package com.spark.spring.controller;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JSONSerializer;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.spark.spring.dao.OilconsumebycountryDAO;
import com.spark.spring.model.Oilconsumebycountry;

/**
 * @author Sony
 *
 */
@Controller
@RequestMapping(value="/load/**")
public class GlobalAjaxController {
	
	@Autowired
	OilconsumebycountryDAO oilconsumebycountryDAO;

	@RequestMapping(value="/load/allreagions")
	protected @ResponseBody String loadRegions(){

		List<String> regions = oilconsumebycountryDAO.getAllRegions();
		JSONArray jsonArray = (JSONArray) JSONSerializer.toJSON( regions );  
		return jsonArray.toString();
	}
	
	@RequestMapping(value="/load/{region}")
	protected @ResponseBody String loadCountriesByregion(@PathVariable String region){

		List<String> regions = oilconsumebycountryDAO.getCountriesByRegion(region);
		JSONArray jsonArray = (JSONArray) JSONSerializer.toJSON( regions );  
		return jsonArray.toString();
	}
	
	@RequestMapping(value="/load/{region}/{country}")
	protected @ResponseBody String loadConsuptionByCountryAndRegion(@PathVariable String region,@PathVariable String country){

		Oilconsumebycountry oilconsumebycountry = oilconsumebycountryDAO.getAllOilConsumedByCountriesAndRegion(region, country);
		
		String consuption = "{}";
		List<Double> oil = new ArrayList<Double>();
		oil.add(oilconsumebycountry.getYear1980());
		oil.add(oilconsumebycountry.getYear1981());
		oil.add(oilconsumebycountry.getYear1982());
		oil.add(oilconsumebycountry.getYear1983());
		oil.add(oilconsumebycountry.getYear1984());
		oil.add(oilconsumebycountry.getYear1985());
		oil.add(oilconsumebycountry.getYear1986());
		oil.add(oilconsumebycountry.getYear1987());
		oil.add(oilconsumebycountry.getYear1988());
		oil.add(oilconsumebycountry.getYear1989());
		oil.add(oilconsumebycountry.getYear1990());
		oil.add(oilconsumebycountry.getYear1991());
		oil.add(oilconsumebycountry.getYear1992());
		oil.add(oilconsumebycountry.getYear1993());
		oil.add(oilconsumebycountry.getYear1994());
		oil.add(oilconsumebycountry.getYear1995());
		oil.add(oilconsumebycountry.getYear1996());
		oil.add(oilconsumebycountry.getYear1997());
		oil.add(oilconsumebycountry.getYear1998());
		oil.add(oilconsumebycountry.getYear1999());
		oil.add(oilconsumebycountry.getYear2000());
		oil.add(oilconsumebycountry.getYear2001());
		oil.add(oilconsumebycountry.getYear2002());
		oil.add(oilconsumebycountry.getYear2003());
		oil.add(oilconsumebycountry.getYear2004());
		oil.add(oilconsumebycountry.getYear2005());
		oil.add(oilconsumebycountry.getYear2006());
		oil.add(oilconsumebycountry.getYear2007());
		
		JSONObject jsonObject = (JSONObject)JSONSerializer.toJSON(consuption);
		JSONArray jsonArray = (JSONArray)JSONSerializer.toJSON(oil);
		jsonObject.put("consuption", jsonArray);
		System.out.println(jsonObject);
		return jsonObject.toString();
	}
}

OilconsumebycountryDAO.java

/**
 * 
 */
package com.spark.spring.dao;

import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import org.springframework.stereotype.Repository;

import com.spark.spring.model.Oilconsumebycountry;

/**
 * @author Sony
 *
 */
@Repository(value="oilconsumebycountryDAO")
public class OilconsumebycountryDAO extends HibernateDaoSupport{

	@Autowired
	public void init(SessionFactory sessionFactory){
		setSessionFactory(sessionFactory);
	}
	
	public Oilconsumebycountry getAllOilConsumedByCountriesAndRegion(String region,String country){
		List<Integer> id = null;
		String hql = "select o.id from Oilconsumebycountry o where o.region=:region and o.country=:country";
		Session session = getHibernateTemplate().getSessionFactory().openSession();
		Query query = session.createQuery(hql);
		query.setParameter("region", region);
		query.setParameter("country", country);
		id = query.list();
		session.close();
		Oilconsumebycountry oilconsumebycountry = getHibernateTemplate().get(Oilconsumebycountry.class, id.get(0));
		return oilconsumebycountry;
	}
	
	public List<String> getCountriesByRegion(String region){
		List<String> countries = null;
		String hql = "select distinct o.country from Oilconsumebycountry o where o.region=:region";
		try {
			Session session = getHibernateTemplate().getSessionFactory().openSession();
			Query query = session.createQuery(hql);
			query.setParameter("region", region);
			countries = query.list();
		} catch (HibernateException e) {
			e.printStackTrace();
		}
		return countries;
	}
	
	public List<String> getAllRegions(){
		List<String> regions = null;
		String hql = "select distinct o.region from Oilconsumebycountry o";
		try {
			Session session = getHibernateTemplate().getSessionFactory().openSession();
			Query query = session.createQuery(hql);
			regions = query.list();
		} catch (HibernateException e) {
			e.printStackTrace();
		}
		return regions;
	}
}

Oilconsumebycountry.java

package com.spark.spring.model;

import java.io.Serializable;

import javax.persistence.Basic;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * <p>
 * Pojo mapping TABLE oilconsumebycountry
 * </p>
 * <p>
 * </p>
 * 
 * <p>
 * Generated at Sun Jul 07 16:38:56 IST 2013
 * </p>
 * 
 * @author Sony 
 * 
 */
@Entity
@Table(name = "oilconsumebycountry", catalog = "test")
@SuppressWarnings("serial")
public class Oilconsumebycountry implements Serializable {

	/**
	 * Attribute region.
	 */
	private int id;
	/**
	 * Attribute region.
	 */
	private String region;

	/**
	 * Attribute country.
	 */
	private String country;

	/**
	 * Attribute fipscd.
	 */
	private String fipscd;

	/**
	 * Attribute year1980.
	 */
	private Double year1980;

	/**
	 * Attribute year1981.
	 */
	private Double year1981;

	/**
	 * Attribute year1982.
	 */
	private Double year1982;

	/**
	 * Attribute year1983.
	 */
	private Double year1983;

	/**
	 * Attribute year1984.
	 */
	private Double year1984;

	/**
	 * Attribute year1985.
	 */
	private Double year1985;

	/**
	 * Attribute year1986.
	 */
	private Double year1986;

	/**
	 * Attribute year1987.
	 */
	private Double year1987;

	/**
	 * Attribute year1988.
	 */
	private Double year1988;

	/**
	 * Attribute year1989.
	 */
	private Double year1989;

	/**
	 * Attribute year1990.
	 */
	private Double year1990;

	/**
	 * Attribute year1991.
	 */
	private Double year1991;

	/**
	 * Attribute year1992.
	 */
	private Double year1992;

	/**
	 * Attribute year1993.
	 */
	private Double year1993;

	/**
	 * Attribute year1994.
	 */
	private Double year1994;

	/**
	 * Attribute year1995.
	 */
	private Double year1995;

	/**
	 * Attribute year1996.
	 */
	private Double year1996;

	/**
	 * Attribute year1997.
	 */
	private Double year1997;

	/**
	 * Attribute year1998.
	 */
	private Double year1998;

	/**
	 * Attribute year1999.
	 */
	private Double year1999;

	/**
	 * Attribute year2000.
	 */
	private Double year2000;

	/**
	 * Attribute year2001.
	 */
	private Double year2001;

	/**
	 * Attribute year2002.
	 */
	private Double year2002;

	/**
	 * Attribute year2003.
	 */
	private Double year2003;

	/**
	 * Attribute year2004.
	 */
	private Double year2004;

	/**
	 * Attribute year2005.
	 */
	private Double year2005;

	/**
	 * Attribute year2006.
	 */
	private Double year2006;

	/**
	 * Attribute year2007.
	 */
	private Double year2007;

        // Generate Getters and Setters..

}

This is the JSP file used as view, data from controller is rendered here using a jquery script.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="inner_js/FusionCharts.js"></script>
<script src="inner_js/inner_js.js"></script>
</head>
<body>
	<table>
		<tr>
			<td>Regions:<select id="regions" name="regions"></select></td>
			<td>Countries:<select id="country" name="country"></select></td>
		</tr>
	</table>
	<div style="width: 1300px;">
		<div id="piechartContainer" style="float: left; width: 600px;">FusionCharts
			XT will load here!</div>
		<div id="barchartContainer" style="float: right; width: 600px;">FusionCharts
			XT will load here!</div>
		<br style="clear: left;" />
	</div>
</body>
</html>

This is the javascript file from which the Ajax calls are fired to the controller, and data is collected by this script and rendered into view.

$(document).ready(function(){
	$.ajax({
		url:"http://localhost:8080/SpringFusionCharts/spring/load/allreagions",
		dataType:"json",
		success:function(data){
			var options = '<option>----select----</option>';
		      for (var i = 0; i < data.length; i++) {
		        options += '<option value="' + data[i] + '">' + data[i] + '</option>';
		      }
		      $("#regions").html(options);

		},error:function(data){
		}
	});
	
	$("#regions").on("change",function(){
		$.ajax({
			url:"http://localhost:8080/SpringFusionCharts/spring/load/"+$(this).val(),
			dataType:"json",
			success:function(data){
				var options = '<option>----select----</option>';
			      for (var i = 0; i < data.length; i++) {
			        options += '<option value="' + data[i] + '">' + data[i] + '</option>';
			      }
			      $("#country").html(options);

			},error:function(data){
			}
		});
	});
	
	$("#country").on("change",function(){
		var dataStr = {
				'chart' : {
					'caption' : 'oil consumed by country',
					'xAxisName' : 'years',
					'yAxisName' : 'consuption',
					'numberPrefix' : ''
				},
				'data' : [ ]
			};
		var dataObjectArray = new Array();
		
		var myPieChart = new FusionCharts("Charts/Pie3D.swf",
				"myChartId", "750", "450", "0");
		var myBarChart = new FusionCharts("Charts/Column3D.swf",
				"myChartId2", "750", "450", "0");
		$.ajax({
			url:"http://localhost:8080/SpringFusionCharts/spring/load/"+$("#regions").val()+"/"+$(this).val(),
			dataType:"json",
			success:function(data){
				var i = 1980;
				$.each(data.consuption, function(key, value) {
					var dataObject = {
							label:'',
							value:''
						};
					dataObject.label = "year_"+i;
					dataObject.value = value;
					dataObjectArray.push(dataObject);
					i++;
				});
				dataStr.data = dataObjectArray;
				myPieChart.setJSONData(dataStr);
				myPieChart.render("piechartContainer");

				myBarChart.setJSONData(dataStr);
				myBarChart.render("barchartContainer");
			},error:function(data){
			}
		});
		
	});
});

Output1:
data1

Output2:
After changing the region and country the data changes dynamically.
data2
Happy Coding 🙂