Forum Replies Created by vstuart

Viewing 4 posts - 1 through 4 (of 4 total)
  • December 27, 2016 at 7:05 am in reply to: JQuery on local host not working (want to read local CSV file) #13840

    vstuart

    Q: how can I force the “indexLabel” placement/alignment to the far left?

    December 27, 2016 at 7:00 am in reply to: JQuery on local host not working (want to read local CSV file) #13839

    vstuart

    Aside: data is provided by a Python script / neural net (no GPU!). Not provided; see Keras-js …

    https://github.com/transcranial/keras-js

    December 27, 2016 at 6:51 am in reply to: JQuery on local host not working (want to read local CSV file) #13838

    vstuart

    I solved this myself.

    http://imgur.com/a/13J3a

    Code:

    
<!doctype html>
<HTML lang="en">
<HEAD>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="css/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="css/canvasjs.min.js"></script>

<script type="text/javascript">
    window.onload = function () {
        // https://canvasjs.com/docs/charts/how-to/create-charts-from-csv/
        function getDataPointsFromCSV(csv) {
            var dataPoints = csvLines = points = [];
            //csvLines = csv.split(/[\r?\n|\r|\n]+/);
            // http://stackoverflow.com/questions/15433188/r-n-r-n-what-is-the-difference-between-them
            csvLines = csv.split('\n');

            for (var i = 0; i < csvLines.length; i++)
                if (csvLines[i].length > 0) {
                    points = csvLines[i].split(",");
                    dataPoints.push({
                        y: parseFloat(points[1]),
                        //label: parseFloat(points[1]),
                        label: " ",
                        indexlabel: String(points[0])
                    });
                }
            return dataPoints;
        }

        // https://www.google.com/search?num=20&btnG=Search&q=jquery+get+csv+file
        // http://stackoverflow.com/questions/8185912/error-with-jquery-get-of-a-csv-file
        // http://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript
        var myVar = setInterval(myTimer, 1000);
        function myTimer() {
            $.get("webcam.csv", function(data) {
                var chart = new CanvasJS.Chart("chartContainer", {
                    title: {
                        text: "Top-5 Probability",
                        fontFamily: "Verdana",
                        fontColor: "Peru",
                        fontSize: 14

                    },
                    animationEnabled: false,
                    axisY: {
                        // https://canvasjs.com/docs/charts/chart-options/axisx/valueformatstring/
                        //valueFormatString:  "#0.000",
                        tickThickness: 0,
                        lineThickness: 0,
                        //lineThickness: 1,
                        valueFormatString: " ",
                        gridThickness: 1
                    },
                    axisX: {
                        // https://canvasjs.com/docs/charts/chart-options/axisx/valueformatstring/
                        //valueFormatString:  "#0.000",
                        tickThickness: 0,
                        lineThickness: 0,
                        labelFontSize: 12,
                        labelFontColor: "Peru"

                    },
                    data: [
                    {
                        // https://canvasjs.com/docs/charts/chart-options/axisx/valueformatstring/
                        //indexLabel: "{x}, {y}",
                        //indexLabel: "{label}, {indexlabel}, {y}",
                        indexLabel: "{y}: {indexlabel}",
                        //xValueFormatString: "#0.000",
                        yValueFormatString: "#0.000",

                        indexLabelFontSize: 14,
                        //toolTipContent: "<span style='\"'color: {color};'\"'>{indexLabel}</span><span style='\"'font-size: 20px; color:peru '\"'>{y}</span>",

                        indexLabelPlacement: "inside",          /* auto | inside | outside */
                        //indexLabelOrientation: "horizontal",
                        //indexLabelFontColor: "magenta",
                        indexLabelFontColor: "brown",
                        indexLabelFontWeight: 600,
                        indexLabelFontFamily: "Verdana",
                        color: "#62C9C3",
                        //color: "#abcabc",
                        //color: "#abc",
                        //color: "#cbacba",
                        type: "bar",
                        dataPoints: getDataPointsFromCSV(data),
                        //dataPoints: [
                        //{ y: 21, label: "21%", indexLabel: "Video" },
                        //{ y: 25, label: "25%", indexLabel: "Dining" },
                        //{ y: 33, label: "33%", indexLabel: "Entertainment" },
                        //{ y: 36, label: "36%", indexLabel: "News" },
                        //{ y: 42, label: "42%", indexLabel: "Music" },
                        //{ y: 49, label: "49%", indexLabel: "Social Networking" },
                        //{ y: 50, label: "50%", indexLabel: "Maps/ Search" },
                        //{ y: 55, label: "55%", indexLabel: "Weather" },
                        //{ y: 61, label: "61%", indexLabel: "Games" }
                        //]
                    }
                    ]
                });

                // https://canvasjs.com/forums/topic/order-by-value/
                // http://jsfiddle.net/canvasjs/11nrh8u1/
                function compareDataPointYAscend(dataPoint1, dataPoint2) {
                    return dataPoint1.y - dataPoint2.y;
                }
                //function compareDataPointYDescend(dataPoint1, dataPoint2) {
                    //return dataPoint2.y - dataPoint1.y;
                //}
                // ascending order:
                chart.options.data[0].dataPoints.sort(compareDataPointYAscend);
                // descending order:
                //chart.options.data[0].dataPoints.sort(compareDataPointYDescend);

                chart.render();

            }, "text");
        }
    }
</script>

<style>
    .container {
        width:968px;                  /* (320 + 4) + (640 + 4) */
        height: 282px;                  /* (280 + 2) */
        border: 2px solid blue;
        /* border: none; */
        padding: 2px;
        /* margin: 25px; */
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 25px;
    }

    .container > * {
        display: inline-block;
        vertical-align: top;
        /* border: 5px solid magenta; */       /* debug purposes */
        border: none;
    }
</style>

</HEAD>

<BODY>

<div class="container">
    <canvas id="webcam_grab" width="360" height="280"></canvas>
     
    <div id="chartContainer" style="height: 99%; width: 61.5%;"></div>
</div>

<!-- ============================================================================== -->
<!-- SCRIPTS: -->
<!-- ============================================================================== -->


<div>
<script type="text/JavaScript">
    var canvas = document.getElementById('webcam_grab');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.src = 'frame.jpg';

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
        var d = new Date();
        //context.fillStyle = 'cyan';
        //context.font = "16px serif";
        //context.fillText(d.toLocaleTimeString(), 220, 200);
        //context.font = "16px serif";
        //context.fillText("Live preview", 370, 320);

        var text = d.toLocaleDateString() + "  " + d.toLocaleTimeString();
        var maxWidth = 200;
        var x = imageObj.width-10-maxWidth;
        var y = imageObj.height-10;
        context.font = "20px serif";
        context.fillStyle = 'cyan';
        context.fillText(text, x, y, maxWidth);
    };
    imageObj.src = 'frame.jpg';

    var myVar = setInterval(myTimer, 500);
    function myTimer() {
        imageObj.src = 'frame.jpg?random='+new Date().getTime();
    }
</script>
</div>

</BODY>
</HTML>
    December 24, 2016 at 8:52 am in reply to: JQuery on local host not working (want to read local CSV file) #13832

    vstuart

    Sorry: this is the desired output; numerical labels (probablities) on the vertical axis:

    http://imgur.com/a/w5vil

Viewing 4 posts - 1 through 4 (of 4 total)