0

I want to create a google line chart from MySQL data which is in json form. JSON data is in this format:

{
    "result": [
        {
            "Date": "Dec 17,2017",
            "start_time": "22,08,17",
            "selected_time": "[00,00,00]"
        },
        {
            "Date": "Dec 18,2017",
            "start_time": "21,48,57",
            "selected_time": "[00,00,00]"
        },
        {
            "Date": "Dec 21,2017",
            "start_time": "13,23,05",
            "selected_time": "[00,00,00]"
        },
        {
            "Date": "Dec 22,2017",
            "start_time": "00,13,33",
            "selected_time": "[00,00,00]"
        },
        {
            "Date": "Dec 23,2017",
            "start_time": "14,48,34",
            "selected_time": "[00,00,00]"
        },
        {
            "Date": "Dec 27,2017",
            "start_time": "19,21,34",
            "selected_time": "[00,00,00]"
        }
    ]
}

Below is code for what i'm doing. but it does not accepts start_time and selected_time values as gives error of mismatch. I have varchar datatypes for all these field in mysql db.

function callbackFuncWithData(json){   

var data = new google.visualization.DataTable(); 

data.addColumn('string', 'Date');
data.addColumn('timeofday', 'start_time');
data.addColumn('timeofday', 'selected_time');

$.each(json, function (key, value) {
$.each(value, function (key, value) {
var temp = [];
temp = value;
                    alert([temp['Date']+" "+temp['start_time']+" "+temp['selected_time']]);
data.addRows([
[ temp['Date'],temp['start_time'],temp['selected_time']]
]);
});
});
var options = {
        tooltip: {
            isHtml: true
        },
        title: 'Trendlines with multiple lines',
        hAxis: {
            title: 'Date',

        },
         vAxis: {
            title: 'Time'

        },
        pointSize: 5,
          series: {
                0: { pointShape: 'circle' },

            }

        };
var chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
   chart.draw(data, options);
    }
        }).fail(function (jq, text, err) {
        console.log(text + ' - ' + err);
            });
        }  
        </script>
    </head>
    <body>
        <div id="multipleTrendChart"></div>
    </body>
    </html>

But it shows this error "Error: Type mismatch. Value 22,08,17 does not match type timeofday in column index 1". Someone please suggest me what is the problem. Thanks

Nouman Yasin
  • 11
  • 3
  • where is the code that builds the json? timeofday should be an array, and look something like --> `"start_time": [22,08,17]` – WhiteHat Dec 28 '17 at 17:42
  • I had use the same format for one column as you described but it is not working as well.here is the json data sample – Nouman Yasin Dec 29 '17 at 20:10
  • "result": [ { "Date": "Dec 17,2017", "start_time": "22,08,17", "selected_time": "[00,00,00]" }, { "Date": "Dec 18,2017", "start_time": "21,48,57", "selected_time": "[00,00,00]" }, { "Date": "Dec 21,2017", "start_time": "13,23,05", "selected_time": "[00,00,00]" }, – Nouman Yasin Dec 29 '17 at 20:10

1 Answers1

0

if you change the format of the json, it should appear as follows,
without quotes surrounding the arrays for 'timeofday' 

    {
        "Date": "Dec 17,2017",
        "start_time": [22,08,17],
        "selected_time": [00,00,00]
    },

otherwise, you can use the following to convert to arrays... 

$.each(json, function (key, value) {
  data.addRow([
    value.Date,
    value.start_time.split(','),
    JSON.parse(value.selected_time)
  ]);
});
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • This is my json data link: http://localhost/capable/v1/getgraphbyselectedtime If i alert these values it gives me same format as you mentioned above, but error remain the same mismatch value. – Nouman Yasin Dec 31 '17 at 06:38
  • Dear WhiteHat any more suggestions regarding the problem? – Nouman Yasin Jan 01 '18 at 08:51