Highcharts datepicker - multiple series

Question

I'm trying to use highcharts to visualize some numbers out of my database :) After fetching them from the db I'm encoding the outcome (currently 2 categories) as JSON:

Name
Category
Data

[{"name":"Something 1","category":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,0,1,0,0,0,1,0,0,7,6,3,4,4,10,8,9,7,12,5,8,2,0]},{"name":"Something 2","category1":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,1,1,0,0,0,0,2,1,4,2,3,2,4,3,4,6,3,5,3,5,2,1]}]

which is later be used by my example.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Diagram</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

$(function () {
    var chart;
    $(document).ready(function() {
        $.getJSON("data.php", function(json) {
                    chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'line'
                    },
                    title: {
                        text: 'Something and Anything',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'bla bla bla',
                        x: -20
                    },
                    xAxis: {
                        categories: [],
                        labels: {
                                        align: 'center',
                                        x: -3,
                                        y: 30,
                                        formatter: function() {
                                        return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
                                        }
                                }
                    },
                    yAxis: {
                        title: {
                            text: 'Orders'
                        },
                        plotLines: [{
                            value: 0,
                            width: 0,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +':00 => '+ this.y;
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                        y: 100,
                        borderWidth: 0
                    },
                    series: json
                });
            });

    });

});
        </script>
        </head>
        <body>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <!-- Bla Bla Bla Highcharts Container -->
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
        </body>
</html>

so far so good - what I finally want to add is the possibility of adding a datepicker now. My "data.php" file is already able to handle a "Date" Parameter:

data.php?dateParam=2014-05-08

But still I'm not finding a valid way to add the datepicker into my code. Also wanted to let you know that I'm pretty new to JS and aware of the fact that this script could have been written way better...

So long and thanks for all the cheese, Jo3rg

Answer 1

A few tips

if you use categories, dateFormat will not work, it is based on timestamp
you should set type of xAxis (ie category) or datetime
if you use datetime, your dates should be parsed to timestamp (Date.UTC functon or Date.parse()
in the series you should define which data is used, becuase your json is invalid (incorrect structure for highcharts)

Highcharts datepicker - multiple series

Question

1 answers

solution1
0 2014-07-14 10:26:39

Highcharts datepicker - multiple series

Question

1 answers

solution1 0 2014-07-14 10:26:39

solution1
0 2014-07-14 10:26:39