Using Scatter Graph

Welcome to Toppersarena.com Forums Programming Blogs Using Scatter Graph

This topic contains 0 replies, has 0 voices, and was last updated by Admin admin 1 year, 4 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #3028
    Admin
    admin
    Keymaster

    Box.Application.addModule(‘module-viewScatterGraph’, function(context) {
    ‘use strict’;
    // private methods here
    var $;
    var dataObj = {};
    function showScatterGraph(scatterWrapper)
    {

    var dataToPlot = [];
    $ = context.getGlobal(‘jQuery’);
    $.each(scatterWrapper.series,function( index, oneSeries ) {
    // alert(oneCoordinate.label+”:”+ oneCoordinate.x + “: ” + oneCoordinate.y + “:” + oneCoordinate.z );
    var oneSeriesForPlotting = {};
    oneSeriesForPlotting.key = oneSeries.seriesName;
    oneSeriesForPlotting.values = [];
    oneSeriesForPlotting.color = oneSeries.seriesColor;
    $.each(oneSeries.dataPoints, function( index2, oneCoordinate ) {
    oneSeriesForPlotting.values.push({
    x: oneCoordinate.x,
    y: oneCoordinate.y,
    size: oneCoordinate.z,
    shape: ‘circle’,
    label: oneCoordinate.label
    });
    });
    dataToPlot.push(oneSeriesForPlotting);
    });

    $(“.graphTitle”).text(scatterWrapper.graphName);
    nv.addGraph(function() {
    var chart = nv.models.scatterChart()
    .showDistX(false)
    .showDistY(false)
    .color(function (d, i) {
    var colors = dataToPlot.color;
    return colors;
    });
    //.color(d3.scale.category10().range());

    //Configure how the tooltip looks.
    chart.tooltip.contentGenerator(function(obj) {
    return ‘

    ‘ + obj.point.label + ‘

    ‘;
    });

    // chart.showDistY(true);
    // chart.showXAxis(true);
    // chart.pointSize(40);
    chart.tooltip.enabled();
    chart.forceY([0,1]);
    chart.forceX([0,1]);

    chart.xAxis.tickFormat(d3.format(‘.02f’));
    chart.yAxis.tickFormat(d3.format(‘.02f’));

    chart.xAxis.axisLabel(scatterWrapper.xAxisLabel);
    chart.yAxis.axisLabel(scatterWrapper.yAxisLabel);

    d3.select(‘#chart svg’)
    // .datum(randData(4,20))
    .datum(dataToPlot)
    .transition().duration(1000)
    .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
    });
    }
    function showLoading(toShow) {
    if (toShow) {
    $(“.scatterPlot .overlay”).fadeIn(“slow”);
    } else {
    $(“.scatterPlot .overlay”).fadeOut(“slow”);
    }
    }

    return{
    behaviors: ,

    init : function(){
    // retrieve a reference to jQuery
    $ = context.getGlobal(‘jQuery’);
    var _this = this;
    _this._initPageBindings();
    function randData(groups, points) {
    var data = [],
    shapes = ,
    random = d3.random.normal();

    for (var i = 0; i < groups; i++) {
    data.push({
    key: ‘Group ‘ + i,
    values: []
    });

    for (var j = 0; j < points; j++) {
    data
    .values.push({
    x: random()
    , y: Math.random()
    , size: Math.random()
    , shape: shapes[j % 6] //Configure the shape of each scatter point.
    });
    }
    }
    return data;
    }
    } ,
    _initPageBindings: function(){
    var _this = this;
    var ajaxFormOptions = {
    beforeSubmit : function(){
    showLoading(true);
    },
    success: function(scatterWrapper){
    showScatterGraph(scatterWrapper);
    showLoading(false);
    }
    }
    $(“#scatterGraphControl”).ajaxForm(ajaxFormOptions);

    }
    }
    });

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.