Skip to Content

how do i add zoom to sap.chart.Chart ??

hello,

I have a sap.chart.Chart in which I am plotting a line graph for Vendor Comparison.

the data is clustered in a small value space but there are some rare high and lows and in order the accommodate those the graph takes a big range and due to which the majority is getting clustered and unreadable.

how do I add zoom to the graph or could you recommend another solution for the same issue??

XML:

 <chart:Line id="idVendorCompareGraph" width="100%" height="100%" visible="true"/>

JavaScript:

 var oDim = {
      dimensions: [{
       axis: 1,
       name: "Month",
       value: "{Month}"
      }, {
       axis: 2,
       name: "Vendor",
       value: "{Vendor}"
      }],
      measures: [{
       name: "NetPrice",
       value: "{NetPrice}"
      }, {
       name: "PlanPrice1",
       value: "{PlanPrice1}"
      }],
      data: {
       path: "/VCdata"
      }
     };
     var oDataset = new sap.viz.core.FlattenedDataset(oDim);
     oDataset.setModel(UsageModel);
     oVendorCompareGraph.setDataset(oDataset);

Image:

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Nov 29, 2018 at 07:33 AM

    Hi Siddharth Shaligram,

    Use the VIZ frames, which has to be placed inside the charcontainer, using this will provide the zoom capabilities and other stuff as well.

    https://ui5.sap.com/#/sample/sap.viz.sample.Line/preview

    SAP's example dont have the chartcontainer inside the XML view, they are writing in the JS file to put the VIZ fram inside the Chart container.. But you can write the chart container code directly in XML view:

    https://ui5.sap.com/#/sample/sap.viz.sample.Line/code/InitPage.js

    BR,

    Mahesh

    Add comment
    10|10000 characters needed characters exceeded

    • series in the sense that if I get data as vendor, netprice and planprice, it should create different lines for each vendor.

      json data:

      {"d": {"results": [
          {
              "Vendor": "900002",
              "Material": "200001",
              "Plant": "",
              "Month": "201807",
              "Count": 2,
              "Quantity": "20.00",
              "NetPrice": "3360.00",
              "AvgPrice": "1680.00",
              "AvgQty": "10.00",
              "PlanPrice1": "105.00",
              "PlanPrice2": "0.00"
          },
          {
              "Vendor": "900001",
              "Material": "200001",
              "Plant": "",
              "Month": "201808",
              "Count": 1,
              "Quantity": "1000.00",
              "NetPrice": "153.12",
              "AvgPrice": "153.12",
              "AvgQty": "1000.00",
              "PlanPrice1": "105.00",
              "PlanPrice2": "0.00"
          },
          {
              "Vendor": "900000",
              "Material": "200001",
              "Plant": "",
              "Month": "201811",
              "Count": 1,
              "Quantity": "100.00",
              "NetPrice": "100.00",
              "AvgPrice": "100.00",
              "AvgQty": "100.00",
              "PlanPrice1": "105.00",
              "PlanPrice2": "0.00"
          },
          {
              "Vendor": "900002",
              "Material": "200001",
              "Plant": "",
              "Month": "201811",
              "Count": 1,
              "Quantity": "40000.00",
              "NetPrice": "1.68",
              "AvgPrice": "1.68",
              "AvgQty": "40000.00",
              "PlanPrice1": "105.00",
              "PlanPrice2": "0.00"
          }
      ]}}
  • Jan 15 at 02:19 AM

    If you prefer using sap.chart.Chart, please use smartChart control instead. Smart Chart is a wrapper of sap.chart.Chart and sap.chart.Chart is a wrapper of vizFrame.

    For more info, please check their sample https://ui5.sap.com/#/entity/sap.ui.comp.smartchart.SmartChart .

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 29, 2018 at 11:28 AM

    You can use dual series chart, I've done it long back, you can find separate documenting page link for vizframes in UI5 API reference where I can see the properties of it..

    Add comment
    10|10000 characters needed characters exceeded