Chart Y-Series mapping

hatraatrin · March 25

Hi all,
my Y series value in the chart is flaot and it presents 6,7,8,9
is there a way without adding new string column or changing the dataset to map thes values to show
6 = "ok", 7 = "normal", 8 = "right", 8 = "Bad" with script or in the chart format tab? and if so how ?

thanks

jfranken · March 26

If you are talking about the dataLabels, you can use code like this:

beforeGeneration: function(options)
{
options.series[0].dataLabels.formatter = function () {
if (this.y == 6) return "ok"
}
},

hatraatrin · March 27

HI ,
thanks that would be Y label,

jfranken · March 28

beforeGeneration: function(options)
{
    options.yAxis[0].labels.formatter = function () {
        switch(this.value) {
          case 6:
             return "ok";
          case 7:
             return "normal";
          case 8:
             return "right";
          case 9:
             return "bad";
          default:
             return "other";
          } 
       }
},

hatraatrin · April 3

perfect thanks
and how to one continue this code if you want to have custom color for seines is the chart, ie if xx series "today" make is red and if xx series "tomorrow " make it green ?

jfranken · April 3

In beforeDrawSeries event:

if (seriesIndex == 0) {seriesOptions.color = "#EE0000";}   // red
if (seriesIndex == 1) {seriesOptions.color = "#00EE00";}  // green

If you want the condition based on the name, replace seriesIndex with seriesOptions.name.

hatraatrin · April 3

Thanks ,
I have already used this code you sent in chart Script beforeGeneration: function(options)
{
options.yAxis[0].labels.formatter = function () {
switch(this.value) {
case 6:
return "ok";
case 7:
return "normal";
case 8:
return "right";
case 9:
return "bad";
default:
return "other";
}
}
},

where do I add the new code ??

jfranken · April 3

At the top of the Script editor is a list box with the text "New Event Function". Choose "beforeDrawSeries". A new function will be added to the script area beneath the beforeGeneration function. Put the code in the beforeDrawSeries function. It will look like:

/**
 * Called before series instance is rendered.
 *
 * @param series
 *            series instance
 * @param  seriesOptions
 *             series options
 * @param  chart
 *             chart instance
 * @param  seriesIndex
 *             series index
 */
beforeDrawSeries: function(series, seriesOptions, chart, seriesIndex)
{   
    if (seriesIndex == 0) {seriesOptions.color = "#EE0000";} 
    if (seriesIndex == 1) {seriesOptions.color = "#00EE00";} 
},

hatraatrin · April 3

Thanks Jeff for your help , I have tried it but it return all into one color, isnt not possible to base the if on row ? ie if row[****] == "today" { color = yellow }
if row[****] == "tomorrow" { = green}

jfranken · April 3

I do not understand the question. Could you please post a screenshot? For example, show the current chart and circle the things that need to change color. Also, will they always be that color, or will they change. If they change, what is the criteria (how do you know they need to change)?

hatraatrin · April 3

Hey Jeff,
screen shot attached
on this chart for y I have 2 series, series1 the bubble ( value for the bubble ) and series 2 the seq
and x series give me the 5 levels great, good, bad, very bad and failed
the seq presents the number of bubble on the chart and
I want to be able to apply color to the bubble based on series Seq if row[seq] is 1to 3 make it yellow and <4 make it green

jfranken · April 3

Thanks for providing the screenshot. If I understand correctly, the following code should work. Place this code in beforeGeneration and modify it to meet your requirements:

    var dot = 0;
    for (i=0; i < options.series[0].data.length; i++) {
       dot = options.series[0].data[i].y
       if (dot <= 3) {options.series[0].data[i] = {y:dot, fillColor:'#FBFB22'}};
    }

This example sets the dot color to yellow for the dots in series[0] (the first series defined in the chart editor) if the dot value is 3 or less. To modify dots in the second series, loop through the series[1] data points.

hatraatrin · April 4

Thanks Jeff,
I have applied it in beforeGeneration on the report however the logic doesn't change the color of the bubbles on the chart,

jfranken · April 4

Can you create a report with test data and post it to this thread? I would like to run the report and do some debugging.

hatraatrin · April 4

hi sure, please see attached, series1 one bubble in yellow and the other two in green
thanks

jfranken · April 4

Thanks. I added a couple of examples to your report. Customize them to meet your requirements and then test the code before using it in production.

hatraatrin · April 4

Thanks for taking time to look into that Jeff,
should the example attached with the code work? I have just run this example and it show the colors ? did it work for you? if so it might be something on my side

thanks

jfranken · April 4

This is what the chart looks like when I run it:

I am running OpenText Analytics Designer, Version: 24.0.1, Build id: v20161012. I haven't tested in other versions, but I believe it should run in any version that supports HTML5 charts.

hatraatrin · April 4

very strange
24.4.0 here

jfranken · April 4

I will test in that version and get back to you.

jfranken · April 4

The version of Highcharts (Highstock) was updated in the 24.4.0 (iHub 16.4) Analytics Designer. I knew there were changes to the API, but I did not think Highcharts would have changed something as fundamental as setting the color. They did. I updated the code in the attached version of the report so that it works in the old and new versions.

hatraatrin · April 5

Thanks Jeff, works fine,

Chart Y-Series mapping

Comments