LineSeries Multiple Date Axes breaks the DateAxis (Amcharts 4 ) - date

I am trying to make a multiple date axis graph in AmCharts 4
I have two inputs from two temperature sensors. The dateAxis is cutted at some value and the values are not properly set.
Any ideas please on what's wrong ?
Here is the graph from first temperature sensor
chart from sensor 1
2.The graph from second temperature sensor
chart from sensor 2
3.The resulting image of both sensors:
chart from both sensors
4.Here is the code:
`
chart.data = chartData;
if (chart.data[0]) {
seriesArray = Object.keys(chart.data[0]);
// TODO: only for occurDate
seriesArray.splice(0, 1);
}
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = {
"timeUnit": "day",
"count": 1
};
dateAxis.skipEmptyPeriods = true;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
for(let i=0;i<seriesArray.length;i++){
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = seriesArray[i];
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.tensionX = 0.90;
series.name = seriesArray[i];
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.tooltipText = seriesArray[i] + ": {valueY}" + unit;
bullet.adapter.add("fill", function(fill, target){
if(target.dataItem.valueY < 21){
return am4core.color("#D66D6D");
}
return fill;
})
var range = valueAxis.createSeriesRange(series);
range.value = goodRange.min;
range.endValue = 0;
range.contents.stroke = am4core.color("#D66D6D");
range.contents.fill = range.contents.stroke;
range.axisFill.fill = am4core.color("#cccccc");
range.axisFill.fillOpacity = 0.2;
range.grid.strokeOpacity = 0;
var range2 = valueAxis.createSeriesRange(series);
range2.value = 1000000;
range2.endValue = goodRange.max;
range2.contents.stroke = am4core.color("#D66D6D");
range2.contents.fill = range.contents.stroke;
range2.axisFill.fill = am4core.color("#cccccc");
range2.axisFill.fillOpacity = 0.2;
range2.grid.strokeOpacity = 0;
}
// Add scrollbar
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
chart.cursor = new am4charts.XYCursor();
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
chart.legend.scrollable = true;
}`

Related

how to replace array object in flutter

if(_list.length != 0){
var shape;
var shapeCount;
var shapeCaratCount;
var shapeTotalAmount;
var details = new Map();
var temp = [Map()];
for(int l = 0 ; l <= _list.length; l++){
var list = _list[l];
if(temp.contains(list.shape)){
shapeCount += 1;
shapeCaratCount = shapeCaratCount + list.carat;
shapeTotalAmount = shapeTotalAmount + list.totalAmount;
details['Shape'] = list.shape;
details['pcs_count'] = shapeCount;
details['Carat_Count'] = shapeCaratCount;
details['total_amount'] = shapeTotalAmount;
print(details);
temp.add(details);
}else{
shapeCount = 0;
//shapeCaratCount = shapeCaratCount + list.carat;
shapeCaratCount = list.carat;
shapeTotalAmount = list.totalAmount;
details['Shape'] = list.shape;
details['pcs_count'] = shapeCount;
details['Carat_Count'] = shapeCaratCount.toString();
details['total_amount'] = shapeTotalAmount.toString();
print(details);
temp.add(details);
}
}
}
I want to replace array object of temp dictionary array.
so if any know how to do this please help i am new at flutter
this is my code please if any difficulty. please ask.

Arcobjects: set measures based on the polyline length

