Home forums Using CanvasJS JQuery on local host not working (want to read local CSV file)

This topic contains 6 replies, has 2 voices, and was last updated by  Vishwas R 9 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #13828

    vstuart
    Member

    I am working on my home computer (Arch Linux). I simply want to load a local CSV file into this chart,

    canvasjs.com/example/gallery/bar/mobile_usage/

    I am running a Python script that reloads my data file, webcam.csv, with the following data (overwritten as the script loops):

    notebook,0.30421
    mouse,0.162229
    laptop,0.128351
    computer_keyboard,0.0672938
    toy_poodle,0.0579078

    I understand that CanvasJS cannot load CSV data directly, and must use JQuery. I read

    canvasjs.com/docs/charts/how-to/create-charts-from-csv/

    but it did not help, and when I run the Try_It-Yourself example from that page in my local browser (Firefox) it won’t run:

    file:///home/victoria/projects/computer_vision/inception/keras/wc4.html

    I also fired up a local web server (node.js ‘s http-server), I again get a blank page,

    http://127.0.0.1:8080/wc4.html

    I also tried some examples people posted on JSFiddle, etc. and those also would not run, locally. E.g., this one:

    http://jsfiddle.net/canvasjs/80u4prso/

    So, my questions:

    1. How exactly (explicitly) can I load a local csv file (webcam.csv) into that chart?

    canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/bar/mobile_usage/

    2. Do I need to serve my local web/html page from a local webserver (e.g.: localhost:8080)?

    3. Re: that CanvasJS dynamic bar chart, will it automatically reload/refresh as my Python script overwrites my webcam.csv file? If not, how can I accomplish this?

    Sorry for the questions: this (JS) is all new to me.

    I want something that looks like this (dummy example: fake data!):

    http://imgur.com/a/VO7hx

    but with better formatting on the chart labels.

    Thank you! :-)

    ========================================================

    My presently broken script:

    
    <!doctype html>
    <HTML lang="en">
    
    <HEAD>
    
    <meta charset="utf-8">
    <TITLE>Victoria’s webcam demo</TITLE>
    <meta name="description" content="">
    
    <link rel="stylesheet" href="css/main.css">
    
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    window.onload = function () {
    
    // -----------------------------------------------------------------------
    //https://canvasjs.com/docs/charts/how-to/create-charts-from-csv/
    var dataPoints = [];
    
    function getDataPointsFromCSV(csv) {
        var dataPoints = csvLines = points = [];
        csvLines = csv.split(/[\r?\n|\r|\n]+/);
    
        for (var i = 0; i < csvLines.length; i++)
            if (csvLines[i].length > 0) {
                points = csvLines[i].split(",");
                dataPoints.push({
                    x: parseFloat(points[0]),
                    y: parseFloat(points[1])
            });
        }
        return dataPoints;
    }
    // -----------------------------------------------------------------------
    
    $.get("webcam.csv", function(data) {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Top-5 Probability",
                fontFamily: "Verdana",
                fontColor: "Peru",
                fontSize: 14
    
            },
            animationEnabled: true,
            axisY: {
                tickThickness: 0,
                lineThickness: 0,
                valueFormatString: " ",
                gridThickness: 0
            },
            axisX: {
                tickThickness: 0,
                lineThickness: 0,
                labelFontSize: 22,
                labelFontColor: "Peru"
    
            },
            data: [
            {
                indexLabelFontSize: 22,
                toolTipContent: "<span style='\"'color: {color};'\"'>{indexLabel}</span><span style='\"'font-size: 20px; color:peru '\"'>{y}</span>",
    
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                indexLabelFontWeight: 600,
                indexLabelFontFamily: "Verdana",
                color: "#62C9C3",
                type: "bar",
                //dataPoints : dataPoints
                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: 61, label: "61%", indexLabel: "Games" }
                //]
            }
            ]
        });
    
        chart.render();
    });
    }
    </script>
    
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></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>
    
    <p>
    Hello Victoria! 😀
    
    
    <div class="container">
    <canvas id="webcam_grab" width="360" height="280"></canvas>
     
    <div id="chartContainer" style="height: 280px; width: 590px">
    </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>
    
    • This topic was modified 9 months, 3 weeks ago by  vstuart.
    • This topic was modified 9 months, 3 weeks ago by  vstuart. Reason: formatting
    • This topic was modified 9 months, 3 weeks ago by  vstuart.
    #13832

    vstuart
    Member

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

    http://imgur.com/a/w5vil

    #13835

    Vishwas R
    Keymaster

    @vstuart,

    For security reasons, browsers restrict cross-origin requests. Please refer stackOverflow for more information.

    #13838

    vstuart
    Member

    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>
    
    
    #13839

    vstuart
    Member

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

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

    #13840

    vstuart
    Member

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

    #13844

    Vishwas R
    Keymaster

    @vstuart,

    Sorry this feature is not available, as of now. indexLabel can be placed either outside/inside by using indexLabelPlacement.

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

You must be logged in to reply to this topic.