Home Analytics Designing reports
The community of Analytics developers are invited to follow and participate in the developer network.
OpenText technical experts collaborate with supported customers and partners in the Magellan product area.

Chart Scripting: Pie Chart Series Color

<p>My  question is, how can i color a SERIES in a pie chart dynamically, depending on the Value of the Series.</p><p> </p><p>The trick is, i just want to color the first series.</p><p> </p><p>I can identify the series with</p><p> </p><p>in the beforeDrawSeries function</p><p>series.getSeriesIdentifier()</p><p> </p><p>i wanted to do something like:</p><p> </p><p>function beforeDrawSeries( series, isr, icsc )
{ if series.getSeriesIdentifier()="Series 1" {</p><p> </p><p>and then color the slice depending on the value.</p><p>I tryed it in onRender.</p><p> </p><p>any help would be much appreciated.</p><p> </p><p> </p><p>Matthias</p>

Comments

  • kclarkkclark BIRT Guru EM
    <p>Take a look at this <a data-ipb='nomediaparse' href='http://www.birt-exchange.org/devshare/_/designing-birt-reports/1231-custom-chart-colors-based-on-data-set-values'>devshare</a>, it should contain an example that shows how to do this.</p>

    Kristopher Clark

    Actuate Corporation – The BIRT Company™

    http://www.actuate.com | http://birtondemand.com

     

    My Blog

    Twitter

    LinkedIn
    Facebook
     

  • <p>Thank you very much. I think i have to explain in more detail what i am after.</p><p> </p><p>This works fine:</p><pre class="_prettyXprint">function beforeDrawDataPoint( dph, fill, icsc ){var sValue = dph.getSeriesDisplayValue(); if ( sValue < 0.35)   {   fill.set(215, 25, 28);   }   else if ((sValue >= 0.35) & (sValue < 0.6))   {   fill.set(253, 174, 97);   }   else if ((sValue >= 0.6) & (sValue < 0.85))   {   fill.set(166, 217, 106);   }   else   {   fill.set(26, 150, 65);   }  }</pre><p>But what i wanted is to identify the series with</p><pre class="_prettyXprint">function beforeDrawSeries( series, isr, icsc ){}</pre><p>The problem is, that i can't get to the value and the fil in the beforeDrawSeries function.</p><p> </p><p>I want to color theblue arc in the attached image depending on his value. the white part is just the maximum minus the actual value and i don't want this part to be shown or colored depending on the value.</p><p> </p><p> </p><p> </p><p> </p><p> </p>
  • kclarkkclark BIRT Guru EM
    <p>Can you reattach the image?</p>

    Kristopher Clark

    Actuate Corporation – The BIRT Company™

    http://www.actuate.com | http://birtondemand.com

     

    My Blog

    Twitter

    LinkedIn
    Facebook
     

  • <p>Good info</p>
  • <p>How do I get same script for HTML5 chart, want to dynamically change pie colors based on data value script up works for PNG. using birt version 4.2.3</p>
    <p>build id v20131216.</p>
  • <p>For HTML5, you want to add code in the <strong>beforeDrawDataPoint</strong> event.  It's <span style="font-family:'courier new', courier, monospace;">point.name</span> for each slice's name.  For bar charts, it's <span style="font-family:'courier new', courier, monospace;">point.category</span>.</p>
    <p> </p>
    <p> </p>
    <p>You can always add a debugger; statement in <strong>beforeDrawDataPoint</strong> if you want to see what other point.* values are available from your browser's DevTools.</p>
    <pre class="_prettyXprint">
    beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)
    {
    // Pie Chart
    if (point.name == 'In Process')
        pointOptions.color = "rgb(71,167,7)"; // You can also use hex or color name: "#00ff00" or "green";
        

    // Bar Chart
    //
    //if (point.category == 'In Process')
    //    pointOptions.color = "rgb(71,167,7)";
    //

    },</pre>

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

  • <p>Thanks Clement for you reply. What I want is based on a seriesvalue say the series below 50 then red, between 51 and 75 then orange and above 75 then green</p>
  • <p>Instead of the debugger; in the Designer, the code autocomplete will also provide you with variable/values you can use.  (For example, type in "point." and you'll see what's available.</p>
    <p> </p>
    <p>For your requirements, a starting point in <strong>beforeDrawDataPoint</strong> would be like...</p>
    <pre class="_prettyXprint">
    if (point.y < 50)
        pointOptions.color = "red";</pre>

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

  • <p>Thanks Clement</p>
  • edited June 23, 2017
    <p>hello again,</p>
    <p> </p>
    <p> </p>
    <blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="144115" data-time="1464819927">
    <div>
    <p> </p>
    <p>Instead of the debugger; in the Designer, the code autocomplete will also provide you with variable/values you can use.  (For example, type in "point." and you'll see what's available.</p>
    <p> </p>
    <p>For your requirements, a starting point in <strong>beforeDrawDataPoint</strong> would be like...</p>
    <pre class="_prettyXprint">
    if (point.y < 50)
        pointOptions.color = "red";</pre>
    </div>
    </blockquote>
    <p> </p>
    <p>I tried it for my HTML5 line chart, but it's not working, do you know the reasons ?</p>
    <p> </p>
    <p>I also tested things like :</p>
    <p> </p>
    <div>- point.series.data.color = "green";</div>
    <div>- point.series[0].color = "green";</div>
    <div>- pointOptions.color = "blue";</div>
    <div>- color = '#0033FF'</div>
    <div> </div>
    <div>and no one is working.</div>
    <div> </div>
    <div><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">Thank you very much for your help.</span></div>
  • <p>Please attach a sample of your sample report.  Also, did you check in the browser's DevTools via debugger; to see what options are available for your chart?</p>

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

  • <p><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">Please see a sample of my report with the source.</span></p>
    <p> </p>
    <p><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">No, i'm on chrome, and i don't really know what i have to looking for and how to find the options </span>which <span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">are avalaible.. :/</span></p>
    <p> </p>
    <p><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">Thank you.</span></p>
  • <p>DevTools with the debugger; is a useful tool.  For example:</p>
    <p> </p>
    <p>1. Add the following statement in any (client side) event like:</p>
    <pre class="_prettyXprint _lang-">
    beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex, seriesOptions, series )
    {
    debugger;
    },
    </pre>
    <p>2. Run and view your report.  You can let it load, or immediately after seeing the browser window before the report loads, press F12 to load the DevTools of the browser.  If you let it load, press F12, and then F5 to reload.</p>
    <p> </p>
    <p>When the code hits the "debugger;" statement, it will stop.  From there, you can use the tool and console to explore the (JavaScript) variables that are available.</p>
    <p> </p>
    <p> </p>
    <p>To change the color in the scatter, use fillColor:</p>
    <pre class="_prettyXprint _lang-">
    beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex, seriesOptions, series )
    {
    if (point.y < 85)
    pointOptions.fillColor = "green";
    },

    </pre>

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

  • edited June 27, 2017
    <p>1. Ok thank you, i'll test it :)</p>
    <p> </p>
    <p>2. wow, with "fillColor"  ok.. thank you !!</p>
    <p>But was it possible to find it alone ? :/</p>
    <p>I mean i checked again in the reference (api.highcharts) , and i didn't find the "fillColor"</p>
    <p>nor even when i wrote "<span>pointOptions." , "fillColor" didn't show up in the pop up of birt   :o</span></p>
    <p><span>So i mean, how do you find the solution ?</span></p>
    <p><span>I ask this, for being able to find my solution alone and stop bothering you :/</span></p>
    <p> </p>
    <p><span>Otherwise, thank you really much for your help !! </span></p>
  • Suppose i have 5 categories in pie chart and each category has unique colors at runtime. How can i set these unique colors to category using script? color value will be there in the data set.

  • Since the link was broken, here's the devshare post that was referenced above: https://forums.opentext.com/forums/discussion/60845/custom-chart-colors-based-on-data-set-values

    If the color is defined in a different column, one way you can get access to that is concatenate the category and color to a single string in a computed column and use that as your category. Then parse the color from the data point value when setting the color. You would need adjustments elsewhere to trim out the color from category labels.

    Chad Montgomery
    Sr. Technical Support Specialist
    OpenText
  • @Chad Montgomery Thanks for your suggestion and it worked fine for me except one new prob. So After splitting color values from series name and reassigning series name to label, there is extra space in legend items which was allocated to the string which had color values in it. Because of that legend items are extending to the next line and it is looking weird now. DO you have any suggestion for this? If i get solution for this i can proceed and use it.

  • Could you attach your report or an example?

    Chad Montgomery
    Sr. Technical Support Specialist
    OpenText
Sign In or Register to comment.