Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to add Highstock chart in my plugin. It requires input data in json format. But I have some troubles with default json parser in jQuery. I've already read this article, but still can't understand how can I add the chart in the plugin.

Can someone describe how does getJSON() works in wp plugins, and if it's possible to send data from php-function inside the plugin to the jQuery script inside this plugin in json format?

Here is example of highstock script, that I want to place in my plugin:

$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });
});

And php code, that I want to put in function inside the plugin:

global $wpdb;

$table=$wpdb->prefix."table_name";

$query=$wpdb->get_results("SELECT `date`,`value` FROM `".$table."` WHERE `date` BETWEEN '2011' AND '2012' ORDER BY `date` ASC; ", ARRAY_A);

$i=0;
for($j=0; $j<sizeof($query); $j++) {
    $result[$j][]=strtotime($query[$j]['date'])*1000;
    $result[$j][]=(float)$query[$j]['value'];
}
echo json_encode($result);

Can anyone help? I'm really get tired to seek the solution.

share|improve this question
    
Does the chart appear with the demo data provided on highcharts? –  fischi Dec 27 '12 at 12:23
    
Yes, here is the demo. I've changed some setting and wrote my own php-script to generate json-formatted date. It works pretty well outside the wp-plugin. The problem is to add this scripts inside the wp-plugin. –  drake2300 Dec 27 '12 at 12:38
    
Are you familiar with the WordPress way of enqueueing scripts in your Plugin? –  fischi Dec 27 '12 at 13:07
    
Of course, but I need to add both of this scripts to plugin. PHP-callback function generates json output; jquery script gets this data and builds the charts. The problem is getJSON() accepts url's only, not php functions. –  drake2300 Dec 27 '12 at 13:16
    
Okay, in this case implement a callable PHP-File that delivers the JSON, and does nothing else. Maybe located at example.com/wp-content/plugins/yourplugin/json/json.php –  fischi Dec 27 '12 at 14:09
show 1 more comment

1 Answer

Have a read of AJAX in Plugins, then see if you can adapt this code to what Highcharts is wanting:

add_action('wp_ajax_wpse_77392_get_json', 'wpse_77392_get_json');
add_action('wp_ajax_nopriv_wpse_77392_get_json', 'wpse_77392_get_json');

function wpse_77392_get_json() {
    global $wpdb;

    $sql = "
        SELECT `date`,`value`
        FROM {$wpdb->prefix}table_name
        WHERE `date` BETWEEN '2011' AND '2012'
        ORDER BY `date` ASC;
    ";

    $results = $wpdb->get_results($sql);
    $json = json_encode($results);

    header('Content-type: application/json');
    echo $json;
    exit;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.