bubblechart.html

bubblechart.html

Y.BubbleSeries = Y.Base.create("bubbleSeries", Y.MarkerSeries, [], {
    _zDisplayName: null,
    
    _zDataChangeHandler: function(event)
    {
        var axesReady = this._updateAxisData();
        if(axesReady)
        {
            this.draw();
        }
    },
    
    drawSeries: function()
    {
        var markers = this.get("markers"),
            zData,
            zAxis = this.get("zAxis"),
            zKey = this.get("zKey"),
            i = 0,
            len,
            zScale = this.get("zScaleFactor"),
            marker,
            markerScale,
            translateX,
            translateY,
            markerStyles = this.get("styles").marker,
            markerWidth = markerStyles.width,
            markerHeight = markerStyles.height;
        //clear any previous transforms
        if(markers)
        {
            len = markers.length;
            for(; i < len; i = i + 1)
            {
                marker = markers[i];
                if(marker && marker instanceof Y.Shape)
                {
                    marker.set("transform", "matrix()");
                }
            }
        }
        Y.BubbleSeries.superclass.drawSeries.apply(this);
        if(zAxis)
        {
            markers = this.get("markers");
            console.log("we have z axis");
            zData = zAxis.getDataByKey(zKey);
            if(markers && zData)
            {
                i = 0;
                len = markers.length;
                for(; i < len; i = i + 1)
                {
                    marker = markers[i];
                    if(marker && marker instanceof Y.Shape)
                    {
                        scale = zData[i] / (zScale/10);
                        translateX = (markerWidth - (markerWidth * scale))/(2 * zScale);
                        translateY = (markerHeight - (markerHeight * scale))/(2 * zScale);
                        marker.set("transform", "scale(" + scale + ", " + scale + ") translate(" + translateX + ", " + translateY + ")");
                    }
                }
            }
        }
    }
}, {
    ATTRS: {
        zAxis: {},

        zKey: {
            setter: function(val)
            {
                return val.toString();
            }
        },
        
        zDisplayName: {
            getter: function()
            {
                return this._zDisplayName || this.get("zKey");
            },

            setter: function(val)
            {
                this._zDisplayName = val.toString();
                return val;
            }
        },
        
        zScaleFactor: {
            value: 100
        }
    }
});

    var myDataValues = [ 
        {month:"January", internetSales: 110000, percentOfRevenue: 25},
        {month:"February", internetSales: 333500, percentOfRevenue: 28},
        {month:"March", internetSales: 90500, percentOfRevenue: 15},
        {month:"April", internetSales: 255550, percentOfRevenue: 21},
        {month:"May", internetSales: 445000, percentOfRevenue: 33},
        {month:"June", internetSales: 580000, percentOfRevenue: 38}
    ];
   
    //Define axes and assign keys
    var myAxes = {
            percentage: {
                type:"numeric",
                position:"none",
                keys:["percentOfRevenue"],
                labelFormat: {
                    suffix:"%"
                }
            },
            sales: {
                type:"numeric",
                position:"left",
                keys:["internetSales"],
                labelFormat: {
                    prefix:"$",
                    thousandsSeparator:","
                }
            }
        },
        bubbleAxis = new Y.NumericAxis({
            position:"none",
            keys:["percentOfRevenue"],
            dataProvider: myDataValues
        }),
        //Define a series collection so that we can assign nice display names
        mySeries = [{
            type:Y.BubbleSeries, 
            yKey:"internetSales", 
            yDisplayName:"Internet Sales", 
            xDisplayName:"Month", 
            zAxis: bubbleAxis, 
            zKey: "percentOfRevenue", 
            zDisplayName: "Percent of Total Revenue"
        }, {
            visible:false, 
            yKey:"internetSales",
            xDisplayName:"Month"
        },
        {
            visible:false,
            yKey:"percentOfRevenue",
            xDisplayName:"Month"
        }],
        //need a custom tooltip method to account for the z data
        tooltipMethod = function(categoryItem, valueItem, index, series, seriesIndex) {
            var msg = document.createElement("div"),
                categoryValue = categoryItem.axis.get("labelFunction").apply(
                    this,
                    [categoryItem.value, categoryItem.axis.get("labelFormat")]
                ),
                seriesValue = valueItem.axis.get("labelFunction").apply(
                    this,
                    [valueItem.value, valueItem.axis.get("labelFormat")]
                ),
                //get information about the z data
                zAxis = series.get("zAxis"),
                zKey = series.get("zKey"),
                zName = series.get("zDisplayName"),
                zItemValue = zAxis.getKeyValueAt(zKey, index)
                zValue = zAxis.get("labelFunction").apply(
                    this,
                    [zItemValue, zAxis.get("labelFormat")]
                );
            msg.appendChild(document.createTextNode(categoryItem.displayName));
            msg.appendChild(document.createTextNode(": "));
            if(!Y.Lang.isObject(categoryValue))
            {
                categoryValue = document.createTextNode(categoryValue);
            }
            msg.appendChild(categoryValue);
            msg.appendChild(document.createElement("br"));
            msg.appendChild(document.createTextNode(valueItem.displayName));
            msg.appendChild(document.createTextNode(": "));
            if(!Y.Lang.isObject(seriesValue))
            {
                seriesValue = document.createTextNode(seriesValue);
            }
            msg.appendChild(seriesValue);
            //Add text about zData
            msg.appendChild(document.createElement("br"));
            msg.appendChild(document.createTextNode(zName));
            msg.appendChild(document.createTextNode(": "));
            if(!Y.Lang.isObject(zValue)) {
                zValue = document.createTextNode(zValue);
            }
            msg.appendChild(zValue);
            return msg;
        },
        //instantiate chart
        mychart = new Y.Chart({
            //set the custom tooltip method
            tooltip: {
                markerLabelFunction: tooltipMethod
            },
            dataProvider:myDataValues, 
            categoryKey:"month", 
            axes:myAxes, 
            seriesCollection:mySeries, 
            render:"#mychart"
        });