Skip to Content

Line Chart with different color in SAPUI5

Hi Experts,

I have a sample data for my Line chart. I have built the chart as in the attachment. My requirement is to display the points (Heart beat & Temperature) in the chart with different color for certain dates. Say from July 15 - 17.

Please provide suggestions as to how this can be accomplished.

Thanks,
Srinivasanchart.png

chart.png (13.5 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Oct 27, 2016 at 02:05 PM

    Any suggestions on how to proceed further would be very helpful.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 01, 2016 at 09:56 PM

    Hi,

    I am not sure if you are aware of the documenation of vizframes. As I see and also only used yet you can just set a color to the plotArea and for axis.

    https://sapui5.hana.ondemand.com/docs/vizdocs/index.html#reference/chartProperty/Charts/Line%20%20(3)/Line%20Chart/

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 02, 2016 at 10:15 AM

    Hi Silvia,

    Thank you for your suggestion. On referring to other blogs I am able to give color to the line. But my requirement is that for specific dates I want my line graph to appear in different colors.

    Pardon me if my query is basic.

    Thanks,

    Srinivasan

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 02, 2016 at 11:55 AM

    hi

    Srinivasan,
    I hope this piece of code will help you...

    var oVizFrame = new sap.viz.ui5.controls.VizFrame({
    vizType: "line"
    })

    oVizFrame.setVizProperties({

    plotArea: {

    marker: {

    visible: true

    },
    lineRenderer: function(oMarker) {
    oMarker.graphic.color = "#5cbae6";
    },
    markerRenderer: function(oMarker) {
    oMarker.graphic.fill = "#5cbae6";
    if (oMarker.ctx.Date == "your data value") {
    oMarker.graphic.fill = "#FF0000";
    } else {
    oMarker.graphic.fill = "#008000"
    }
    }
    }
    });

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Karuna,

      Thank you for your suggestion. I guess something like this should work. I want to change the color based on the patient instead of the date. I will try this and come back if I have further queries.

      Thanks,

      Srinivasan