Column & Spline

Modified on Mon, 11 Apr 2022 at 04:09 PM

This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/HighchartsElement.html#type-highcharts  

This is a sample configuration for a Column & Spline Chart in Apps. T


    {
      "id": "columnAndSplineChart",
      "type": "highcharts",
      "source": "ice_cream_sales",
      "config": {
        "title": {
          "text": "Column chart with multiple yAxis"
        },
        "subtitle": {},
        "exporting": {},
        "chart": {
          "type": "column"
        },
        "series[0]": {
          "type": "spline"
        },
        "series": [
          {
            "columnName": "Ice_Cream_Sales",
            "name": "Ice cream sales",
            "turboThreshold": 0,
            "yAxis": 0,
            "type": "column"
          },
          {
            "columnName": "Temperature",
            "name": "Temperature",
            "turboThreshold": 0,
            "yAxis": 1,
            "type": "spline"
          }
        ],
        "plotOptions": {
          "series": {
            "animation": false
          }
        },
        "xAxis": [
          {
            "categories": [
              "Day"
            ]
          }
        ],
        "yAxis": [
          {
            "title": {
              "text": "Ice cream sales"
            }
          },
          {  
            // this setting allows you to choose where your second yAxis 
            // should be: top (true); bottom, below first yAxis (false)
            "opposite": true,
            "title": {
              "text": "Temperature"
            }
          }
        ]
      }
    }


Datasource used:

    {
      "id": "ice_cream_sales",
      "origin": "raw",
      "config": {
        "schema": "table",
        "data": [
          {"Day": 1, "Temperature": 14.2, "Ice_Cream_Sales": 215},
          {"Day": 2, "Temperature": 16.4, "Ice_Cream_Sales": 325},
          {"Day": 3, "Temperature": 11.9, "Ice_Cream_Sales": 185},
          {"Day": 4, "Temperature": 15.2, "Ice_Cream_Sales": 406},
          {"Day": 5, "Temperature": 18.5, "Ice_Cream_Sales": 522},
          {"Day": 6, "Temperature": 22.1, "Ice_Cream_Sales": 412},
          {"Day": 7, "Temperature": 19.4, "Ice_Cream_Sales": 614},
          {"Day": 8, "Temperature": 25.1, "Ice_Cream_Sales": 544},
          {"Day": 9, "Temperature": 23.4, "Ice_Cream_Sales": 421}
        ]
      }
    },

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article