Topic
6 replies Latest Post - ‏2013-05-09T14:31:44Z by Prakash_uit
Prakash_uit
Prakash_uit
18 Posts
ACCEPTED ANSWER

Pinned topic Bar Charts - Change Color Dynamically based on the XML data element value

‏2013-05-02T08:41:55Z |

Hi,

     Am using the IBM Web Experience Chart [ Bar Chart  - Jview Chart] for one of my application,  in that need to change the color of bar dynamically. Hard part in that is the color of bar is not either decided by X- Axis or Y- Axis value, but its decided based on one of other element in the XML chart data.

My XML Chart Data is like below

<Rowset>
        <Row>
                <ProcessName>Proc1</ProcessName>
                <ProcessTime>455</ProcessTime>
                <ProcessStatus>Success</ProcessStatus>               
        </Row>
    <Row>
                <ProcessName>Proc2</ProcessName>
                <ProcessTime>130</ProcessTime>
                <ProcessStatus>Failed</ProcessStatus>               
        </Row>
    <Row>
                <ProcessName>Proc3</ProcessName>
                <ProcessTime>135</ProcessTime>
                <ProcessStatus>Failed</ProcessStatus>               
        </Row>
</Rowset>

ProcessName - X-Axis Value

ProcessTime - Y-Axis Value

Process Status - used to decide the color of the Bar [Success - GREEN ; Failed - RED]

Could anyone help me in solving the issue.

  • kevintap
    kevintap
    744 Posts
    ACCEPTED ANSWER

    Re: Bar Charts - Change Color Dynamically based on the XML data element value

    ‏2013-05-03T15:04:31Z  in response to Prakash_uit

    I've attached an example of what you can do.  I configured the Charts builder to use the ProcessStatus field as the Column for Series input.  This way you'll end up with 2 data series, splitting your data based on the ProcessStatus field.  I created a custom chart style to render this chart as a stacked bar chart which allows you to render this data appropriately.

     

    Attachments

    • Prakash_uit
      Prakash_uit
      18 Posts
      ACCEPTED ANSWER

      Re: Bar Charts - Change Color Dynamically based on the XML data element value

      ‏2013-05-03T15:44:21Z  in response to kevintap

      Hi Kevintap,

                         Thank you very much for the sample model. Its just what i need. But just trying to understand how does the color code maps into the process status values. I could see that series has the color codes [series1 - green and series2 - red]. But where do we have the mapping like Success - Map to Green and if Failure - Map to Red. 

                        Just have one more question, What should i do if incase i want to add one more status called In-Progress and associate some yellow color to it. Please help me in clarifying.

      Thanks in advance.

      Regards,
      Prakash

      • kevintap
        kevintap
        744 Posts
        ACCEPTED ANSWER

        Re: Bar Charts - Change Color Dynamically based on the XML data element value

        ‏2013-05-03T15:53:52Z  in response to Prakash_uit

        The .css file for the chart style provides the colors for the data series.  The chart style uses the index of the series to determine which color to assign.  In this case, the "success" series happens to come first in the data, followed by the "failure" series, so the success series is handled by the definition for the series index=0, and the failure is handled by the series definition for index=1.  If you add a third series, it will follow the same pattern.  The JViews charts designer supports other mechanisms for associating a data series with a series definition, for example this can be done by name as well.  For the out-of-the-box chart styles we provide, we simply used the index based mechanism.  It may be beneficial for you here to use the name based association as that would guarantee the proper colors get assigned for each series.

        • Prakash_uit
          Prakash_uit
          18 Posts
          ACCEPTED ANSWER

          Re: Bar Charts - Change Color Dynamically based on the XML data element value

          ‏2013-05-03T17:58:57Z  in response to kevintap

          Hi Kevintap,

                        Thanks for the response. Yes you are right, I need a name based association, since the order of the data set is not guarented. Could you please tell me how can i have the name based association.

          Right now we have series[index=0] ,  should it be something like this, series[name="Success"]

          • kevintap
            kevintap
            744 Posts
            ACCEPTED ANSWER

            Re: Bar Charts - Change Color Dynamically based on the XML data element value

            ‏2013-05-03T18:17:23Z  in response to Prakash_uit

            You're correct, the syntax in the .css file is like this:

            series[name="Success"] {
               color1 : "#ff33cc" ;
            }
            series[name="Failed"] {
               color1 : "#3333ff" ;
            }
             

            You probably want to remove all of the series[index=#] entries and replace them with the definitions above (with suitable colors).

            If you're planning on making additional customizations to the chart style, it may make sense to obtain the JViews chart designer.  The designer lets you make all of these changes in the design tool and see the effects of your changes live.  And the designer will worry about the syntax, you just click the chart where you want to make changes and adjust the properties.

            • Prakash_uit
              Prakash_uit
              18 Posts
              ACCEPTED ANSWER

              Re: Bar Charts - Change Color Dynamically based on the XML data element value

              ‏2013-05-09T14:31:44Z  in response to kevintap

              Hi Kevintap, Thank you very much. that worked out well. 

              Need one more help from you on this bar chart is controlling the width of the bar . if there are many bars on the chart it looks good. But if there are only one/two/three bars then looks weired as like in the  attachment.

              Is there any parameter in the CSS that helps to control the width of the bars based on the number of bars.