CODEWITHSUNDEEP
highcharts
drmrbrewer
drmrbrewer

Reputation: 13099

Highcharts: generate blank chart

My application takes in dynamic data and generates a chart, with an option to display a message overlayed on top using chart.renderer.text().

Sometimes the dynamic request for data is malformed, and the resultant data unreliable, so in that case I'd like to generate a completely blank chart (with custom background colour) of the same width and height as originally requested (that part of the request is usually OK), and just with a message overlay as described above to display a message to the user.

What is the easiest way of doing that? I want the blank chart to be literally that... just a solid colour with no axes or anything, and no message about "no data to display" which I've seen on a couple of examples I found when searching for an answer. And on top of the blank background (with the user-defined width and height) my message overlay.

Upvotes: 0

Views: 1216

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

It would be the easiest create... empty chart. Then in load event add necessary text to the chart. Something like this: http://jsfiddle.net/zkj36o7e/1/

$('#container').highcharts({
    chart: {
        events: {
            load: function () {
                var text = this.renderer.text("Malformed data").attr({
                    'text-anchor': "middle",                 // SVG's text-align ;)
                    stroke: "black",                         // color
                    opacity: 0,                              // smooth animation - part I  
                    x: this.plotWidth / 2 + this.plotLeft    // x-center of the plot
                }).add(),
                    bbox = text.getBBox();                   // get bounding box of the created text 

                text.attr({
                    y: this.plotHeight / 2 - bbox.height / 2 // y-position - half of the text's height
                }).animate({
                    opacity: 1                               // smooth animation - part II
                });
            }
        }
    }
});

Upvotes: 1

Related Questions