I am currently linear referencing a set of roads. Using IMSegmatation2.SetMsAsDistance2 works fine for single-part polylines but for multi-part polylines I want to set the M values as the length along the polyline to the point, not the shortest distance between the point and the start point of the polyline. The SetMsAsDistance2 function sets the Measures on parallel lines as equal. I want them to be different.
Apart from setting an M value for each polyline vertex does anyone know of a method that sets the M as the length along the polyline?
The solution is to use the IMSegmentation3.SetAndInterpolateMsBetween function.
Note that the solution assumes that the geometries that make up the feature are in the right order. It assigns measures geometry-by-geometry.
The code for this is:
public static void measuresAdd_NonDuplicating(ref IFeature pFeat, bool bHasZ, bool bIgnoreGaps, out string sError)
{
// Add non-duplicating measures to the feature
sError = "";
IMSegmentation3 pSeg;
IGeometryCollection pGeomColl;
//IGeometryCollection pNewGeomColl; // Use if geometries are to be re-ordered.
IGeometry pGeom;
IPolyline4 pPoly;
IQueryFilter pQ;
IMAware pMAware;
IZAware pZAware;
double dStartMeasure;
double dToMeasure;
double dMeasure;
double dLen;
try
{
if (pFeat.ShapeCopy.IsEmpty == false)
{
pGeomColl = (IGeometryCollection)new PolylineClass();
pGeomColl = (IGeometryCollection)pFeat.ShapeCopy;
if (pGeomColl.GeometryCount == 1)
{
// Single line geometry. Duplication not an issue.
pMAware = (IMAware)pFeat.ShapeCopy;
pMAware.MAware = true;
pSeg = (IMSegmentation3)pMAware;
pPoly = geometryToPolyline((IGeometry)pFeat.ShapeCopy, out sError);
if (sError.Length > 0)
{
sError = "measuresAdd_NonDuplicating\r\n" + sError;
return;
}
pSeg.SetMsAsDistance2(pPoly.FromPoint, 1, 0, bIgnoreGaps);
pFeat.Shape = (IGeometry)pSeg;
pFeat.Store();
}
else
{
// For re-ordering geometries. Not currently used.
//pNewGeomColl = (IGeometryCollection)new Polyline();
//IZAware pZawareNew = (IZAware)pNewGeomColl;
//pZawareNew.ZAware = bHasZ;
//IMAware pMAwareNew = (IMAware)pNewGeomColl;
//pMAwareNew.MAware = true;
dStartMeasure = 0;
dMeasure = 0;
// MultiGeometry. Place them in order and set the measures on each part increasing.
// Currently assumes the existing order is correct.
for (int i = 0; i < pGeomColl.GeometryCount; i++)
{
pGeom = pGeomColl.Geometry[i];
pPoly = geometryToPolyline(pGeom, out sError);
if (sError.Length > 0)
{
sError = "measuresAdd_NonDuplicating\r\n" + sError;
return;
}
// Measure Values
dStartMeasure = dMeasure;
if (i > 0) dStartMeasure += 0.01;
dLen = pPoly.Length;
dToMeasure = dMeasure + dLen;
// Set Measures
pMAware = (IMAware)pPoly;
pMAware.MAware = true;
pZAware = (IZAware)pPoly;
pZAware.ZAware = bHasZ;
pSeg = (IMSegmentation3)pPoly;
pSeg.SetAndInterpolateMsBetween(dStartMeasure, dToMeasure);
// If geometries are re-ordered into a connecting network
//IGeometryCollection pXGeomColl = new PolylineClass();
//pMAware = (IMAware)pXGeomColl;
//pMAware.MAware = true;
//pZAware = (IZAware)pXGeomColl;
//pZAware.ZAware = bHasZ;
//pXGeomColl = (IGeometryCollection)pPoly;
//for (int j = 0; j < pXGeomColl.GeometryCount; j++)
// pNewGeomColl.AddGeometry(pXGeomColl.Geometry[j]);
dMeasure += dLen;
}
pFeat.Shape = (IGeometry)pGeomColl;
}
}
}
catch (Exception ex)
{
System.Diagnostics.StackTrace pStack = new System.Diagnostics.StackTrace(ex, true);
System.Diagnostics.StackFrame pFrame = pStack.GetFrame(pStack.FrameCount - 1);
int iLineNo = pFrame.GetFileLineNumber();
sError = "ERROR: measuresAdd_NonDuplicating; Line: " + iLineNo + "\n" + ex.ToString();
}
}

Chart.js click on labels, using bar chart

