diff --git a/spec/api/api.load-spec.js b/spec/api/api.load-spec.js
index ef45a196c..9d65b2ee7 100644
--- a/spec/api/api.load-spec.js
+++ b/spec/api/api.load-spec.js
@@ -7,19 +7,24 @@ import CLASS from "../../src/config/classes";
 import util from "../assets/util";
 
 describe("API load", function() {
-	describe("indexed data as column", () => {
-		const chart = util.generate({
-			data: {
-				columns: [
-					["data1", 30, 200, 100, 400, 150, 250],
-					["data2", 5000, 2000, 1000, 4000, 1500, 2500]
-				]
-			},
-			point: {
-				show: true
-			}
-		});
+	let chart;
+	let args = {
+		data: {
+			columns: [
+				["data1", 30, 200, 100, 400, 150, 250],
+				["data2", 5000, 2000, 1000, 4000, 1500, 2500]
+			]
+		},
+		point: {
+			show: true
+		}
+	};
+
+	beforeEach(() => {
+		chart = util.generate(args);
+	});
 
+	describe("indexed data as column", () => {
 		it("should load additional data", done => {
 			const main = chart.internal.main;
 			const legend = chart.internal.legend;
@@ -45,23 +50,25 @@ describe("API load", function() {
 	});
 
 	describe("category data", () => {
-		const chart = util.generate({
-			data: {
-				x: "x",
-				columns: [
-					["x", "cat1", "cat2", "cat3", "cat4", "cat5", "cat6"],
-					["data1", 30, 200, 100, 400, 150, 250],
-					["data2", 5000, 2000, 1000, 4000, 1500, 2500]
-				]
-			},
-			axis: {
-				x: {
-					type: "category"
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "cat1", "cat2", "cat3", "cat4", "cat5", "cat6"],
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 5000, 2000, 1000, 4000, 1500, 2500]
+					]
+				},
+				axis: {
+					x: {
+						type: "category"
+					}
+				},
+				point: {
+					show: false
 				}
-			},
-			point: {
-				show: false
-			}
+			};
 		});
 
 		describe("as column", () => {
@@ -125,4 +132,46 @@ describe("API load", function() {
 			});
 		});
 	});
+
+	describe("JSON data", () => {
+		before(() => {
+			args.data = {
+				json: [
+					{name: "www.site1.com", upload: 200, download: 200},
+					{name: "www.site2.com", upload: 100, download: 300},
+					{name: "www.site3.com", upload: 300, download: 200},
+					{name: "www.site4.com", upload: 400, download: 100}
+				],
+				keys: {
+					x: "name",
+					value: ["upload", "download"]
+				}
+			};
+		});
+
+		it("should load json data", done => {
+			const json = [
+				{name: "www.site5.com", upload: 300, download: 100},
+				{name: "www.site6.com", upload: 400, download: 200},
+				{name: "www.site7.com", upload: 200, download: 400},
+				{name: "www.site8.com", upload: 100, download: 500}
+			];
+
+			chart.load({json});
+
+			setTimeout(() => {
+				const categories = chart.categories();
+				const upload = chart.data.values("upload");
+				const download = chart.data.values("download");
+
+				json.forEach((v, i) => {
+					expect(v.name).to.be.equal(categories[i]);
+					expect(v.upload).to.be.equal(upload[i]);
+					expect(v.download).to.be.equal(download[i]);
+				});
+
+				done();
+			}, 1000);
+		});
+	});
 });
diff --git a/src/data/data.convert.js b/src/data/data.convert.js
index d5e886c51..4894d25db 100644
--- a/src/data/data.convert.js
+++ b/src/data/data.convert.js
@@ -73,15 +73,18 @@ extend(ChartInternal.prototype, {
 		}, tsv);
 	},
 
-	convertJsonToData(json, keys) {
+	convertJsonToData(json, keysParam) {
+		const config = this.config;
 		const newRows = [];
 		let targetKeys;
 		let data;
 
-		if (keys) { // when keys specified, json would be an array that includes objects
+		if (isArray(json)) {
+			const keys = keysParam || config.data_keys;
+
 			if (keys.x) {
 				targetKeys = keys.value.concat(keys.x);
-				this.config.data_x = keys.x;
+				config.data_x = keys.x;
 			} else {
 				targetKeys = keys.value;
 			}
@@ -90,11 +93,10 @@ extend(ChartInternal.prototype, {
 
 			json.forEach(o => {
 				const newRow = [];
-				let v;
 
 				for (const key of targetKeys) {
 					// convert undefined to null because undefined data will be removed in convertDataToTargets()
-					v = this.findValueInJson(o, key);
+					let v = this.findValueInJson(o, key);
 
 					if (isUndefined(v)) {
 						v = null;
@@ -102,6 +104,7 @@ extend(ChartInternal.prototype, {
 
 					newRow.push(v);
 				}
+
 				newRows.push(newRow);
 			});
 
diff --git a/src/internals/util.js b/src/internals/util.js
index 0bc1c0c1f..6c86d54ae 100644
--- a/src/internals/util.js
+++ b/src/internals/util.js
@@ -194,6 +194,7 @@ function removeEvent(element, type, handler) {
 /**
  * Return first letter capitalized
  * @param {String} str
+ * @return {String} capitalized string
  * @private
  */
 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
@@ -265,33 +266,33 @@ const getCssRules = styleSheets => {
 };
 
 export {
-	isValue,
-	isDefined,
-	isUndefined,
-	isBoolean,
-	isString,
-	isNumber,
+	addEvent,
+	asHalfPixel,
+	brushEmpty,
+	capitalize,
+	ceil10,
+	diffDomain,
+	extend,
+	getBrushSelection,
+	getCssRules,
+	getOption,
+	getPathBox,
+	getRectSegList,
+	hasValue,
 	isArray,
+	isBoolean,
+	isDefined,
 	isEmpty,
+	isFunction,
+	isNumber,
 	isObject,
 	isObjectType,
+	isString,
+	isUndefined,
+	isValue,
 	notEmpty,
-	ceil10,
-	isFunction,
-	asHalfPixel,
-	getOption,
-	hasValue,
-	sanitise,
-	getPathBox,
-	diffDomain,
-	getBrushSelection,
-	brushEmpty,
-	extend,
-	addEvent,
-	removeEvent,
-	getRectSegList,
 	merge,
-	capitalize,
-	toArray,
-	getCssRules
+	removeEvent,
+	sanitise,
+	toArray
 };