Draw a Highcharts.com chart in a custom template WordPress

  highcharts, javascript, jquery, php, wordpress

i’ve tried to solve that problem alone but seems i’m not good enough 😉

So i coded that and here everything work : https://www.1max2peche.com/hydro/index.php?code_dpt=71&code_sta=U430001001

And then i put that in a page template on my wordpress website (using Jannah theme) and everything work normally but not the charts ! https://www.1max2peche.com/conditions-peche/?code_dpt=71&code_sta=U430001001

So i added that in my function.php of my theme but not better :

    add_action('wp_enqueue_scripts','Load_Chart_Script');
function Load_Chart_Script(){
    if ( is_page_template('page-conditions.php') ) {
        wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
        wp_enqueue_script('highstock', 'https://code.highcharts.com/stock/highstock.js');
        wp_enqueue_script('exporting', 'https://code.highcharts.com/stock/modules/exporting.js');
        wp_enqueue_script('export-data', 'https://code.highcharts.com/stock/modules/export-data.js');
    } 
}

Here is a part of my code, how i generate that from Json datas.

    $datetimeParis = new DateTime("$now", new DateTimeZone("Europe/Paris"));
        $decalage = intval($datetimeParis->getOffset())/3600;
        $surl = "https://api.solunar.org/solunar/".$_SESSION["latitude"].",".$_SESSION["longitude"].",".$datetime->format('Ymd').",".$decalage;
        $sraw = file_get_contents($surl);
        $sjson = json_decode($sraw,true);

        echo "
            <script language="JavaScript" type="text/javascript">
                (function() {
                      $('#graph$i').highcharts({
                        title: '',
                        xAxis: {
                          type: 'datetime'
                        },
                        series: [{
                          name: 'Indice solunaire',
                          data: [
                            [new Date('".$datetime->format('Y-m-d')." 01:00:00').getTime(), ".$sjson["hourlyRating"][0]."],
                            [new Date('".$datetime->format('Y-m-d')." 02:00:00').getTime(), ".$sjson["hourlyRating"][1]."],
                            [new Date('".$datetime->format('Y-m-d')." 03:00:00').getTime(), ".$sjson["hourlyRating"][2]."],
                            [new Date('".$datetime->format('Y-m-d')." 04:00:00').getTime(), ".$sjson["hourlyRating"][3]."],
                            [new Date('".$datetime->format('Y-m-d')." 05:00:00').getTime(), ".$sjson["hourlyRating"][4]."],
                            [new Date('".$datetime->format('Y-m-d')." 06:00:00').getTime(), ".$sjson["hourlyRating"][5]."],
                            [new Date('".$datetime->format('Y-m-d')." 07:00:00').getTime(), ".$sjson["hourlyRating"][6]."],
                            [new Date('".$datetime->format('Y-m-d')." 08:00:00').getTime(), ".$sjson["hourlyRating"][7]."],
                            [new Date('".$datetime->format('Y-m-d')." 09:00:00').getTime(), ".$sjson["hourlyRating"][8]."],
                            [new Date('".$datetime->format('Y-m-d')." 10:00:00').getTime(), ".$sjson["hourlyRating"][9]."],
                            [new Date('".$datetime->format('Y-m-d')." 11:00:00').getTime(), ".$sjson["hourlyRating"][10]."],
                            [new Date('".$datetime->format('Y-m-d')." 12:00:00').getTime(), ".$sjson["hourlyRating"][11]."],
                            [new Date('".$datetime->format('Y-m-d')." 13:00:00').getTime(), ".$sjson["hourlyRating"][12]."],
                            [new Date('".$datetime->format('Y-m-d')." 14:00:00').getTime(), ".$sjson["hourlyRating"][13]."],
                            [new Date('".$datetime->format('Y-m-d')." 15:00:00').getTime(), ".$sjson["hourlyRating"][14]."],
                            [new Date('".$datetime->format('Y-m-d')." 16:00:00').getTime(), ".$sjson["hourlyRating"][15]."],
                            [new Date('".$datetime->format('Y-m-d')." 17:00:00').getTime(), ".$sjson["hourlyRating"][16]."],
                            [new Date('".$datetime->format('Y-m-d')." 18:00:00').getTime(), ".$sjson["hourlyRating"][17]."],
                            [new Date('".$datetime->format('Y-m-d')." 19:00:00').getTime(), ".$sjson["hourlyRating"][18]."],
                            [new Date('".$datetime->format('Y-m-d')." 20:00:00').getTime(), ".$sjson["hourlyRating"][19]."],
                            [new Date('".$datetime->format('Y-m-d')." 21:00:00').getTime(), ".$sjson["hourlyRating"][20]."],
                            [new Date('".$datetime->format('Y-m-d')." 22:00:00').getTime(), ".$sjson["hourlyRating"][21]."],
                            [new Date('".$datetime->format('Y-m-d')." 23:00:00').getTime(), ".$sjson["hourlyRating"][22]."],
                            [new Date('".$datetime->format('Y-m-d')." 24:00:00').getTime(), ".$sjson["hourlyRating"][23]."],
                            ]
                        }]
                      });
                    });
            </script>
                ";
    
        echo "<div id="graph".$i."" style="min-width: 100px; height: 200px; margin: 0 auto"></div>";

When i copy the raw data from HTML source in a jsfiddle.net example, it works… i really don’t understand where is my mistake? And no more informations in console errors.

Thanks a lot guys!
Regards

Source: Ask PHP

LEAVE A COMMENT