Mango State Chart

RonnyHinkel

Hi all
i use a serial chart combined with a state chart
when selecting specific date range, the values coming correct, but the time at the state chart is off

0_1584007509012_Screenshot 2020-03-12 at 17.58.15.png

<ma-serial-chart id="48ebbc26-4836-4ca0-b4ee-49f47dd0ad82" style="position: absolute; width: 100%; height: 400px; left: -14px; top: 161px;" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-title="TBM 1 Earth Pressure 1" series-2-values="point2Values" series-2-point="point2" series-2-type="line" series-2-title="TBM 1 Earth Pressure 2" series-3-values="point4Values" series-3-point="point4" series-3-type="line" series-3-title="TBM 1 Earth Pressure 3" series-4-values="point5Values" series-4-point="point5" series-4-type="line" series-4-title="TBM 1 Earth Pressure 4" series-5-values="point6Values" series-5-point="point6" series-5-type="line" series-5-title="TBM 1 Earth Pressure 5" series-6-values="point7Values" series-6-point="point7" series-6-type="line" series-6-title="TBM 1 Earth Pressure 6" legend="true" balloon="true" export="false" options="{synchronizeGrid: true, valueAxes:[{title:'Bar'}], categoryAxis:{labelRotation:45}}">>></ma-serial-chart>
<ma-state-chart id="1bea8253-7d93-41a7-8e18-a3887c67ba23" series1-values="point3Values" style="position: absolute; width: 100%; height: 80px; left: 3px; top: 130px;" series1-title="Ring" option="{categoryAxis:{labelTime: transparent}}">></ma-state-chart>

all series values are configured with the rollup

<ma-point-values point-xid="DP_efcdc3c7-25da-48b2-8422-8dbaf2fd879f" point="point3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>

as well the state chart won't accept any option, like to transparent the displayed date, but keep the data value label.

Has any one a idea how to hide the categoryAxis at the state chart?

CraigWeb

Hi Ronny
Please always put code or logs in a code element ``` 3 back ticks

RonnyHinkel

@craigweb

<ma-point-values point-xid="DP_efcdc3c7-25da-48b2-8422-8dbaf2fd879f" point="point3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>


<ma-point-values point-xid="DP_4159a949-2267-4487-8c4d-eee7a2bbe5a6" point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
    <ma-point-values point-xid="DP_a5993877-9c52-4814-a3fc-bc9d2e915dde" point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
 <ma-point-values point-xid="DP_7e26a972-510c-4fa0-aea7-9e6183219289" point="point4" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
 <ma-point-values point-xid="DP_c9d4c9e5-a2a0-4aae-a0bc-0cf42358be92" point="point5" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
 <ma-point-values point-xid="DP_16174ae7-b83f-4352-b7b9-3fa3c963de5b" point="point6" values="point6Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
 <ma-point-values point-xid="DP_66f1217d-a9dc-40cc-91c3-d6b4cdbcb149" point="point7" values="point7Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
    <ma-serial-chart id="48ebbc26-4836-4ca0-b4ee-49f47dd0ad82" style="position: absolute; width: 100%; height: 400px; left: -14px; top: 161px;" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-title="TBM 1 Earth Pressure 1" series-2-values="point2Values" series-2-point="point2" series-2-type="line" series-2-title="TBM 1 Earth Pressure 2" series-3-values="point4Values" series-3-point="point4" series-3-type="line" series-3-title="TBM 1 Earth Pressure 3" series-4-values="point5Values" series-4-point="point5" series-4-type="line" series-4-title="TBM 1 Earth Pressure 4" series-5-values="point6Values" series-5-point="point6" series-5-type="line" series-5-title="TBM 1 Earth Pressure 5" series-6-values="point7Values" series-6-point="point7" series-6-type="line" series-6-title="TBM 1 Earth Pressure 6" legend="true" balloon="true" export="false" options="{synchronizeGrid: true, valueAxes:[{title:'Bar'}], categoryAxis:{labelRotation:45}}">&gt;&gt;</ma-serial-chart>
    <ma-state-chart id="1bea8253-7d93-41a7-8e18-a3887c67ba23" series1-values="point3Values" style="position: absolute; width: 100%; height: 80px; left: 3px; top: 130px;" series1-title="Ring" option="{categoryAxis:{labelTime: transparent}}">&gt;</ma-state-chart>

CraigWeb

The graphs are displaying different date ranges because the data sets are very different. I assume the state points are logged on change. I also would not use simplfy on the state points if they are logged on change. You will need to find a way to match the grid count on both charts x axis.

You could try axisAlpha : 0 instead of labelTime: transparent

RonnyHinkel

@craigweb
have tryed it, but looks like the state chart isn't taking options

CraigWeb

The options are definitely merging with the default options. try this on both chartsand see if it lines up the xAxis
options="{valueAxis:{autoGridCount:false,gridCount:10}}"

RonnyHinkel

@craigweb
Hi Craig, this option is unfortunately not working too

MattFox

Ronny if you're still around:
valuesAxes should be implemented like so:

options="{valueAxes:[{autoGridCount:false,gridCount:10}]}"

Value axes hold each graph in an array, one javascript object per chart. Happy to expand further if you hit any other speed bumps
Also great thinking with the two ma-serial charts stacked on top of one another. Definitely gives the effect you were going for.
Fox