Overlaying two AmCharts - javascript

I have one chart I want to build that has a scatter plot and then four lines. The four lines will be from a completely different dataset, with the same x min max and y min max but different structure. How can I create one chart with the fixed xmin xmax ymin ymax and then another and have one overlay the other.
Basically I want one chart with two completely different datasets that have the same domain and ranges AND keep the interactivity of both. I am trying the datasets an field mappings but haven't had much luck. I am not entirely sure I understand what the field mappings are doing. An example I found:
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData1,
"categoryField": "date"
}, {
"title": "second data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData2,
"categoryField": "date"
}],
I am using dataloader for now, I am able to read in both datasets at one time with ajax as another option if I can do it all in one chart. So I am not sure how to use dataloader with this example either. So if someone knows how that may work that would be helpful as well.
Thanks!


You can use simple CSS to get that.
position: absolute, some positioning coordinates top & left, and dimentions width & height.
z-index to decide what would be on top of what.
And transparent background for both of them.
The rest is just configurations in the config JSON of the chart.
AmCharts.makeChart("chartdiv", {
"type": "serial",
"autoMargins": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"fillAlphas": 1,
"fillColors": "#4DCD11",
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"fillAlphas": 1,
"fillColors": "#070AB5",
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"allLabels": [],
"balloon": {},
"titles": [{
"id": "Title-1",
"size": 15,
"text": " "
}],
"dataProvider": [{
"category": "1",
"column-1": 8,
"column-2": 5
},
{
"category": "2",
"column-1": 6,
"column-2": 7
},
{
"category": "3",
"column-1": 2,
"column-2": 3
}
]
});
AmCharts.makeChart("chartdiv2", {
"type": "serial",
"theme": "light",
"autoMargins": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-1",
"lineThickness": 6,
"noStepRisers": true,
"title": "graph 1",
"type": "step",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-2",
"lineThickness": 6,
"noStepRisers": true,
"title": "graph 2",
"type": "step",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": " "
}],
"allLabels": [],
"balloon": {},
"titles": [{
"id": "Title-1",
"size": 15,
"text": " "
}],
"dataProvider": [{
"category": "1",
"column-1": 8,
"column-2": 5
},
{
"category": "2",
"column-1": 6,
"column-2": "2"
},
{
"category": "3",
"column-1": "7",
"column-2": 3
},
{
"category": "4",
"column-1": "9",
"column-2": 3
},
{
"category": "5",
"column-1": "7",
"column-2": 1
},
{
"category": "6",
"column-1": "8",
"column-2": 2
},
{
"category": "7",
"column-1": "7",
"column-2": "6"
}
]
});
#chartdiv,
#chartdiv2 {
position: absolute;
background-color: transparent;
}
#chartdiv {
z-index: 100;
top: 0;
left: 0;
width: 600px;
height: 400px
}
#chartdiv2 {
z-index: 120;
top: 120px;
left: 100px;
width: 400px;
height: 180px
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>


D3 should be able to handle that pretty easily. You can use d3.request (e.g. d3.json) to call the data (in separate requests if necessary). Then d3.scale to set your min/max values to defined points on an svg chart, then plot your scatter points/lines etc. to those points using the data requested.
Mess about with axes and tooltips for a bit and you should have a functional chart.

Related

Vega-lite: Change order of stacks in a stacked bar chart and ignore negative value

This is the chart I am trying to follow for my work
Vega editor
How could I change the order of the 'Measure' to keep 'Measure 1' at the top only by ignoring that it is a negative value? I still want to show the '-' sign in the text but I want the bar to go to the top.
For David: One of the bars are in such a way where the top blue bar can be negative but should always be on the top
:

