{"type":"doc","content":[{"type":"paragraph","content":[{"type":"placeholder","attrs":{"text":"\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n\nThis Confluence article was automatically generated from Asciidoc. Any changes you make to this document will be overridden!\n\nIf you want to change the content, consider leaving a comment.\n\nYou can edit the content directly here: https://gitlab.pricefx.eu/training/pricefx-knowledge-base/-/tree/dev/public/content/docs/concepts/charts-and-dashboards/highcharts\n\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n"}}]},{"type":"paragraph","content":[{"text":"Building charts with ","type":"text"},{"text":"Price Setting","type":"text","marks":[{"type":"em"}]},{"text":" is easy and requires no programming skills.\nA Price Setting chart can be defined with the UI and automatically added to a logic.\nThe definition of a Price Setting chart contains a Datamart query and the result from this query is displayed in the chart.","type":"text"}]},{"type":"paragraph","content":[{"text":"The biggest benefit of Price Setting charts is the ","type":"text"},{"text":"speed","type":"text","marks":[{"type":"strong"}]},{"text":" at which charts can be created, but the drawback is that the ","type":"text"},{"text":"data must be the result of a Datamart query","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"For example, it is not possible to visualize Rebate Records with a Price Setting chart.","type":"text"}]},{"type":"paragraph","content":[{"text":"As a second example, the queries that can be constructed with Price Setting have limited capability. If the desired result can’t be achieved with a single query, Price Setting charts can’t display the result.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"About Highcharts","type":"text"}]},{"type":"paragraph","content":[{"text":"Highcharts","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://www.highcharts.com/demo"}}]},{"text":" is a JavaScript library for interactive charts that is built into Pricefx.\nIt is generally more flexible than the Price Setting charts. For example, it is possible to apply styles, multiple charts can be combined into one and it is possible to create interactive drill-down charts (where the user can click on an individual plot to open a descendant chart).","type":"text"}]},{"type":"paragraph","content":[{"text":"It also supports more ","type":"text"},{"text":"types of charts","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/demo"}}]},{"text":",\nincluding:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Geographical maps","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/maps/getting-started"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Tree maps","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/chart-and-series-types/treemap"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Gauges","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/chart-and-series-types/angular-gauges"}}]},{"text":" (speedometer)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"3d scatter plots","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/demo/3d-scatter-draggable"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Gantt charts","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/gantt/getting-started-gantt"}}]}]}]}]},{"type":"paragraph","content":[{"text":"A major benefit of Highcharts is that the visualized data does not need to be the result of a single Datamart query.\nThe ","type":"text"},{"text":"data can come from anywhere","type":"text","marks":[{"type":"strong"}]},{"text":", it doesn’t need to originate from a Datamart.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"alt":"HighchartExample","type":"external","url":"https://pricefx.vercel.app/content/docs/concepts/charts-and-dashboards/highcharts/images/HighchartExample.png"}},{"type":"caption","content":[{"text":"Figure 1. Example of a chart made using Highcharts","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Pricefx also supports ","type":"text"},{"text":"FlexCharts","type":"text","marks":[{"type":"em"}]},{"text":", which are based on Highcharts.\nHowever, FlexCharts can only use an old version of the Highcharts API and thus have limited capability.\nFlexCharts should therefore ","type":"text"},{"text":"not be used in new projects","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Comparison of Price Setting Charts and Highcharts","type":"text"}]},{"type":"paragraph","content":[{"text":"The table below compares and highlights the most significant differences between Highcharts and Price Setting charts.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"80af10cf-946d-4d39-b4a5-1150aecc6244"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph"}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Price Setting Chart","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Highchart","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"When to use","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"For quick creation of initial solution — Proof of Concept, Demo, etc.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"When high flexibility is needed for final solution.","type":"text"}]},{"type":"paragraph","content":[{"text":"When customization of appearance is needed.","type":"text"}]},{"type":"paragraph","content":[{"text":"When the chart data does not reside in a Datamart.","type":"text"}]},{"type":"paragraph","content":[{"text":"When the chart data cannot be achieved with a single Datamart query.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Effort to create","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Easy — no programming skills needed.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"More difficult — programming skills needed.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"How to create","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Code generated in the UI","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Code","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Time to develop","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Short","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Long","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Number of chart types","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"10","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Almost all from Highcharts, including geographical maps.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Source of Data","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Datamart","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Anything","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Data","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Datamart is queried dynamically in the browser when needed.","type":"text"}]},{"type":"paragraph","content":[{"text":"For example, when the dashboard is refreshed and if the portlet is made visible.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Data is loaded by the (dashboard) calculation logic.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Flexibility","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Limited to Analytics pre-build capabilities.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Almost everything from Highcharts library.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Drilldown","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Limited capability","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Highly flexible","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"The Highchart Object","type":"text"}]},{"type":"paragraph","content":[{"text":"In the web browser, a Highchart is represented by a ","type":"text"},{"text":"JavaScript object","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/getting-started/your-first-chart"}}]},{"text":", referred to as a ","type":"text"},{"text":"Highchart object","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":".\nIn the logic, the Highchart object is represented by a Map.","type":"text"}]},{"type":"paragraph","content":[{"text":"To create a highchart, this map should be provided as an argument to ","type":"text"},{"text":"api.buildHighchart()","type":"text","marks":[{"type":"code"}]},{"text":", which in turn should be returned by the logic code.\nThe Highchart object is then included in the calculation logic element result/output, represented as a JSON string, and will be rendered in the Pricefx UI.","type":"text"}]},{"type":"paragraph","content":[{"text":"The Highchart object has the following properties (among others):","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"chart","type":"text","marks":[{"type":"code"}]},{"text":" — Contains property ","type":"text"},{"text":"type","type":"text","marks":[{"type":"code"}]},{"text":" which defines whether the chart is a pie chart, scatter plot etc.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"series","type":"text","marks":[{"type":"code"}]},{"text":" — The data sample values to be plotted, i.e., not a Datamart query.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code"}]},{"text":" — Title options.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code"}]},{"text":" — Tooltip options.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"xAxis","type":"text","marks":[{"type":"code"}]},{"text":" & ","type":"text"},{"text":"yAxis","type":"text","marks":[{"type":"code"}]},{"text":" — Axis options.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"credits","type":"text","marks":[{"type":"code"}]},{"text":" — Needs to be set to ","type":"text"},{"text":"[enabled: false]","type":"text","marks":[{"type":"code"}]},{"text":" in order to disable the credits to Highcharts.com (by default visible in the bottom right corner).","type":"text"}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Example of basic simple chart definition","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def highchartObject = [\n chart: [\n type: \"column\"\n ],\n series : [\n [\n data: [29.9, 71.5, 106.4, 129.2, 144.0]\n ]\n ]\n]\nreturn api.buildHighchart(highchartObject)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"alt":"ReallySimpleChart","type":"external","url":"https://pricefx.vercel.app/content/docs/concepts/charts-and-dashboards/highcharts/images/ReallySimpleChart.png"}},{"type":"caption","content":[{"text":"Figure 2. Result of the basic Highchart in the code above","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Principle of Chart Preparation","type":"text"}]},{"type":"paragraph","content":[{"text":"Initial preparation is critical for the successful creation of a chart.\nConfiguration Engineers should aim at developing charts with the following series of steps:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The end-result, i.e, the appearance of the chart, is made understood thoroughly.\nA sketch on a paper or whiteboard is usually enough.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The data that will be visualized with the chart is made understood perfectly.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A highchart with hard-coded mock data is created with one of the following methods (in order of preference):","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"By using Pricefx Studio’s live templates (code snippets) in IntelliJ.","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"

Select a template by typing "pfxhigh" → Press [Ctrl+Space] → Select a template from the list.

","block-inline":true,"nestedContent":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"success"},"content":[{"type":"paragraph","content":[{"text":"Select a template by typing ","type":"text"},{"text":"\"pfxhigh\"","type":"text","marks":[{"type":"strong"}]},{"text":" → Press ","type":"text"},{"text":"[Ctrl+Space]","type":"text","marks":[{"type":"strong"}]},{"text":" → Select a template from the list.","type":"text"}]}]}],"version":1}}}}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"alt":"IntelliJLiveTemplate","type":"external","url":"https://pricefx.vercel.app/content/docs/concepts/charts-and-dashboards/highcharts/images/IntelliJLiveTemplate.png"}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"By copying a chart from the ","type":"text"},{"text":"Highcharts Demos","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/demo"}}]},{"text":" and converting the JavaScript Highchart object into a Groovy Map.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"By reading the ","type":"text"},{"text":"Highcharts API documentation","type":"text","marks":[{"type":"link","attrs":{"href":"https://api.highcharts.com/highcharts/"}}]},{"text":" and constructing the Highchart object from scratch.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The chart (with the hard-coded mock data) is tested, to ensure that the Highchart works as required.","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"

During development, the easiest way to test a chart is on a Dashboard.\nMake a change in the logic → deploy it to the dev partition → refresh the Dashboard in the UI.\nIt is possible to set up a keyboard shortcut for the Deploy operation.

","block-inline":true,"nestedContent":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"success"},"content":[{"type":"paragraph","content":[{"text":"During development, the easiest way to test a chart is on a Dashboard.\nMake a change in the logic → deploy it to the dev partition → refresh the Dashboard in the UI.\nIt is possible to set up a keyboard shortcut for the ","type":"text"},{"text":"Deploy","type":"text","marks":[{"type":"em"}]},{"text":" operation.","type":"text"}]}]}],"version":1}}}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A ","type":"text"},{"text":"Data Gathering Element","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/x/4gFLYg"}}]},{"text":" is created, which gathers the necessary data from tables.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A ","type":"text"},{"text":"Result Element","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/spaces/KB/pages/1649082850"}}]},{"text":" is created, which returns the Highchart object with the gathered data in the ","type":"text"},{"text":"series","type":"text","marks":[{"type":"code"}]},{"text":" property.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The functionality is verified.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Modules","type":"text"}]},{"type":"paragraph","content":[{"text":"Highchart functionalities are bundled in a set of modules. Several of these modules are available by default in Pricefx:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"boost","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/advanced-chart-features/boost-module"}}]},{"text":" — Bypasses some of the standard features in order to render as many data points as possible. Disabled by default in Pricefx.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"drilldown","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/chart-concepts/drilldown"}}]},{"text":" — Allows a user to click on a point, this series is then loaded in the chart and replaces the existing series.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"exporting","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/export-module/export-module-overview"}}]},{"text":" — Allows user to download the chart as PDF, PNG, JPG or SVG vector images.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"export-data","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/export-module/export-module-overview"}}]},{"text":" — Enables exporting the chart data to CSV, XLS or HTML table formats.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"heatmap","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/chart-and-series-types/heatmap"}}]},{"text":" — Allows for displaying heatmaps.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"no-data-to-display","type":"text","marks":[{"type":"link","attrs":{"href":"https://api.highcharts.com/highcharts/noData"}}]},{"text":" — Options for displaying a message like \"No data to display\".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"treemap","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/docs/chart-and-series-types/treemap"}}]},{"text":" — Allows for displaying treemaps.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Calculation Logics can add other modules with the Groovy API, ","type":"text"},{"text":"ResultHighchart.addModule()","type":"text","marks":[{"type":"link","attrs":{"href":"#"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"References","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Highcharts","type":"text"}]},{"type":"paragraph","content":[{"text":"Groovy API","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ResultHighchart","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/server/dto/calculation/ResultHighchart.html"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"addModule()","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/server/dto/calculation/ResultHighchart.html#addModule(java.lang.String...)"}}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ResultHighmap","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/server/dto/calculation/ResultHighmap.html"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"api","type":"text","marks":[{"type":"strong"}]},{"text":" functions","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"api.buildHighchart(definition)","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/formulaengine/scripting/PublicGroovyAPI.html#buildHighchart(java.util.Map)"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"api.buildHighmap(definition)","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/formulaengine/scripting/PublicGroovyAPI.html#buildHighmap(java.util.Map)"}}]}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Knowledge Base","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"How to Create Chart","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/spaces/KB/pages/1709736077/How+to+Create+Chart"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"How to create Highchart","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/spaces/KB/pages/955351047"}}]}]}]}]},{"type":"paragraph","content":[{"text":"Highcharts Documentation","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Charts Demos","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/demo"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Charts API","type":"text","marks":[{"type":"link","attrs":{"href":"https://api.highcharts.com/highcharts/"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"data point format","type":"text","marks":[{"type":"link","attrs":{"href":"https://api.highcharts.com/highmaps/plotOptions.series.dataLabels.format"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"tooltip.pointFormat API","type":"text","marks":[{"type":"link","attrs":{"href":"https://api.highcharts.com/highcharts/tooltip.pointFormat"}}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Maps Demos","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.highcharts.com/demo/maps"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Maps API","type":"text","marks":[{"type":"link","attrs":{"href":"https://api.highcharts.com/highmaps/"}}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Flex Charts","type":"text"}]},{"type":"paragraph","content":[{"text":"Pricefx Documentation","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Flex Chart Templates","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/display/UNITY/FlexChart+Templates"}}]}]}]}]},{"type":"paragraph","content":[{"text":"Groovy API","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"api","type":"text","marks":[{"type":"strong"}]},{"text":" functions","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"api.buildFlexChart(baseTemplateToUse, definition)","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/formulaengine/scripting/PublicGroovyAPI.html#buildFlexChart(java.lang.String,java.lang.Object)"}}]}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Knowledge Base","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Stacked Column Chart using the Flex Chart","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/spaces/KB/pages/582615112/Stacked+Column+Chart+using+the+Flex+Chart"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Flex Charts Samples","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/spaces/KB/pages/535233084"}}]}]}]}]}],"version":1}

Browser not supported