Skip to main content

Is there any way to style the legends of the chart

Comments

7 comments

  • Glyn McKenna

    Hi Anvita,

    There are some things you can do with the Marker Points elements under the chart series. I don't think that will let you do exactly what you need to though. You can do this using the charts API. The Charts API let's you break into the chart visualisation code so that you can update the plot options as required. It takes a little bit to work it out, but it gives you the most flexibility

    Logi Info Charts use the Highcharts Library, here is a Highcharts example that shows you what to target in the Plot Options to set your markers: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/

    Here is a link to the Logi Charts API, it is likely you would need to use the beforeCreatChart event: https://devnet.logianalytics.com/hc/en-us/articles/4402865599895-Logi-JavaScript-API-for-Chart-Canvas-Charts

    I hope this helps, if you need more help with this then I can recommend using some of your EOD hours. You can find out more about EOD from your CAM if you'd like to follow up on this

    Best regards

    Glyn

    0
  • Anvita Rastogi

    The legends marker points on the line are also modified in the Highchart sample you shared in this, but I simply want to update the legends.

    0
  • Glyn McKenna

    Hi Anvita, 

    In this case you would add your series as normal, but then using the beforeCreateChart event you can intercept the chart creation and then you should be able to manipulate the series, by copying and removing the data from the main series, setting the marker and creating a second series beneath adding the copied data and then linking to ("linkedTo") the main series above

    Here is a link to an example I found, however instead of using JQuery to create the Highcharts object from scratch you will use the Logi JavaScrcript Charts API with the beforeCreateChart event: http://jsfiddle.net/hnc27nf2/

    Best regards

    Glyn

    0
  • Glyn McKenna

    Hi Anvita,

    Here's a basic Logi version of the jsfiddle example above. You should be able to extrapolate from here for your own needs.

    Kind regards

    Glyn

    <Report ID="ChartAPI-LegendIcon" SavedBy="LOGIXML\gmcKenna" SavedAt="2021-10-25 16:38:18" EngineVersion="14.0.883-SP1">
    <ChartCanvas ID="myLineChart">
    <DataLayer Type="Static" ID="StaticDataLayer1" IdeDisplayStatus="Collapsed">
    <StaticDataRow x="1" y="1" />
    <StaticDataRow x="2" y="2" />
    <StaticDataRow x="3" y="3" />
    <StaticDataRow x="4" y="4" />
    <StaticDataRow x="5" y="5" />
    <StaticDataRow x="6" y="6" />
    <StaticDataRow x="7" y="7" />
    <StaticDataRow x="8" y="8" />
    <StaticDataRow x="9" y="9" />
    <StaticDataRow x="10" y="10" />
    </DataLayer>
    <Series Type="Line" ChartYDataColumn="y" ChartXDataColumn="x" ID="main" LegendLabel="Legend" ConnectNulls="True">
    <MarkerPoints MarkerPointSymbol="https://www.highcharts.com/samples/graphics/sun.png" />
    </Series>
    <ChartCanvasLegend AlignmentHorizontal="Center" LegendOrientation="Horizontal" />
    </ChartCanvas>
    <LineBreak />
    <IncludeScript IncludedScript="var verticalBarChartContainer = Y.one('#myLineChart');&#xD;&#xA;verticalBarChartContainer.on('beforeCreateChart', function(e) {&#xD;&#xA;setSeriesLegendIcon(e);&#xD;&#xA;});&#xD;&#xA;&#xD;&#xA;&#xD;&#xA;function setSeriesLegendIcon (e) {&#xD;&#xA; if (e.options.series == null) {&#xD;&#xA; return;&#xD;&#xA; }&#xD;&#xA; &#xD;&#xA; console.log(e.options.series);&#xD;&#xA; var xdata = e.options.series[0].data;&#xD;&#xA; e.options.series[0].data = [];&#xD;&#xA; e.options.series.push({ linkedTo: e.options.series[0].id, data: xdata });&#xD;&#xA; console.log(e.options.series);&#xD;&#xA;}&#xD;&#xA;" />
    </Report>
    0
  • Anvita Rastogi

    Hi Glyn McKenna
    With this examples, legends are not created an only a chart with marker points is created we only want the legends. So there is no way to do this with logi ?

    0
  • Glyn McKenna

    Hi Anvita,

    What version of Logi Info is your application running? I'm running version 14 SP1 This is what the the definition above produces. The charting library was upgraded in version 14, so I'm guessing you're on version 12.x. Is it possible for you to upgrade at all?

    0
  • Glyn McKenna

    Hi Anvita,

    I had another look to see if you can make it work with 12.x, and the following seems to do the trick (for me)

    <Report ID="ChartAPI-LegendIcon" SavedBy="LOGIXML\gmcKenna" SavedAt="2021-10-26 11:51:22" EngineVersion="12.8.724-SP2">
    <ChartCanvas ID="myLineChart" IdeDisplayStatus="Collapsed">
    <DataLayer Type="Static" ID="StaticDataLayer1" IdeDisplayStatus="Collapsed">
    <StaticDataRow x="1" y="1" />
    <StaticDataRow x="2" y="2" />
    <StaticDataRow x="3" y="3" />
    <StaticDataRow x="4" y="4" />
    <StaticDataRow x="5" y="5" />
    <StaticDataRow x="6" y="6" />
    <StaticDataRow x="7" y="7" />
    <StaticDataRow x="8" y="8" />
    <StaticDataRow x="9" y="9" />
    <StaticDataRow x="10" y="10" />
    </DataLayer>
    <Series Type="Line" ChartYDataColumn="y" ChartXDataColumn="x" ID="main" LegendLabel="Legend" ConnectNulls="True">
    <MarkerPoints MarkerPointSymbol="https://www.highcharts.com/samples/graphics/sun.png" />
    </Series>
    </ChartCanvas>
    <LineBreak />
    <IncludeScript IncludedScript="var myLineChart = Y.one('#myLineChart');&#xD;&#xA;myLineChart.on('beforeCreateChart', function(e) {&#xD;&#xA;setSeriesLegendIcon(e);&#xD;&#xA;});&#xD;&#xA;&#xD;&#xA;&#xD;&#xA;function setSeriesLegendIcon (e) {&#xD;&#xA; if (e.options.series == null) {&#xD;&#xA; return;&#xD;&#xA; }&#xD;&#xA; &#xD;&#xA; var xdata = e.options.series[0].data;&#xD;&#xA; e.options.series[0].data = [{x: 1, y: 1, marker: { enabled: false } }];&#xD;&#xA; e.options.series.push({ linkedTo: e.options.series[0].id, data: xdata });&#xD;&#xA;}&#xD;&#xA;" />
    </Report>
    0

Please sign in to leave a comment.