I am trying to make a google chart dashboard and tried the following code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls']}); </script> <script type="text/javascript"> function drawVisualization() { var listOfValues = document.getElementById("id1").value ; var temp2 = null; var temp3 = null ; var longArray = ['Year','Positive','Negative','Neutral','Comments','Status','Score']; var shortArrays = [], m, len; var arrayOfArray = []; var temp = listOfValues.split("-"); for(var i=0; i<temp.length; i++){ temp2 = temp[i].split(','); if(temp2.length == 7){ for(var j=0; j<temp2.length;j++){ temp3 = temp2[j].split(','); longArray.push(temp3[0]); } } } for (m = 0, len = longArray.length; m < len; m += 7) { shortArrays.push(longArray.slice(m, m + 7)); console.log(shortArrays); } for (m = 0, len = shortArrays.length; m < len; m++) { arrayOfArray.push(shortArrays[m]); } // Prepare the data var data = google.visualization.arrayToDataTable(arrayOfArray); // Define a category picker control for the Gender column var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', 'options': { 'filterColumnLabel': 'Year', 'ui': { 'labelStacking': 'vertical', 'allowTyping': false, 'allowMultiple': true } } }); // Define a category picker control for the Gender column var categoryPicker2 = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'categoryPick2', 'options': { 'filterColumnLabel': 'Status', 'ui': { 'labelStacking': 'vertical', 'allowTyping': false, 'allowMultiple': true } } }); //Define a combo chart var combo = new google.visualization.ChartWrapper({ 'chartType':'ComboChart', 'containerId':'chart2', 'options': { 'title' : 'Sentiment Analysis', // setting the "isStacked" option to true fixes the spacing problem 'isStacked': false, 'height': 300, 'width': 300, 'vAxis': {title: "Sentiment"}, 'hAxis': {title: "Month"}, 'seriesType': "bars", 'series': {5: {type: "line"}} }, // 'view': {'columns': [0, 1,2,3]} 'view': { // set the columns to use in the chart's view // calculated columns put data belonging to each country in the proper column columns: [0,1,2,3] } }); // Define a table var table = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'chart4', 'options': { 'view': {'columns': [1,2]}, 'width': '700px', 'height':'100px' } }); // Define a table var table2 = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'table2', 'options': { 'width': '200px' }, 'view': {'columns': [0,5]} }); //Define a line chart var line = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'containerId':'lineChart', 'options': { 'label':'Sentiment Analysis' }, 'view': {'columns': [4,6]} }); // Create a dashboard // new google.visualization.Dashboard(document.getElementById('dashboard')); new google.visualization.Dashboard(document.getElementById('dashboard')). // Establish bindings, declaring the both the slider and the category // picker will drive both charts. bind([categoryPicker2], [line,table2]). bind([categoryPicker], [combo,table]). // Draw the entire dashboard. draw(data); //draw(data2); google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="dashboard"> <table> <tr style='vertical-align: top'> <td style='width: 300px; font-size: 0.9em;'> <div id="control1"></div> <div id="control2"></div> <div id="control3"></div> <div id="categoryPick2"></div> </td> <td style='width: 600px'> <div style="float: left;" id="chart1"></div> <div style="float: left;" id="chart2"></div> <div style="float: right;" id="chart3"></div> <div style="float: right;" id="chart4"></div> <div style="float: right;" id="lineChart"></div> <div style="float: right;" id="table2"></div> </td> </tr> </table> <input type="hidden" id="id1" value=" ${listVal}" /> <input type="hidden" id="id2" value=" ${header1}" /> </div> <div id="chart_div2" ></div> </body> </html>
After executing this code I get table data clearly; but, it doesn’t show the chart properly (I have used combo chart and Line chart). It is throwing the following error:
"Data column(s) for axis #0 cannot be of type string"
Can someone please tell how to solve this issue.
Thanks.
when you alert listOfValues you will get these values :
2010,84,65,45,facebook,bad,12345-2011,64,75,85,facebook,bad,2345-
Basically these are two rows in database which i have separated by a hyphen. Please let me know if you need further details.