logo

Warning: The forum is now for consultation only. Please use GitHub Discussions to post any questions or comments.


Welcome Guest ! To enable all features please Login or Register.

Notification

Icon
Error

Options
Go to last post Go to first unread
Shanmugm  
#1 Posted : Tuesday, August 14, 2018 11:18:09 AM(UTC)
Shanmugm

Rank: Newbie

Groups: Registered
Joined: 8/14/2018(UTC)
Posts: 1
India
Location: Tamil Nadu

I need to trim/shorthand the y axis title label value based on the height of chart rendered with tooltip on hover. Please suggest the work around/fixes for that case?

Code Snippet:

Code:
var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 75
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                dispatch: {
                        elementMousemove: function(e) { console.log("mouse move"); }
                },
                xAxis: {
                    axisLabel: 'Time (ms)',
                    tickFormat: function(d) {
                      return d3.format('.02f')(d/8);
                    }
                },
                yAxis: {
                    axisLabel: 'Voltage (v) Axis Metric name not shown properly _Voltage (v) Axis Metric name not shown properly',
                    showMaxMin: true,
                    length:10,
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    }
                },
                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                },
                pointSize: 30, 
                interactiveLayer: { 
                  //if useInteractiveGuideline is true, the customized tooltip.
                  //contentGenerator function must be put in 'interactiveLayer'
                  tooltip: {
                    contentGenerator: function (e) {
                      var pId = e.value;
                      var seriesCount = $scope.data.length;
                      var header = 
                        "<thead>" + 
                          "<tr>" +
                            "<td class='key'><strong>" + (pId/8).toFixed(2) + "(customized)</strong></td>" +
                          "</tr>" + 
                        "</thead>";


                      var rows = "";
                      for (var i=0; i<seriesCount; i++) {
                        var d = $scope.data[i];
                        rows +=
                          "<tr>" +
                            "<td class='legend-color-guide'><div style='background-color: " + d.color + ";'></div></td>" +
                            "<td class='key'>" + d.key + "</td>" +
                            "<td class='x-value'><strong>" + (d.values?d.values[pId].y.toFixed(2):0) + "</strong></td>" +
                          "</tr>"
                      }

                      return "<table>" +
                          header +
                          "<tbody>" + 
                            rows + 
                          "</tbody>" +
                        "</table>";
                    } 
                  }
                }
            },
            title: {
                enable: true,
                text: 'Title for Line Chart'
            },
            subtitle: {
                enable: true,
                text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.',
                css: {
                    'text-align': 'center',
                    'margin': '10px 13px 0px 7px'
                }
            },
            caption: {
                enable: true,
                html: '<b>Figure 1.</b> Caption of This Chart Put Here.',
                css: {
                    'text-align': 'justify',
                    'margin': '10px 13px 0px 7px'
                }
            }
        };

        $scope.data = sinAndCos();

        setTimeout(function() {
           console.log("Inside the timeout");
        }, 500);

        /*Random Data Generator */
        function sinAndCos() {
            var sin = [],sin2 = [],
                cos = [];

            //Data is represented as an array of {x,y} pairs.
            for (var i = 0; i < 100; i++) {
              var d = {x: i, y: Math.sin(i/10)};
              if (i % 5 === 0) {
                d.shape = "cross";
              } else {
                d.shape = "diamond";
              }
              sin.push(d);
              sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
              cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
            }

            //Line chart data should be sent as an array of series objects.
            return [
                {
                    values: sin,      //values - represents the array of {x,y} data points
                    key: 'Sine Wave', //key  - the name of the series.
                    color: '#ff7f0e'  //color - optional: choose your own line color.
                },
                {
                    values: cos,
                    key: 'Cosine Wave',
                    color: '#2ca02c'
                },
                {
                    values: sin2,
                    key: 'Another sine wave',
                    color: '#7777ff',
                    area: false      //area - set to true if you want this line to turn into a filled area chart.
                }
            ];
        }
});


Here, I have specified the long yAxis label. But need to shrink/trim the label based on the chart rendered height & re-size case also.

Screenshot for more info:

Actual Issue UserPostedImage
Expected UserPostedImage

Thanks Advance

Edited by user Tuesday, August 14, 2018 11:21:35 AM(UTC)  | Reason: Not specified

Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.