i need help with my Chart.js interactivity. When I click on the label, I need to return the column(index) number at which I clicked.
I tried to use getElementsAtEvent but it only work if I click directly at chart.
This http://jsfiddle.net/yxz2sjam/ is pretty much what I am looking for but getPointsAtEvent is no longer available in the new versions.
canvas.onclick = function (evt) {
var points = chart.getPointsAtEvent(evt);
alert(chart.datasets[0].points.indexOf(points[0]));
};
I also found this http://jsfiddle.net/1Lngmtz7/ but it isn't working with bar chart.
var ctx = document.getElementById("myChart").getContext("2d");
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data
})
$('#myChart').click(function (e) {
var helpers = Chart.helpers;
var eventPosition = helpers.getRelativePosition(e, myRadarChart.chart);
var mouseX = eventPosition.x;
var mouseY = eventPosition.y;
var activePoints = [];
helpers.each(myRadarChart.scale.ticks, function (label, index) {
for (var i = this.getValueCount() - 1; i >= 0; i--) {
var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);
var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
ctx.font = pointLabeFont;
var labelsCount = this.pointLabels.length,
halfLabelsCount = this.pointLabels.length / 2,
quarterLabelsCount = halfLabelsCount / 2,
upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
var width = ctx.measureText(this.pointLabels[i]).width;
var height = pointLabelFontSize;
var x, y;
if (i === 0 || i === halfLabelsCount)
x = pointLabelPosition.x - width / 2;
else if (i < halfLabelsCount)
x = pointLabelPosition.x;
else
x = pointLabelPosition.x - width;
if (exactQuarter)
y = pointLabelPosition.y - height / 2;
else if (upperHalf)
y = pointLabelPosition.y - height;
else
y = pointLabelPosition.y
if ((mouseY >= y && mouseY <= y + height) && (mouseX >= x && mouseX <= x + width))
activePoints.push({ index: i, label: this.pointLabels[i] });
}
}, myRadarChart.scale);
var firstPoint = activePoints[0];
if (firstPoint !== undefined) {
alert(firstPoint.index + ': ' + firstPoint.label);
}
});
Thank for response.
I solve the problem with
document.getElementById("chart").onclick = function(e)
{
var activeElement = weatherMainChart.lastTooltipActive;
console.log(activeElement[0]._index);
};
this solution register clicks on chart and label, then I restricted it with e.layerY to register only clicks on label section.
document.getElementById("chart").onclick = function(e)
{
var activeElement = weatherMainChart.lastTooltipActive;
if(e.layerY > 843 && e.layerY < 866 && activeElement[0] !== undefined)
console.log(activeElement[0]._index);
};
If you add a click handler through the onClick option you can use the following code using the getElementsAtEventForMode() call:
function handleClick(evt) {
var col;
switch(chartType) {
case "horizontalBar":
this.getElementsAtEventForMode(evt, "y", 1).forEach(function(item) { col = item._index });
break;
case "bar":
this.getElementsAtEventForMode(evt, "x", 1).forEach(function(item) { col = item._index });
break;
}
if (!col) {
return;
}
alert("Column " + col + " was selected");
};
You'll probably need to add extra switch checks for other chart types but I'm sure you get the idea.
Using version 2.4.0, i created an onClick Event, and inside it
var activeIndex = localChart.tooltip._lastActive[0]._index;
var clickCoordinates = Chart.helpers.getRelativePosition(e, localChart.chart);
if (clickCoordinates.y >= 530) { //custom value, depends on chart style,size, etc
alert("clicked on " + localChart.data.labels[activeIndex]);
}
I Solved this problem with single or multiple label click you will be find using true/false
First you need to set your chartJs Id click
below code SessionChart = Your ChartJs ID e.g. ("myChart") I was replace it for my Id
document.getElementById("SessionChart").onclick = function (evt) {
var meta = SubscriberSessionChart.getDatasetMeta(0);
if (meta.$filler.chart.legend.legendItems[0].text.toLowerCase() "sessions")
{
if (meta.$filler.chart.legend.legendItems[0].hidden) {
sessionHidden = true;
}
}
}
here "sessions" = first label text
meta.$filler.chart.legend.legendItems[0].text.toLowerCase() = is your first label
from Array so you can get multiple label's click here true / false
if (meta.$filler.chart.legend.legendItems[0].hidden) = your label is not active then
you will get hidden true otherwise you will get false if not tick on label
by default label tick hidden is false in chart js

Trying to create a dynamic Dundas Stackedarea chart

