Question

hola, recientemente empecé a trabajar con la libreria higtcharts y todo me habia funcionado bien hasta que empece a trabajar con este tipo de gráficas ya que no se bien como lograr lo que necesito, bueno tengo estos resultados en mi base de datos

C3 2015 9 270.74
C3 2015 10 295.42
C3 2015 11 289.78
C3 2015 12 157.91
C4 2015 9 1441.32
C4 2015 10 1551.74
C4 2015 11 1429.46
C4 2015 12 1121.55

las horas me las grafica bien, anexo como aparece
https://twitter.com/rachpts/status/587298405975658496

pero necesito que me salga de esta manera

https://twitter.com/rachpts/status/587300128949579776

ya que los títulos los saco depende de la consulta del usuario, si alguien me puede ayudar, se lo voy agradecer mucho
desde ya muchas gracias

Comments

Podrías poner algo del código que estás usando? Siempre es más simple viendo lo que tienes hecho que partiendo desde cero...

---

hola Leonardo dejo mi codigo, y ojala que me puedan orientar,

success:    function (response) {
                alert("actualizar grafica");
                var result = eval(response);
                var chart5 = $('#container7').highcharts();

                chart5.xAxis[0].setCategories(result[0]);
                chart5.series[0].setData(result[1]); //idle with team

// con esto mando actualizar la grafica
en mi index,  la tengo asi la grafica
            //idle report
             $(function () {

                $('#container7').highcharts({
                    loading: {
                    labelStyle: {
                        top: '50%',
                        color: 'green'
                    },
                    style: {
                        backgroundColor: 'white'
                    }
                    },
                    chart: {
                        type: 'column',
                        width: 830,
                        height:410
                    },
                    title: {
                        text: "Idle Report"
                    },
                    xAxis: {
                        categories: [<?php echo $week;?>]
                    },
                    yAxis: [{
                            title: {
                                text: 'Hours'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }],
                            min:0
                        },{ // Secondary yAxis
                            title: {
                                text: '',
                                style: {
                                    color: '#4572A7'
                                }
                            },
                            labels: {
                                format: '{value} %',
                                style: {
                                    color: '#4572A7'
                                }
                            },
                            opposite: true,
                            max: 100,
                            min:0
                    }],
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.x + '</b><br>' +
                                this.series.name + ': ' + this.y + '<br>' +
                                'Total: ' + this.point.stackTotal;
                        }
                    },
                    plotOptions: {

                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: false,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                                style: {
                                    textShadow: '0 0 3px black, 0 0 3px black'
                                }
                            }
                        },
                        line: {
                            dataLabels: {
                                enabled: false
                            },
                            enableMouseTracking: true
                        },
                        spline: {
                            lineWidth: 2,
                            states: {
                                hover: {
                                    lineWidth: 5
                                }
                            },
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    series: [

                    ]
                });
            });
        </script>

y tengo otro archivo php donde mando guardar el arreglo

        //get data
        $sql="exec [RIA].[dbo].[idle] 1,'".$ip."','',''";
        $rs=odbc_exec($connection,$sql);

        while(odbc_fetch_row($rs)){
            $label[]=odbc_result($rs,"week");
            $idle[]=odbc_result($rs,"hours");
                           $team[]=odbc_result($rs,"team");

        }

        $data[0]=$label;
        $data[]=$idle;
                    $data[]=$team;

        $_SESSION['data']=$data;
        $_SESSION['check']=$sql;
    break;

}

echo json_encode($data);

Answer 1

Segun la imagen que pones y basandome en tu pregunta anterior, la estructura del array para la propiedad series debe ser de esta forma:

series: [
{
    name: 'c3',
    //      9       10       11      12
    data: [270.74, 295.42, 289.78, 157.91]
},
{
    name: 'c4',
    //      9       10       11      12
    data: [1441.32, 1551.74, 1429.46, 1121.55]
}]

y la propiedad categories deberia tener las semanas ( week )

categories : ['9', '10', '11', '12']

entonces deberias modificar tu consulta y la estructura del codigo json.

$sql="exec [RIA].[dbo].[idle] 1,'".$ip."','',''";
$rs=odbc_exec($connection,$sql);

$data = array(
    'categories' => array(),
    'series' => array()
);

while( odbc_fetch_row($rs) )
{
    $week = odbc_result($rs,"week");
    $hours = odbc_result($rs,"hours");
    $team = odbc_result($rs,"team");

    if( !isset($data['series'][$team]) )
        $data['series'][$team] = array();

    array_push($data['series'][$team], $hours);

    if( !in_array($week, array_values($data['categories'])) )
        $data['categories'][] = $week;
}

header('Content-type: application/json; charset=utf-8');

die(json_encode($data));

json_encode($data) te devolvería una estructura así:

{
    "categories" : ["9","10","11","12"],
    "series" : {
        "C3" : ["270.74","295.42","289.78","157.91"],
        "C4" : ["1441.32","1551.74","1429.46","1121.55"]
    }
}

---

ahora modifica la forma en que recibes los datos en el cliente.

define una variable para las opciones del objeto highcharts.

var chart_options;

define chart_options:

chart_options = {
    loading: {
        labelStyle: {
            top: '50%',
            color: 'green'
        },
        style: {
            backgroundColor: 'white'
        }
    },
    chart: {
        type: 'column',
        width: 830,
        height:410
    },
    title: {
        text: "Idle Report"
    },
    xAxis: {
        categories: ['9', '10', '11', '12']
    },
    yAxis: [{
            title: {
                text: 'Hours'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            min:0
        },{ // Secondary yAxis
            title: {
                text: '',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} %',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true,
            max: 100,
            min:0
    }],
    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br>' +
                this.series.name + ': ' + this.y + '<br>' +
                'Total: ' + this.point.stackTotal;
        }
    },
    plotOptions: {

        column: {
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                style: {
                    textShadow: '0 0 3px black, 0 0 3px black'
                },

            }
        },
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: true
        },
        spline: {
            lineWidth: 2,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        name: 'c3',
        data: []
    },
    {
        name: 'c4',
        data: []
    }]
};

inicializa el grafico:

$('#container7').highcharts(chart_options);

la forma en que obtendras los datos por ajax será:

$.ajax({
    type: 'POST',
    url: 'http://tupagina.com/obtener_datos',
    dataType: 'json',
    data: {},
    success: function(response)
    {
        var updated_options = chart_options,
            x;

        updated_options.xAxis.categories = response.categories;
        updated_options.series = [];

        for(x in response['series'])
        {
            var serie = {};

            serie['name'] = x;
            serie['data'] = response['series'][x].map(function(item, index){
                return parseFloat(item);
            });

            updated_options.series.push(serie);
        }

        $('#container7').highcharts(updated_options);
    }
});

de tal forma que tendrias un grafico como este:

http://embed.plnkr.co/2UNgc18sCVsup8DPsJa8/
http://plnkr.co/edit/2UNgc18sCVsup8DPsJa8?p=preview