Highcharts multiple series json from php

Question

Hi guys i need help with Highcharts library, i have this array coming from php,

[{"name":"25% en cambio de aceite 76 lubricants","data":[["2015-09-07",1],["2015-09-23",2],["2015-09-24",3],["2015-09-30",3]]},{"name":"10% Descuento en filtro de aceite","data":[["2015-09-07",1],["2015-09-23",2],["2015-09-24",3],["2015-09-30",3],["2015-10-03",3],["2015-10-05",1],["2015-10-09",1],["2015-10-10",1]]}]

I need to show this as line chart dynamically, but have been unable to do it, i believe the error comes from the quotes in dates, needs to be in format [Date.UTC(2015, 2, 6), 3]

This is my php function that returns the json data

public function actionTransactionsRedeemed() {
    // Transacciones Totales redimidas por merchant
    $sql = "SELECT DISTINCT `transaction`.idPromotion, promotion.`name` FROM `transaction` INNER JOIN promotion ON `transaction`.idPromotion = promotion.idPromotion WHERE `transaction`.idMerchant = 2 AND `transaction`.idPromotion IS NOT NULL";
    $idPromotion = Yii::app()->db->createCommand($sql)->queryAll();
    $idPromotions = array();

    $tempArray = array();
    $result = array();
    $i = 1;
    $rs = array();

    foreach($idPromotion as $i){
        //process each item here
        $id = $i["idPromotion"];
        $tempArray['name'] = $i["name"];

        $sql = "SELECT count(*) AS count, DATE(`transaction`.date) AS `date` FROM `transaction` WHERE `transaction`.idMerchant = 2 AND `transaction`.idPromotion = $id GROUP BY DATE(`transaction`.date)";
        $transactionsRedeemed = Yii::app()->db->createCommand($sql)->queryAll();
        foreach($transactionsRedeemed as $item2){
            $rs[0] = $item2['date'];
            $rs[1] = $item2['count'];
            $tempArray['data'][] = $rs;
            $rs = array();
        }
        $i++;
        array_push($result, $tempArray);
    }
    //$result = json_encode($result, JSON_NUMERIC_CHECK);

    //echo json_decode($result);
    print  json_encode($result, JSON_NUMERIC_CHECK);
}

And this is the Jquery that builds the chart

$(document).ready(function() {
    var options = {
        chart: {
            type: 'spline',
            renderTo: 'chart-merchant-day',
            defaultSeriesType: 'spline',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Total de promociones redimidas',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            labels: {
                align: 'center',
                x: -3,
                y: 20,
                formatter: function() {
                    return Highcharts.dateFormat('%l%p', this.value);
                }
            }
        },
        yAxis: {
            title: {
                text: 'Transacciones'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return Highcharts.dateFormat('%l%p', this.x-(24000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Count'
        }],
        credits: false
    }
    // Load data asynchronously using jQuery. On success, add the data
    // to the options and initiate the chart.
    jQuery.get('?r=/transactions/transactionsRedeemed', null, function(tsv) {
        var lines = [];
        traffic = [];

        var data = $.parseJSON(tsv);
        var x = 0;

        //console.log(tsv);

        $.each(data, function(i, item) {
            //alert(item);
            //console.log(item);

            $.each(item, function(y, item2) {

                if(y == "data"){
                    //console.log(item2);
                    try {
                        tsv = item2;
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            options.series[x].data.push([Date.parse(line[0]),line[1]]);
                            /*date = Date.parse(line[0] +' UTC');
                            traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10)
                            ]);*/
                        });
                    } catch (e) {  }

                    options.series[x].data = traffic;

                } else if(y == "name"){
                    options.series[x].name = item2;
                }
            });
            x++;
        });
        chart = new Highcharts.Chart(options);
        //console.log(tsv.replace(/\"/g, ""));
        //tsv = tsv.replace(/\"/g, "");
    });
});

Any help will be greatly appreciated, im so exhausted at this point.

davcs86 · Accepted Answer · 2015-10-12 05:30:10Z

2

The function is actually simpler,

jQuery.get('?r=/transactions/transactionsRedeemed', null, function(tsv) {

    var data = $.parseJSON(tsv);
    $.each(data, function (i, item) {
        options.series.push({
            name: item['name'],
            data: []
        });
        $.each(item['data'], function (j, dataitem) {
            var dataitemvalue = null;
            try {
                dataitemvalue = [Date.parse(dataitem[0]), dataitem[1]];
            } catch (e) {}
            options.series[i].data.push(dataitemvalue);
        });
    });

    chart = new Highcharts.Chart(options);

});

JSFiddle demo

answered Oct 12, 2015 at 5:30

davcs86

3,9462 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highcharts multiple series json from php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related