Good afternoon. I try to research and have yet to find anyone that has an example of this, I normally do not ask for help, I just figure it out, but this one is killing me! I am trying to create a stacked area chart dynamically, I already can create a dynamic area chart, but cannot for the life of me figure out how to get a stacked area chart to stack the series. I have made something similar in excel and I can get it to chart fine, but it is not dynamic.
I have data that is laid out like this:
How the data is laid out
And this is how I want the chart to look:
How I want the chart to look
How can I associate the data to categories or whatever it is I need to do? I have the data in an array but I can just not seem to figure out how to get the chart to stack. Can anyone help? If you need some more info please ask, I know I am not including my code, mainly because it is very ugly and drawn out, but can try to compress it a bit and simplify if anyone needs that.
My code is below (maybe that will help, even if it is ugly)
For tmpatozgroup = 1 To 1
Dim chart1 As New Chart()
chart1.ID = "chrt-" & tmpatozgroup & "-" & atozser
Dim seriesperrow As Integer
Dim chartArea1 As New ChartArea()
chart1.Height = 340
chart1.Palette = ChartColorPalette.Dundas
chart1.BackColor = System.Drawing.Color.LightGray
chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss
chart1.BorderLineColor = System.Drawing.Color.Gray
chart1.BorderLineStyle = ChartDashStyle.Solid
chart1.BorderLineWidth = 4
' Set the ChartArea properties
chartArea1.Name = "Default"
chartArea1.BackColor = System.Drawing.Color.LightGray
chartArea1.AxisX.LabelsAutoFit = False
chartArea1.AxisX.LabelStyle.FontAngle = -45
chartArea1.Area3DStyle.Enable3D = True
chart1.ChartAreas.Add(chartArea1)
Dim series1 As New Series()
series1.Name = tblGrouping1(tmpatozgroup, 0)
chart1.Series.Add(series1)
chart1.Legends.Clear()
If Not IsNothing(tblGrouping1(tmpatozgroup, 0)) Then
For tmpatozgroup2 = 1 To 9
Dim legend1 As New Legend()
Dim sername As String
Dim servalues() As Double
Dim serformat As String
Dim chrtSeriesCnt As Integer
sername = tblGrouping1(0, tmpatozgroup2)
'need to tear the current row out of the array and place in tmpseries
Dim tmpatozcnt As Integer
For tmpatozcnt = 1 To 999
If IsNothing(tblGrouping1(0, tmpatozcnt)) Then atozseries = tmpatozcnt : Exit For
tmpSeries(tmpatozcnt) = tblGrouping1(tmpatozgroup2, tmpatozcnt)
chrtSeriesLabels(tmpatozcnt) = tblGrouping1(0, tmpatozcnt)
Next
servalues = tmpSeries
serformat = chrtSeriesForm1
chart1.Width = 1000
seriesperrow = 1
'chart1.AlignDataPointsByAxisLabel()
series1.Type = SeriesChartType.StackedColumn
series1("StackedGroupName") = "'" & tblGrouping1(tmpatozgroup, 0) & "'"
If Not IsNothing(tblGrouping1(tmpatozgroup, 0)) Then
For Each ser As Series In chart1.Series
For i2 As Integer = 1 To atozseries - 1
ser.Points.AddXY(chrtSeriesLabels(i2), servalues(i2 - 1))
ser.Points(i2 - 1).BorderColor = Drawing.Color.FromArgb(Split(sercolor(i2), "|")(0), Split(sercolor(i2), "|")(1), Split(sercolor(i2), "|")(2))
ser.Points(i2 - 1).Color = Drawing.Color.FromArgb(Split(sercolor(i2), "|")(0), Split(sercolor(i2), "|")(1), Split(sercolor(i2), "|")(2))
'ser.XAxisType = AxisType.Secondary
Dim tooltipformat As String
If serformat = "Currency" Then serformat = "$#,##0.00" : tooltipformat = "{$#,#.00}"
If serformat = "###,###,##0.00" Then serformat = "#,##0.00" : tooltipformat = "{#,#}"
If serformat = "###,###,##0" Then serformat = "0" : tooltipformat = "{#,#}"
ser.Points(i2 - 1).ToolTip = ser.Points(i2 - 1).AxisLabel & " : #VALY" & tooltipformat
Next
chart1.ChartAreas(0).AxisX.Interval = 1
chart1.ChartAreas(0).AxisX.LabelStyle.Interval = 1
chart1.ChartAreas(0).AxisX.Title = "test" 'chrtXAxisName
chart1.ChartAreas(0).AxisY.Title = sername
chart1.ChartAreas(0).AxisY.LabelStyle.Format = serformat
chart1.Palette = ChartColorPalette.Dundas
Next
End If
Next
If seriesonrow = seriesperrow Or seriesonrow = 0 Then
tr = New TableRow
tr.CssClass = "charts column"
tr.Style("display") = "none"
End If
td = New TableCell
td.HorizontalAlign = HorizontalAlign.Center
td.ColumnSpan = 6 / seriesperrow
td.Controls.Add(chart1)
tr.Cells.Add(td)
tblReport.Rows.Add(tr)
chart1 = Nothing
End If
Next
Thanks a bunch in advance!
Later
Here's a sample:
<asp:Chart ID="Chart1" runat="server" Width="600px">
<Series>
<asp:Series Name="Series1" ChartType="StackedArea">
<Points>
<asp:DataPoint XValue="1" YValues="10" />
<asp:DataPoint XValue="2" YValues="20" />
<asp:DataPoint XValue="3" YValues="30" />
<asp:DataPoint XValue="4" YValues="15" />
</Points>
</asp:Series>
<asp:Series ChartArea="ChartArea1" ChartType="StackedArea" Name="Series2">
<Points>
<asp:DataPoint XValue="1" YValues="20" />
<asp:DataPoint XValue="2" YValues="40" />
<asp:DataPoint XValue="3" YValues="60" />
<asp:DataPoint XValue="4" YValues="45" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY>
<MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
</AxisY>
<AxisX>
<MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
EDIT: Using code-behind:
protected void Page_Load(object sender, EventArgs e)
{
Chart chart1 = new Chart();
ChartArea area1 = new ChartArea("Area1");
Series series1 = new Series();
series1.ChartType = SeriesChartType.StackedArea;
series1.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 10 } });
series1.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 20 } });
series1.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 30 } });
series1.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 15 } });
series1.ChartArea = "Area1";
Series series2 = new Series();
series2.ChartType = SeriesChartType.StackedArea;
series2.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 20 } });
series2.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 40 } });
series2.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 60 } });
series2.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 45 } });
series2.ChartArea = "Area1";
chart1.ChartAreas.Add(area1);
chart1.Series.Add(series1);
chart1.Series.Add(series2);
Controls.Add(chart1);
}
EDIT 2: adding a legend:
protected void Page_Load(object sender, EventArgs e)
{
Chart chart1 = new Chart();
ChartArea area1 = new ChartArea("Area1");
Legend legend1 = new Legend("Legend1");
legend1.Docking = Docking.Top;
legend1.Alignment = System.Drawing.StringAlignment.Center;
Series series1 = new Series("Bought");
series1.ChartType = SeriesChartType.StackedArea;
series1.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 10 } });
series1.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 20 } });
series1.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 30 } });
series1.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 15 } });
series1.ChartArea = "Area1";
series1.Legend = "Legend1";
Series series2 = new Series("Sold");
series2.ChartType = SeriesChartType.StackedArea;
series2.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 20 } });
series2.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 40 } });
series2.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 60 } });
series2.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 45 } });
series2.ChartArea = "Area1";
series2.Legend = "Legend1";
chart1.ChartAreas.Add(area1);
chart1.Legends.Add(legend1);
chart1.Series.Add(series1);
chart1.Series.Add(series2);
Controls.Add(chart1);
}