Like this? If so, you need a sort.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"Value": 0.321, "Date": "09/30/2021", "Measure": "Measure 4"},
{"Value": 0.031, "Date": "09/30/2021", "Measure": "Measure 3"},
{"Value": 0.123, "Date": "09/30/2021", "Measure": "Measure 2"},
{"Value": -0.475, "Date": "09/30/2021", "Measure": "Measure 1"}
]
},
"width": 500,
"height": 250,
"resolve": {"scale": {"color": "independent"}},
"layer": [
{
"mark": "bar",
"encoding": {
"y": {
"field": "Value",
"type": "quantitative",
"axis": {"format": ".1%"},
"sort": "descending"
},
"x": {"field": "Date", "type": "nominal", "axis": {"labelAngle": -45}},
"color": {"field": "Measure", "type": "nominal"}
}
},
{
"transform": [
{
"stack": "Value",
"groupby": ["Date"],
"as": ["lower", "upper"],
"sort": [{"field": "Measure", "order": "descending"}]
},
{"calculate": "(datum.lower + datum.upper) / 2", "as": "midpoint"}
],
"mark": {"type": "text"},
"encoding": {
"y": {"field": "midpoint", "type": "quantitative"},
"x": {"field": "Date", "type": "nominal"},
"color": {
"field": "Measure",
"type": "nominal",
"scale": {"range": ["white"]},
"legend": null
},
"text": {"aggregate": "sum", "field": "Value"}
}
}
]
}

Hide the value shown next to my balloonText in amCharts

I will start by showing you a picture of my problem:
When I have the mouse on any point of my real time amChart, as seen on the right side of the picture, not only a balloonText displays but also the values of x axis next to their labels are displayed!
But I don't want the numbers to be shown there.
How can I fix that?
this is my code:
"graphs": [{
"id": "g1",
"balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",
"lineColor": colors[c++],
"lineThickness": 1.5,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value",
"title": Ctitle[num] + "_a"
}, {
"id": "g2",
"balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",
"lineColor": colors[c++],
"lineThickness": 1.5,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value2",
"title": Ctitle[num] + "_b"
}, {
"id": "g3",
"balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]" + new Date().toJSON().slice(0, 10).replace(/-/g, '/') + "</b></span>",
"lineColor": colors[c++],
"lineThickness": 1.5,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value3",
"title": Ctitle[num] + "_c"
}],
"legend": {
"position": "right",
"marginLeft": 20,
"autoMargins": false,
"marginBottom": 40,
},
})
Thank you in advance.

To hide the values in the legend on mouseover, set the legend's valueText property to an empty string:
legend: {
// ...
valueText: ""
}
Demo below:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"legend": {
"valueText": ""
},
"dataProvider": [{
"date": "2017-06-23",
"value": 4
}, {
"date": "2017-06-24",
"value": 12
}, {
"date": "2017-06-25",
"value": 7
}, {
"date": "2017-06-26",
"value": 13
}, {
"date": "2017-06-27",
"value": 2
}, {
"date": "2017-06-28",
"value": 14
}, {
"date": "2017-06-29",
"value": 12
}, {
"date": "2017-06-30",
"value": 9
}, {
"date": "2017-07-01",
"value": 16
}, {
"date": "2017-07-02",
"value": 1
}, {
"date": "2017-07-03",
"value": 9
}, {
"date": "2017-07-04",
"value": 10
}, {
"date": "2017-07-05",
"value": 16
}, {
"date": "2017-07-06",
"value": 10
}, {
"date": "2017-07-07",
"value": 8
}, {
"date": "2017-07-08",
"value": 17
}, {
"date": "2017-07-09",
"value": 15
}, {
"date": "2017-07-10",
"value": 9
}, {
"date": "2017-07-11",
"value": 16
}, {
"date": "2017-07-12",
"value": 4
}],
"graphs": [{
"valueField": "value",
"title": "graph",
"bullet": "round"
}],
"chartCursor": {},
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD",
"categoryAxis": {
"parseDates": true
}
})
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px"></div>

Timestamp in Amchart category axis showing as Undefined

I'm trying to show timestamp on the amchart category axis, but its showing as undefined in the chart. Here is the chart code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"date": 1492664639000,
"value": 10
}, {
"date": 1492664646000,
"value": 20
}, {
"date": 1492664653000,
"value": 20
}, {
"date": 1492664660000,
"value": 23
}, {
"date": 1492664667000,
"value": 35
}, {
"date": 1492664674000,
"value": 26
}, {
"date": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});
Here is a DEMO.

