Chart Y-Series mapping

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

Find more posts tagged with

Comments

jfranken

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"
}
},

hatra

HI ,
thanks that would be Y label,

ys.png

jfranken

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";
          } 
       }
},

hatra

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

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.

hatra

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

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";} 
},

hatra

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

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)?

hatra

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

Untitled2.png

jfranken

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.

hatra

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

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.

hatra

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

testbuuble.rptdesign

jfranken

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.

testbuuble.rptdesign

hatra

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

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.

hatra

very strange
24.4.0 here

sample.png

jfranken

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

jfranken

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.

testbuubles.rptdesign

hatra

Thanks Jeff, works fine,