Json data is not binding properly in jqplot line chart

Question

Here is my code for jqplot chart. I get a no data specified error in my browser console. Or I get a blank chart with no line series drawn. Please help me to fix this issue.

var data1 = '[[[5.00,81.00],[7.20,80.00],[9.00,79.00],[10.80,72.00],[12.00,68.00],[15.00,49.00]],[[5.00,162.00],[7.20,160.00],[9.00,158.00],[10.80,144.00],[12.00,136.00],[15.00,98.00]],[[5.00,81.00],[5.00,162.00]],[[15.00,49.00],[15.00,98.00]],[[3.00,133.00],[3.90,126.00],[4.80,119.00],[6.00,107.00],[7.20,91.00],[9.00,61.00]],[[3.00,266.00],[3.90,252.00],[4.80,238.00],[6.00,214.00],[7.20,182.00],[9.00,122.00]],[[3.00,133.00],[3.00,266.00]],[[9.00,61.00],[9.00,122.00]]]';
var data ='{ "Values": [[[5.00, 81.00], [7.20, 80.00], [9.00, 79.00], [10.80, 72.00], [12.00, 68.00], [15.00, 49.00]], [[5.00, 162.00], [7.20, 160.00], [9.00, 158.00], [10.80, 144.00], [12.00, 136.00], [15.00, 98.00]], [[5.00, 81.00], [5.00, 162.00]], [[15.00, 49.00], [15.00, 98.00]], [[3.00, 133.00], [3.90, 126.00], [4.80, 119.00], [6.00, 107.00], [7.20, 91.00], [9.00, 61.00]], [[3.00, 266.00], [3.90, 252.00], [4.80, 238.00], [6.00, 214.00], [7.20, 182.00], [9.00, 122.00]], [[3.00, 133.00], [3.00, 266.00]], [[9.00, 61.00], [9.00, 122.00]]] }'
var data2= JSON.Parse('{ "Values": [[[5.00, 81.00], [7.20, 80.00], [9.00, 79.00], [10.80, 72.00], [12.00, 68.00], [15.00, 49.00]], [[5.00, 162.00], [7.20, 160.00], [9.00, 158.00], [10.80, 144.00], [12.00, 136.00], [15.00, 98.00]], [[5.00, 81.00], [5.00, 162.00]], [[15.00, 49.00], [15.00, 98.00]], [[3.00, 133.00], [3.90, 126.00], [4.80, 119.00], [6.00, 107.00], [7.20, 91.00], [9.00, 61.00]], [[3.00, 266.00], [3.90, 252.00], [4.80, 238.00], [6.00, 214.00], [7.20, 182.00], [9.00, 122.00]], [[3.00, 133.00], [3.00, 266.00]], [[9.00, 61.00], [9.00, 122.00]]] }');                  

var plot1 = $.jqplot('theChart', [data2.Values],
    {
         //dataRenderer:data1,
         title: 'Log Line',
         axes: { xaxis: { renderer: $.jqplot.LogAxisRenderer, ticks: [1, 10, 100, 1000] } },
         stackSeries: true,
         series: [{ color: '#5FAB78' }]
     });

Answer 1

There were multiple mistakes.

You have used JSON.Parse instead of JSON.parse .

You should wrap your code in $(document).ready(function) , so it can find dom element ie your div .

target Div name was also in-correct, you have mentioned theChart instead of thechart (its a case sensitive.)

UPDATES Looks like it was an issue with your JSON format, anyways I've correct it and updated in fiddle, verify bellow fiddle.

Fiddle

Your over all code should look like this.

<div id="thechart" style="height:600px;width:95%;"></div>

Script:

var d = JSON.parse('{ "Values": [[[5.00, 81.00], [7.20, 80.00], [9.00, 79.00], [10.80, 72.00], [12.00, 68.00], [15.00, 49.00]], [[5.00, 162.00], [7.20, 160.00], [9.00, 158.00], [10.80, 144.00], [12.00, 136.00], [15.00, 98.00]], [[5.00, 81.00], [5.00, 162.00]], [[15.00, 49.00], [15.00, 98.00]], [[3.00, 133.00], [3.90, 126.00], [4.80, 119.00], [6.00, 107.00], [7.20, 91.00], [9.00, 61.00]], [[3.00, 266.00], [3.90, 252.00], [4.80, 238.00], [6.00, 214.00], [7.20, 182.00], [9.00, 122.00]], [[3.00, 133.00], [3.00, 266.00]], [[9.00, 61.00], [9.00, 122.00]]] }'); 
console.log(d.Values);
$(function(){
    $.jqplot('thechart', d.Values);
});

Your JSON format should look like this, when you pass it to jqplot function

[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]

UPDATE

You need to remove extra square brackets:

var plot1 = $.jqplot('thechart', data3.Values,

instead of

var plot1 = $.jqplot('thechart', [data3.Values],