You use wrong key for reference. Try this. (Demo here: https://codepen.io/anon/pen/ZKQPJL)
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"timestamp": 1492664639000,
"value": 10
}, {
"timestamp": 1492664646000,
"value": 20
}, {
"timestamp": 1492664653000,
"value": 20
}, {
"timestamp": 1492664660000,
"value": 23
}, {
"timestamp": 1492664667000,
"value": 35
}, {
"timestamp": 1492664674000,
"value": 26
}, {
"timestamp": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[timestamp]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});

Stacking data by hours AmCharts

Is it possible to stack data hourly ? I have only two columns: time and signal from trigger "trig = 1". So I need to stack all trigger signals on each hour. So on Y axis should be a number sum of all trigger signals in each hour. You can use this example JSFiddle.
Data looks like this:
[{"time":"15:15:00","trig":"1"},{"time":"15:45:00","trig":"1"},
{"time":"16:10:18","trig":"1"},{"time":"16:20:00","trig":"1"},
{"time":"17:30:00","trig":"1"},{"time":"17:50:00","trig":"1"},
{"time":"18:25:00","trig":"1"},{"time":"18:45:00","trig":"1"},
{"time":"19:05:00","trig":"1"},{"time":"19:40:00","trig":"1"},
{"time":"21:15:00","trig":"1"},{"time":"21:50:00","trig":"1"}]
And my JS:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [{
"title": "triger",
"fieldMappings": [{
"fromField": "time",
"toField": "time"
}, {
"fromField": "trig",
"toField": "trig"
}],
"compared": false,
"categoryField": "time",
"dataLoader": {
"url": "values4.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"pathToImages": "images/",
"dataDateFormat": "JJ:NN:SS",
"categoryAxis": {
"parseDates": true
},
"panels": [{
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "trig",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
}]
}],
"periodSelector": {
"position": "top",
"dateFormat": "JJ:NN",
"inputFieldWidth": 150,
"periods": [ {
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["5ss"]
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periods": [{
"period": "HH",
"count": 1,
"label": "1 hour"
}, {
"period": "HH",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"selected": true,
"label": "MAX"
}]
},
});

Javascript amcharts stacked bar chart click handler

I need something like this javascript amCharts graph item click event
I am using AmCharts.makeChart, and cannot seem to integrate that previous answer.
Can someone please help in making the click handler work properly with this method of making amcharts?
Any help would be greatly appreciated.
Code I'm currently using:
AmCharts.makeChart("0",
{
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]]:[[value]]",
"bulletField": "Not set",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Yes",
"type": "column",
"valueField": "column-1",
"visibleInLegend": false
},
{
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "No",
"type": "column",
"valueField": "column-2",
"visibleInLegend": false
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "100%",
"axisThickness": 0,
"gridThickness": 0,
"labelFrequency": 0,
"labelsEnabled": false,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0,
"title": ""
}
],
"allLabels": [],
"balloon": {},
"legend": {
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 22,
"text": ""
}
],
"dataProvider": [
{
"category": "category 1",
"column-1": "53",
"column-2": "13"
}
]
}
);

You must store chart in a variable and then add listener for clickGraphItem event:
var chart = AmCharts.makeChart("0", {
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]]:[[value]]",
"bulletField": "Not set",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Yes",
"type": "column",
"valueField": "column-1",
"visibleInLegend": false
}, {
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "No",
"type": "column",
"valueField": "column-2",
"visibleInLegend": false
}],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"stackType": "100%",
"axisThickness": 0,
"gridThickness": 0,
"labelFrequency": 0,
"labelsEnabled": false,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0,
"title": ""
}],
"allLabels": [],
"balloon": {},
"legend": {
"useGraphSettings": true
},
"titles": [{
"id": "Title-1",
"size": 22,
"text": ""
}],
"dataProvider": [{
"category": "category 1",
"column-1": "53",
"column-2": "13"
}]
});
chart.addListener("clickGraphItem", handleClick)
function handleClick(event){
console.log(event);
}

Categories

Resources