drag and drop using Starling

I am have difficulty getting drop and drop to work using Starling with feathers ui.
Here is my code:
function begin(){
var quadx = squareSize/4 + squareSize/8;
var quady = 20;
var quadcounter = 0;
for(var f=0;f<totalsquares;f++){
var sprite:Sprite = new Sprite();
var quad:Quad = new Quad(squareSize, squareSize);
sprite.name = "" + f;
spriteunder.name = "" + f * 1000;
quad.setVertexColor(0, 0x3683ed);
quad.setVertexColor(1, 0x3683ed);
quad.setVertexColor(2, 0x3683ed);
quad.setVertexColor(3, 0x3683ed);
sprite.x=quadx;
sprite.y = quady;
var lv3 = new TextField(squareSize, squareSize, f,"Corpid", 14,0xf1f1f1);
sprite.touchable = true;
quad.touchable = true;
lv3.touchable = false;
sprite.addChild(quad);
sprite.addChild(lv3);
addChild(sprite);
sprite.addEventListener(TouchEvent.TOUCH, touchHandler);
quadx = quadx + squareSize + 1;
quadcounter++;
if(quadcounter == boardWidth){
quadx = squareSize/4 + squareSize/8;
quady = quady + squareSize + 1;
quadcounter = 0;
}
}
}
function touchHandler(e : TouchEvent) : void
{
var touch:Touch = e.getTouch(stage);
var position:Point = touch.getLocation(stage);
var target:Quad = e.target as Quad;
if(touch.phase == TouchPhase.MOVED ){
target.x = position.x - target.width/2;
target.y = position.y - target.height/2;
}
}
The problem is that whenever i run this , its the QUAD child that gets dragged around, not the parent sprite.
What do i change in order to get this to drag correctly.
Perhaps you must start with
var touch:Touch = event.getTouch(this, TouchPhase.BEGAN);
if (touch)
{
//get and lock your target, maybe a trace of your actual target, just to be sure!
}
And then in the MOVED phase, actually drag it.