Dual plotbands on bubble chart

7 posts, 1 answers
  1. Philip Senechal
    Philip Senechal avatar
    152 posts
    Member since:
    Apr 2008

    Posted 19 Jul 2012 Link to this post

    I would like to create a plotband on both the x-axis and y-axis on a bubble chart. The plotband seems to work fine on the x-axis, but the chart will not accept on the y-axis...regardless if there's one on the x-axis or not.

    Is it possible to put a plotband on the y-axis with a bubble chart and how would I go about doing it? I'm on v.2012.2.710
    Thanks
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Jul 2012 Link to this post

    Hi Philip,

    You could set a plotbands to the both axes via the plotBands configuration option. Like here:
    $("#chart").kendoChart({
      //...
      yAxis: {
        //...
        plotBands: [{
            from: 30000,
            to: 60000,
            color: "red"
        }]
      }
    });

    For convenience I attached a small example.
     
    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Philip Senechal
    Philip Senechal avatar
    152 posts
    Member since:
    Apr 2008

    Posted 24 Jul 2012 Link to this post

    Thank you Iliana,

    I had copied some of the code from the demo and had
    line: {
        width: 0
    }

    specified on my y-axis so that the actual axis line did not appear. Removing this line from my code caused the plotband to appear. I don't really need to hide the y-axis line, so this is fine. I did not know that the 2 settings would affect each other like that, but hopefully if someone else comes across this, they will have this post to explain it.

    Thanks again
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Jul 2012 Link to this post

    Hello Philip,

    Our developers have recently resolved this issue and the fix is available with the latest internal build. I would suggest to open a support ticket (since we can't send internal builds in public forum) where we will send you one. 

    On a side note, a possible workaround is to set width of the line to 0.1. Like here:
    $("#chart").kendoChart({
     //...
     yAxis: {
       plotBands: [{
         color: "red",
         from: 30000,
         to: 60000
       }],
       line: {
         width: 0.1
       }
     }
    });

     

    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 Link to this post

         $("#linechart").kendoChart({
                            title: {
                                text: "A"
                            },
                            series: [{
    name:"1",
                                type: "line",
                                data: [0.091695172938046,0.053654440413812,0.05836312527029,0.04127042184833,0.033701775147929,0.027753387353879,0.010377465630604]                        },{
    name:"2",
                                type: "line",
                                data: [0.066955530216648,0.074112589009808,0.16211186391812,0.099937088514996,0.086447337278107,0.040703706163656,0.0060714285714286]                        }],
                            categoryAxis: {
                                baseUnit: "weeks",
                                categories: ["2012-11-11","2012-11-12","2012-11-13","2012-11-14","2012-11-15","2012-11-16","2012-11-17"]                        }
                        });
    how can put different plotband to  1 and 2 ?
  6. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 Link to this post

         how can i put diffreent band to different series ?
    series: [{
    name:"A",
    type: "line",
    data: [0.091695172938046,0.053654440413812,0.05836312527029,0.04127042184833,0.033701775147929,0.027753387353879,0.010377465630604] },{
    name:"B",
    type: "line",
    data: [0.066955530216648,0.074112589009808,0.16211186391812,0.099937088514996,0.086447337278107,0.040703706163656,0.0060714285714286] }]
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Jun 2013 Link to this post

    Hi Osman,

    I am not quite sure if I understand your requirement correctly - the plotBands are related to the Chart's axes, not to the Chart's series. Could you please elaborate a bit more on the exact outcome you are expecting (an image which illustrates it will be greatly appreciated)? Thank you in advance. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top