Hitachi Vantara Pentaho Community Forums
Results 1 to 4 of 4

Thread: Protovis code, dialchart attempt

  1. #1
    Join Date
    Mar 2011
    Posts
    140

    Arrow Protovis code, dialchart attempt

    Hello everyone,

    So I'm messing around with protovis and was trying to create a dialChart.
    I'm stuck on the part where I should create small lines/markers on the innerRadius of the first Wedge.

    Any suggestions ?


    This is what I have so far:

    Code:
            var   r_width   = 400,
                  r_height  = 400,
                  r_color   = "#white",
                  gap = 20,
                  rs  = [0, 0.5, 1, 2, 6, 10];
    
            var vis = new pv.Panel()
                .width(r_width)
                .height(r_height)
                .fillStyle(r_color);
            
            var c_width   = 200,
                c_height  = 200;
            
            var dialChart = vis.add(pv.Wedge)
                  .data(pv.normalize([1])) // say hundered percent for nice round chart ?!
                  .width(c_width)
                  .height(c_height)
                  .left(100)
                  .top(100)
                  .outerRadius(70)
                  .innerRadius(60)
                  .angle(function(d) d * 2 * Math.PI)
                  .fillStyle("#aaa")
                  .strokeStyle("black")
                .add(pv.Wedge)
                  .data(pv.normalize([1, 1, 1]))
                  .width(50)
                  .height(50)
                  .outerRadius(20)
                  .angle(function(d) d * 2 * Math.PI)
                  .fillStyle("#ccc")
                  .strokeStyle("black")  
                .anchor("middle").add(pv.Label)
                  .text("HELLO WORLD")
                  .textAngle(0) // variable rotation
                  
            vis.render();

  2. #2
    Join Date
    Mar 2011
    Posts
    140

    Lightbulb

    So, here is an update. Now you see an indicator and the current value.

    Still don't quite know how to get those lines with the proper value. I think it should be done with the shape "tick".

    Any suggestions on this final part ?


    Code:
            var   r_width   = 400,
                  r_height  = 400,
                  r_color   = "#white",
                  gap = 20,
                  rs  = [0, 0.5, 1, 2, 6, 10];
    
            var vis = new pv.Panel()
                .width(r_width)
                .height(r_height)
                .fillStyle(r_color);
            
            var c_width   = 200,
                c_height  = 200;
            
            var dialChart = vis.add(pv.Wedge)
                  .data(pv.normalize([1])) // say hundered percent for nice round chart ?!
                  .width(c_width)
                  .height(c_height)
                  .left(100)
                  .top(100)
                  .outerRadius(70)
                  .innerRadius(60)
                  .angle(function(d) d * 2 * Math.PI)
                  .fillStyle("#aaa")
                  .strokeStyle("black")
                  
                .add(pv.Wedge)
                  .data(pv.normalize([1, 1, 1]))
                  .width(50)
                  .height(50)
                  .outerRadius(20)
                  .angle(function(d) d * 2 * Math.PI)
                  .fillStyle("#ccc")
                  .strokeStyle("black")  
                .add(pv.Dot)
                  .shape("tick")
                  .size(48)
                  .angle(0.2)
                  .fillStyle(pv.Colors.category10().by(pv.index))   
                  .lineWidth(2)
                .anchor("bottom").add(pv.Label)
                  .text("90")
                  .top(100)
                  
            vis.render();

  3. #3

    Default

    hello dear friend,


    you've managed to finish this object dial?

  4. #4
    Join Date
    Mar 2012
    Posts
    645

    Default

    Don't you just need to vary the angle of the dot/tick mark according to the data?
    Then, the labels are a bit more complicated, as you'll have to vary textAlign and textBaseline according to the angle as well (see idea here).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.