How to parse data into data table using google visualization

JavaScript
1

I’m using java script getting issues with data parsing into data table.2.php (1.1 KB)

value of ak is array(
[0] => SIS-L5-outside_rm_5019
[1] => SIS-L5-outside-rm5012
[2] => SIS-L5-Corridor
[3] => SIS-L1-Near-Lift
[4] => SIS-L1-Lobby(Near-Entrance)
[5] => SIS-L1-Subway-105
[6] => SIS-B1-GamesRm
[7] => SIS-B1-SMUSA
[8] => SIS-B1-Corridor
[9] => SIS-B1-Outside-C4SR
[10] => SIS-B1-Lounge
[11] => SIS-B1-Lift5
);

and kd is
array(
[0] => 1275.5506213988
[1] => 1290.7307725817
[2] => 1302.7705921255
[3] => 1243.0720371736
[4] => 1162.4230535716
[5] => 1149.6843381107
[6] => 1162.1262680995
[7] => 1069.3115580757
[8] => 1058.0760042459
[9] => 1007.656771716
[10] => 1029.8077281041
[11] => 1010.4399878141
);

I want to create histogram using both values Xaxis should be ak value and Y axis should be kd values getting error when creating datatables error(2.php:11 Uncaught SyntaxError: Unexpected number)

2

Encode first the data via json encode to use them in javascript Example:
$post_data = json_encode($post_data);
If you do this then post the new $post_data format to see how it we manipulate them to using in js

3

Thanks Liontas!
I did that here you can see i think i have issues in parsing at var data = new google.visualization.DataTable(pausecontent);
Here is my code.2.php (1.1 KB)

4

Can you post a sample of the json data that you have?

5

[{“SIS-L5-outside_rm_5019”:1275.5506213987728,“SIS-L5-outside-rm5012”:1290.7307725817402,“SIS-L5-Corridor”:1302.7705921254517,“SIS-L1-Near-Lift”:1243.072037173642,“SIS-L1-Lobby(Near-Entrance)”:1162.4230535715515,“SIS-L1-Subway-105”:1149.6843381106778,“SIS-B1-GamesRm”:1162.1262680994546,“SIS-B1-SDCSA”:1069.311558075748,“SIS-B1-Corridor”:1058.0760042458824,“SIS-B1-Outside-C4SR”:1007.6567717160162,“SIS-B1-Lounge”:1029.8077281040871,“SIS-B1-Lift5”:1010.439987814117}]

6 
<!DOCTYPE html>
<html>
    <head>
        <title>Histogram Sitepoint</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
    var pausecontent =[['Dinosaur', 'Length']];            
    var dataObj=[{"SIS-L5-outside_rm_5019":1275.5506213987728,
              "SIS-L5-outside-rm5012":1290.7307725817402,
              "SIS-L5-Corridor":1302.7705921254517,
              "SIS-L1-Near-Lift":1243.072037173642,
              "SIS-L1-Lobby(Near-Entrance)":1162.4230535715515,
              "SIS-L1-Subway-105":1149.6843381106778,
              "SIS-B1-GamesRm":1162.1262680994546,
              "SIS-B1-SDCSA":1069.311558075748,
              "SIS-B1-Corridor":1058.0760042458824,
              "SIS-B1-Outside-C4SR":1007.6567717160162,
              "SIS-B1-Lounge":1029.8077281040871,
              "SIS-B1-Lift5":1010.439987814117}]; 
          
      
       for(var k in dataObj[0]){
       pausecontent.push([k,dataObj[0][k].toString()]);
       }  
  
  
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(pausecontent);               

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' }
        };

        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
            
            
        </script>
    </head>
    <body>
   <div id="chart_div" style="width: 900px; height: 500px;"></div>

  </body>
</html>

746×466 14.4 KB

7

Thanks Liontas,

it is working properly but if i want to print x axis values on Y and Y axis values on x but i’m not able to do so. Can u suggest me

8

Invert the push series.eg [dataObj[0][k].to string(),k]

9

tried that not getting proper values, It is taking random values.

974×595 2.8 KB

10

Set orientation to vertical as you see in the following images:

891×321 32.4 KB

11

oops Ok Thanks,

one more thing is that it is taking random values 0,1,2,3,4 for x axis but i have some values that are not numbers, So i changed x axis values(SIS-L5-outside_rm_5019) with index values so that it can be single value plot but i’m not able to parse it. What i’m trying is here i have values on y are 12 so i’m taking on x axis 1-12numbers.
[{“1”:1275.5506213987728,“2”:1290.7307725817402,“3”:1302.7705921254517,“4”:1243.072037173642,“5”:1162.4230535715515,“6”:1149.6843381106778,“7”:1162.1262680994546,“8”:1069.311558075748,“9”:1058.0760042458824,“10”:1007.6567717160162,“11”:1029.8077281040871,“12”:1010.439987814117}];

12

Are you sure that the Histogram is the graph for your case?As i read at google

A histogram is a chart that groups numeric data into bins, displaying the bins as segmented columns. They’re used to depict the distribution of a dataset: how often values fall into ranges.

13

1069×686 13.3 KB

Yes I’m sure. I’m trying to create this one. X axis will be 1-12 nos and Y axis will be the values i’m giving above.

14

In above mention plot the problem is ti is plotting all values at 0(x axis) instead of that it should plot like that
X:Y
1:1275.5506213987728
2:1290.7307725817402
3:1302.7705921254517
4:1243.072037173642
5:1162.4230535715515
6:1149.6843381106778
7:1162.1262680994546
8:1069.311558075748
9:1058.0760042458824
10:1007.6567717160162
11:1029.8077281040871
12:1010.439987814117

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.