CODEWITHSUNDEEP
phpjquerymysqljsonhighcharts
Ashkrimn
Ashkrimn

Reputation: 73

Multiple series, multiple charts Highcharts

i have to create a single chart showing different series with different type of chart (Ex: one data series with 'areaspline' and one data series with 'column'). I built a db with a lot of data, extracted by sql query into a json file

[
    { "name": "Test", "data": [2.8,2.8,2.8,2.7,2.7,] },
    { "name": "kwc", "data": [10,1,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }
]

The json file is correct, but if i try to select the series for a chart with the $.each function it doesn't work! Here's my code 

<!DOCTYPE HTML>
    <html>
            <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script src="estrazione.php"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
      $(function () {
            $.getJSON("new3.php", function(json) {
            $.each(json.data, function(index, item){
        // split the data set into ohlc and volume
        var temperatura = [],
            misura = [],
            dataLength = json.length;

        for (i = 0; i < dataLength; i++) {
            temperatura.push([
                data[i][0] 
            ]);

            misura.push([
                data[i][1]
            ])
        }
        $('#container').highcharts({
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Analisi Temperature e Consumo Generale',
            },

            xAxis: [{
                categories: ['00.00', '00.15', '00.30', '00.45', '01.00', '01.15', '01.30', '01.45', '02.00', '02.15', '02.30', '02.45', '03.00', '03.15', '03.30', '03.45', '04.00', '04.15', '04.30', '04.45', '05.00', '05.15', '05.30', '05.45', '06.00', '06.15', '06.30', '06.45', '07.00', '07.15', '07.30', '07.45', '08.00', '08.15', '08.30', '08.45', '09.00', '09.15', '09.30', '09.45', '10.00', '10.15', '10.30', '10.45', '11.00', '11.15', '11.30', '11.45', '12.00', '12.15', '12.30', '12.45', '13.00', '13.15', '13.30', '13.45', '14.00', '14.15', '14.30', '14.45', '15.00', '15.15', '15.30', '15.45', '16.00', '16.15', '16.30', '16.45', '17.00', '17.15', '17.30', '17.45', '18.00', '18.15', '18.30', '18.45', '19.00', '19.15', '19.30', '19.45', '20.00', '20.15', '20.30', '20.45', '21.00', '21.15', '21.30', '21.45', '22.00', '22.15', '22.30', '22.45', '23.00', '23.15', '23.30', '23.45'],
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Consumo',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    format: '{value} Kw',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{
                name: 'Misure',
                color: '#4572A7',
                type: 'column',
                yAxis: 1,
                data: misura,
                tooltip: {
                    valueSuffix: ' Kw'
                }

            }, {
                name: 'Temperature',
                color: '#89A54E',
                type: 'spline',
                data: temperatura,
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });
    });


        </script>
    </head>
    <body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>'

this is my php code:

<?php
$data_scelta = "2013-08-08";
$misura = "kwc";
$temperatura = "Test";
$link = mysqli_connect('localhost:3306', 'root', '','telegestione');
    if (!$link)     {
        die('Could not connect: ' . mysqli_error());}
$sth = mysqli_query($link,"SELECT $temperatura FROM temperature WHERE dataora BETWEEN '$data_scelta 00:00:00.000'
                          AND '$data_scelta 23:59:59.997'");
$rows = array();
$rows['name'] = $temperatura;
while($r = mysqli_fetch_assoc($sth)) {
    $rows['data'][] = $r[$temperatura];}
$sth = mysqli_query($link,"SELECT $misura FROM misure WHERE dataora BETWEEN '$data_scelta 00:00:00.000'
                          AND '$data_scelta 23:59:59.997'");
$rows1 = array();
$rows1['name'] = $misura;
while($rr = mysqli_fetch_assoc($sth)) {
    $rows1['data'][] = $rr[$misura];}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
?>

I tryed any kind of option, but anything gone right :( Any hope to display 1 chart, 2 or more data series and 2 or more type of charts? Thanks in advance

Upvotes: 0

Views: 2980

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

It looks like your highcharts creation call is within your $.each function. So it will try to create 2 highcharts, but they both will be created in the same div, so you'll only end up with one. Also, the way you are caculating datalength, it'll be 2. When, it appears, you'd like it to be the length of the actual data (which is different for your different series). I can't do the getJSON in a jsfiddle, so I'm assuming your PHP code is creating the json object you listed (and it looks like it would). You can lose the each loop alltogether and set your 2 series like this:

   series: [{
        name: 'Misure',
        color: '#4572A7',
        type: 'column',
        yAxis: 1,
        data: json[1].data,
        tooltip: {
            valueSuffix: ' Kw'
        }

    }, {
        name: 'Temperature',
        color: '#89A54E',
        type: 'spline',
        data: json[0].data,
        tooltip: {
            valueSuffix: '°C'
        }
    }]

http://jsfiddle.net/bhlaird/dUkuY/

Upvotes: 0

Related Questions