Home › Forums › Chart Support › JQuery on local host not working (want to read local CSV file)

JQuery on local host not working (want to read local CSV file)

Viewing 7 posts - 1 through 7 (of 7 total)
  • December 24, 2016 at 7:28 am #13828

    vstuart

    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://cdn.canvasjs.com/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 8 years, 9 months ago by vstuart.
    • This topic was modified 8 years, 9 months ago by vstuart. Reason: formatting
    • This topic was modified 8 years, 9 months ago by vstuart.
    December 24, 2016 at 8:52 am #13832

    vstuart

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

    http://imgur.com/a/w5vil

    December 26, 2016 at 3:21 pm #13835

    Vishwas R

    @vstuart,

    You can not request CSV files from another domain unless they support CORS. For security reasons, browsers restrict cross-origin requests. Please refer stackoverflow for more information on the same.

    —
    Vishwas R
    Team CanvasJS

    December 27, 2016 at 6:51 am #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 27, 2016 at 7:00 am #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 7:05 am #13840

    vstuart

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

    December 27, 2016 at 10:56 am #13844

    Vishwas R

    @vstuart,

    Sorry it’s not possible to position indexlabel to the far left/right, as of now. indexLabel can be placed either inside/outside by using indexLabelPlacement property.
    Indexlabels placed outside the bar

    —
    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.