Muhammad Omer
Published © GPL3+

Power Up

Attach your solar inverter to the cloud and send your family alerts when they are using too much power (Warning, they wont like it).

IntermediateWork in progress1,629
Power Up

Things used in this project

Hardware components

Raspberry Pi 1 Model B+
Raspberry Pi 1 Model B+
×1

Software apps and online services

Eclipse

Story

Read more

Schematics

Raspberry Pi

Code

UI Code

HTML
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Allied Consultants Power Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
       
    <style type='text/css'>
 </style>

    <script type='text/javascript'>
        // user's timezone offset
        var my_offset = new Date().getTimezoneOffset();

        $(function () {
            var seriesOptions = [],
                seriesCounter = 0,
                names = ['Power Consumed', 'Power Produced', 'Battery Capacity', 'Input Voltage'],
                fieldNumbers = [1, 2, 5, 7],
                yAxisNumber = [1, 1, 2, 0],
                graphColor = ['red', 'green','blue','gray']
                // create the chart when all data is loaded
                createChart = function () {

                    $('#container').highcharts('StockChart', {

                        rangeSelector: {
                            buttons: [
                            {
                                count: 5,
                                type: 'minute',
                                text: '5M'
                            }, {
                                count: 1,
                                type: 'hour',
                                text: '1H'
                            },
                            , {
                                count: 3,
                                type: 'hour',
                                text: '3H'
                            },
                            , {
                                count: 1,
                                type: 'day',
                                text: '1D'
                            }, {
                                type: 'all',
                                text: 'All'
                            }],
                            inputEnabled: false,
                            selected: 3
                        },

                        ////
                        yAxis: [
                        {
                            labels: {
                                align: 'left',
                                x: 3
                            },
                            title: {
                                text: 'V'
                            },
                            height: '30%',
                            min:0,
                            max:260,
                            lineWidth: 2
                        }, 
                        {
                            labels: {
                                align: 'right',
                                x: 3
                            },
                            title: {
                                text: 'W'
                            },
                            top: '35%',
                            height: '65%',
                            offset: 0,
                            min:0,

                            lineWidth: 2
                        }, 
                        {
                            labels: {
                                align: 'left',
                                x: 100
                                //,color:blue
                            },
                            title: {
                                text: '%'
                            },
                            //top: '65%',
                            min: 0,
                            max:100,
                            height: '30%',
                            offset: 0,
                            lineWidth: 2
                        }],

                        plotOptions: {
                            series: {
                               // compare: 'percent'
                            }
                        },

                        tooltip: {
                            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                            //valueDecimals: 2
                        },

                        series: seriesOptions
                    });
                };

            $.each(names, function (i, name) {
                $.getJSON('https://api.thingspeak.com/channels/40179/fields/' + fieldNumbers[i] + '.json?offset=0&round=10&api_key=3TYDXTGPRZGT9OS2&results=5000', function (data1) {
                    var array = [];
                    for (var index in data1.feeds) {
                        var abc = [];
                        abc.push(getChartDate(data1.feeds[index].created_at));
                        abc.push(parseFloat(data1.feeds[index]['field' + fieldNumbers[i]]));
                        array.push(abc);
                    }

                    seriesOptions[i] = {
                        name: name,
                        data: array,
                        yAxis: yAxisNumber[i],
                        color: graphColor[i],
                    };


                    // As we're loading the data asynchronously, we don't know what order it will arrive. So
                    // we keep a counter and create the chart when all the data is loaded.
                    seriesCounter += 1;

                    if (seriesCounter === names.length) {
                        createChart();
                    }
                });
            });
        });
        // converts date format from JSON
        function getChartDate(d) {
            // get the data using javascript's date object (year, month, day, hour, minute, second)
            // months in javascript start at 0, so remember to subtract 1 when specifying the month
            // offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
            return Date.UTC(d.substring(0, 4), d.substring(5, 7) - 1, d.substring(8, 10), d.substring(11, 13), d.substring(14, 16), d.substring(17, 19)) - (my_offset * 60000);
        }
        //]]>  

    </script>


</head>
<body>
    <div id="container" style="height: 100%; min-width: 310px"></div>
</body>


</html>

Credits

Muhammad Omer

Muhammad Omer

1 project • 0 followers

Comments

Related channels and tags
  • Home Automation
  • Internet of Things
  • Microsoft
  • Raspberry Pi