The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> What is wrong with my HTML code? (Highchart)
marin65
post Aug 24 2016, 11:31 PM
Post #1





Group: Members
Posts: 1
Joined: 24-August 16
Member No.: 24,712
I wrote a python code to extract data from some text files then writing the data along with some html code and then save them to .html files. Each file should generate a Highchart extended heatmap. When I open the generated files they don't work, I see a blank html page. However, when I copied and pasted my html code into jsFiddle I was able to get a full working chart?
here is my HTML (data is shortened here)
CODE

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>??
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="height: 320px; width: 1000px; margin: 0 auto"></div>

<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv" style="display: none">Date,Time,Temperature
2013-1-1,6,0.0033
2013-1-1,7,0.0033
2013-1-1,8,0.1899
2013-1-1,9,0.2474
2013-1-1,10,0.2571
2013-1-1,11,0.2717
</pre><script>
$(function () {

    /**
     * This plugin extends Highcharts in two ways:
     * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares. Canvas
     *   outperforms SVG when it comes to thousands of single shapes.
     * - Add a K-D-tree to find the nearest point on mouse move. Since we no longer have SVG shapes
     *   to capture mouseovers, we need another way of detecting hover points for the tooltip.
     */
    (function (H) {
        var Series = H.Series,
            each = H.each;

        /**
         * Create a hidden canvas to draw the graph on. The contents is later copied over
         * to an SVG image element.
         */
        Series.prototype.getContext = function () {
            if (!this.canvas) {
                this.canvas = document.createElement('canvas');
                this.canvas.setAttribute('width', this.chart.chartWidth);
                this.canvas.setAttribute('height', this.chart.chartHeight);
                this.image = this.chart.renderer.image('', 0, 0, this.chart.chartWidth, this.chart.chartHeight).add(this.group);
                this.ctx = this.canvas.getContext('2d');
            }
            return this.ctx;
        };

        /**
         * Draw the canvas image inside an SVG image
         */
        Series.prototype.canvasToSVG = function () {
            this.image.attr({ href: this.canvas.toDataURL('image/png') });
        };

        /**
         * Wrap the drawPoints method to draw the points in canvas instead of the slower SVG,
         * that requires one shape each point.
         */
        H.wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function () {

            var ctx = this.getContext();

            if (ctx) {

                // draw the columns
                each(this.points, function (point) {
                    var plotY = point.plotY,
                        shapeArgs;

                    if (plotY !== undefined && !isNaN(plotY) && point.y !== null) {
                        shapeArgs = point.shapeArgs;

                        ctx.fillStyle = point.pointAttr[''].fill;
                        ctx.fillRect(shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height);
                    }
                });

                this.canvasToSVG();

            } else {
                this.chart.showLoading('Your browser doesn't support HTML5 canvas, <br>please use a modern browser');

                // Uncomment this to provide low-level (slow) support in oldIE. It will cause script errors on
                // charts with more than a few thousand points.
                // arguments[0].call(this);
            }
        });
        H.seriesTypes.heatmap.prototype.directTouch = false; // Use k-d-tree
    }(Highcharts));


    var start;
    $('#container').highcharts({
   credits: {
            enabled: false
        },

        data: {
            csv: document.getElementById('csv').innerHTML,
            parsed: function () {
                start = +new Date();
            }
        },

        chart: {
            type: 'heatmap',
            margin: [60, 10, 80, 50]
        },



        xAxis: {
            type: 'datetime',
            min: Date.UTC(2013, 0, 1),
            max: Date.UTC(2014, 0, 1),
            labels: {
                align: 'left',
                x: 5,
                y: 14,
                format: '{value:%B}' // long month
            },
            showLastLabel: false,
            tickLength: 16
        },

        yAxis: {

            labels: {
                format: '{value}:00'
            },
            minPadding: 0,
            maxPadding: 0,
            startOnTick: true,
            endOnTick: true,
            tickPositions: [6, 8,10, 12, 14, 16, 18],
            tickWidth: 1,
            min: 6,
            max: 18,
            reversed: false
        },

        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [0.5, '#fffbbc'],
                [0.9, '#c4463a'],
                [1, '#c4463a']
            ],
            min: .2,
            max: .6,
            startOnTick: false,
            endOnTick: false,

        },

        series: [{
            borderWidth: 0,
            nullColor: '#EFEFEF',
            colsize: 24 * 36e5, // one day

            turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
        }]

    });
    console.log('Rendered in ' + (new Date() - start) + ' ms'); // eslint-disable-line no-console

});
</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 25 2016, 06:51 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
I move this to the Client-side Scripting forum.

There's hardly any HTML there (add a Doctype and a HEAD section with a TITLE element), it's mostly jQuery that seems to generate an HTML5 CANVAS element. Check your browser's error console for scripting errors.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
trippyeggos
post Aug 30 2016, 07:05 PM
Post #3





Group: Members
Posts: 2
Joined: 30-August 16
Member No.: 24,763
QUOTE(Christian J @ Aug 25 2016, 07:51 AM) *

I move this to the Client-side Scripting forum.

There's hardly any HTML there (add a Doctype and a HEAD section with a TITLE element), it's mostly jQuery that seems to generate an HTML5 CANVAS element. Check your browser's error console for scripting errors.


Haha I was going to say the same thing. The only HTML I see are the HTML tags. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 01:47 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC