W3 validator -> using <script type=“text/javascript”> within body of html

I trying to validate my page but have one error to fix.

I am using Google charts within my code. to populate the chart i require data to be filled in within the JavaScript shown in the code below.

<script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);



      function drawChart() {




        var data = google.visualization.arrayToDataTable([  <?php echo $data; ?>   ]);



        var data2 = google.visualization.arrayToDataTable([ <?php echo $datagoing; ?>   ]);


        var options = {
          backgroundColor: 'transparent',
            legend: 'none',
            height: '100px',
            width: '100px',
               chartArea: { height :"95%", width:"95%" },

        };

        var options2 = {
          backgroundColor: 'transparent',
            legend: 'none',
            height: '100px',
            width: '100px',
               chartArea: { height :"95%", width:"95%" },
        };


        var chart = new google.visualization.PieChart(document.getElementById('piechart<?php echo $loop ?>'));
        chart.draw(data, options);

        var chart2 = new google.visualization.PieChart(document.getElementById('piechartgoing<?php echo $loop ?>'));
        chart2.draw(data2, options2);

      }
    </script>

Open in new window


this is within a loop so the code is generated multiple times as you can see by looking at the source of my page http://mr-tipster.com/pages/newcard.php?venue=Warwick&time=3:05

my question would be how can i do this while keeping the page html validated: http://validator.w3.org/check?uri=http%3A%2F%2Fmr-tipster.com%2Fpages%2Fnewcard.php%3Fvenue%3DWarwick%26time%3D2%3A30&charset=%28detect+automatically%29&doctype=Inline&group=0
runnerjp2005Asked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
sorry I am no PHP guru but in general you will have to:
- Loop through your data and build the HTML table rows (as currently) but not the JavaScript part
- Instead push the $data and $datagoing to a PHP array
- After the table HTML creation has finished, write the output of the above PHP array to fill two JavaScript arrays containing the content
- loop through one of the two arrays and create both of the charts (as the index / length should be the same for both

Attached a modified page based on your live page.

HTH
Rainer
TestDynamicCharts.html
0
 
Tom BeckCommented:
You cannot have html tags that are unrelated to the table structure outside of a <td> tag. Only <th> or <td> can hold other tags.

Each script targets a specific div by id to place the results so those scripts can be anywhere on the page. Just get them outside the <table> tags. Also, it seems like you could just loop through and get it all done with a lot less javascript. Maybe that's another question.
0
 
Rainer JeschorCommented:
And the source passes the W3C validation :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.