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

This topic has 6 replies, 2 voices, and was last updated 7 years, 10 months ago by Vishwas R.

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

Tagged: Bar Chart, csv data file, jquery, localhost

December 24, 2016 at 7:28 am #13828

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 7 years, 11 months ago by vstuart.
This topic was modified 7 years, 11 months ago by vstuart. Reason: formatting
This topic was modified 7 years, 11 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.

—
Vishwas R
Team CanvasJS

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

Tagged: Bar Chart, csv data file, jquery, localhost

You must be logged in to reply to this topic.

FORUMS

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

Quick Links

Server Side Technologies

Front Side Technologies

Contact

FORUMS

Login to Ask a Question or Reply

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