I am trying to plot error bars using amCharts API. I am not able to set the yAxis limit as a result of which, my error bars are tiny compared to actual bars.
var valueAxis = new AmCharts.ValueAxis();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"year": "C",
"value": 85.07 ,
"error": 0.57,
"lower": 84.50,
"upper": 85.64
}, {
"year": "V1",
"value": 84.67 ,
"error": 0.58,
"lower": 84.09,
"upper":85.25
}, {
"year": "V2",
"value": 86.76 ,
"error": 0.58,
"lower": 86.18,
"upper":87.34
}, {
"year": "V3",
"value": 84.55 ,
"error": 0.58,
"lower": 83.97,
"upper":85.13
}],
"balloon": {
"textAlign": "left"
},
"valueAxes": [{
"id":"v1",
"axisAlpha": 0
}],
"startDuration": 1,
"graphs": [{
"balloonText": "value:<b>[[value]]</b><br>error:<b>[[error]]</b><br>lower:<b>[[lower]]</b><br>upper:<b>[[upper]]</b>",
"labelText": "[[value]]",
"type": "column",
"bullet": "yError",
"bulletColor": "#000",
"errorField": "error",
"lineThickness": 2,
"valueField": "value",
"bulletAxis": "v1",
"fillAlphas": 1
}],
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"graphBulletSize": 1,
"zoomable": false
},
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"min":60
},
"exportConfig": {
"menuTop":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": 'http://www.amcharts.com/lib/3/images/export.png',
"format": 'png'
}]
}
});
Here is the jsFiddle
http://jsfiddle.net/amcharts/hD58C/utm_source=website&utm_medium=embed&utm_campaign=hD58C
Related
I am new to threejs and I wanted to know if I can add a random jpg picture as my texture. I figured out how to add materials to my model, but I cant really figure out how to add texture. This is a spinet of my json model and my code for changing texture:
"textures": [],
"animations": [{
"fps": 29,
"tracks": [{
"type": "vector3",
"keys": [{
"value": [0.000392,0.249157,-0.004437],
"time": 0
},{
"value": [0.000392,0.249157,-0.004437],
"time": 120
},{
"value": [0.000392,0.249157,-0.004437],
"time": 240
},{
"value": [0.000392,0.249157,-0.004437],
"time": 360
}],
"name": "CameraPreset.position"
},{
"type": "vector3",
"keys": [{
"value": [1,1,1],
"time": 0
},{
"value": [1,1,1],
"time": 120
},{
"value": [1,1,1],
"time": 240
},{
"value": [1,1,1],
"time": 360
}],
"name": "CameraPreset.scale"
},{
"type": "quaternion",
"keys": [{
"value": [0,0.707107,0.707107,0],
"time": 0
},{
"value": [-0.612372,-0.353553,-0.353553,0.612372],
"time": 120
},{
"value": [-0.612372,0.353553,0.353553,0.612372],
"time": 240
},{
"value": [-0,0.707107,0.707107,0],
"time": 360
}],
"name": "CameraPreset.quaternion"
}],
"name": "default"
}],
"materials": [{
"uuid": "36DB0D58-F5EE-366F-9C7F-307076036ACA",
"side": 2,
"blending": "NormalBlending",
"name": "lambert1",
"specular": 1508356,
"shininess": 50,
"emissive": 0,
"ambient": 12531511,
"depthTest": true,
"color": 12531511,
"vertexColors": false,
"depthWrite": true,
"type": "MeshPhongMaterial"
}],
"images": [],
"metadata": {
"generator": "io_three",
"type": "Object",
"version": 4.4
}
This is where I loaded my Json model:
var mesheto;
var loader = new THREE.ObjectLoader();
loader.load(
'models/shirt.json',
function (object) {
globalObject = object;
object.name = 'shirt';
mesheto = object;
scene.add(object);
GameLoop();
}
);
This is the onclick function that changes the texture:
function loadimg(string) {
globalObject.traverse( function ( child ) {
console.log("clicked");
if (child instanceof THREE.Mesh) {
console.log(child instanceof THREE.Mesh);
child.material.map = THREE.TextureLoader('../img/models/check.jpg');
child.material.needsUpdate = true;
}
});
// polo_model.material.map = THREE.TextureLoader('models/check.jpg');
}
You have to add a .load to your new THREE.TextureLoader().load("name of your texture.jpg").
I want to set a hidden ID for each segment in an am-charts gantt chart. So when the user double clicks a segment i want to retrieve data using that ID and show in a popup window.
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": "2018-01-01",
"end": "2018-01-10",
"color": "#f00",
"task": "Task #1",
"key": "1000"
}, {
"start": "2018-01-12",
"end": "2018-01-20",
"color": "#00f",
"task": "Task #2",
"key": "1001"
}, {
"start": "2018-01-25",
"end": "2018-02-10",
"color": "33800F",
"task": "Task #3",
"key": "1002"
} ]
} ]
I am able to get the Category value but don't know how to get Segments values.
Any example would be a great help
If you're using clickGraphItem for your double-click functionality, you can access the segment information through the graph's segmentData property in the event object:
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert(e.graph.segmentData.key)
}
}]
Demo below:
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "hh",
"dataDateFormat": "YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.5,
"valueAxis": {
"type": "date",
"minimum": 7,
"maximum": 31
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1",
"key": "1001"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1002"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3",
"key": "1003"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1004"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3",
"key": "1005"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1",
"key": "1006"
}]
}, {
"category": "Ben",
"segments": [{
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1007"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4",
"key": "1008"
}]
}],
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert("key: " + e.graph.segmentData.key)
}
}]
});
body,
html {
width: 100%;
height: 100%;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv"></div>
I am using AmCharts with a legend and chart cursor enabled however I don't want the graph values to appear in the legend on mouseover. How do I disable that? Please see my screenshot.
Chart Image
Assuming you're using the regular serial chart (post your code next time), you can suppress the legend value on mouseover by setting the legend's valueText to an empty string, e.g.
AmCharts.makeChart("chartdiv", {
// ...
legend: {
valueText: "",
// ...
},
// ...
});
Demo below:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"legend": {
"useGraphSettings": true,
"valueText": ""
},
"dataProvider": [{
"year": 1930,
"italy": 1,
"germany": 5,
"uk": 3
}, {
"year": 1934,
"italy": 1,
"germany": 2,
"uk": 6
}, {
"year": 1938,
"italy": 2,
"germany": 3,
"uk": 1
}, {
"year": 1950,
"italy": 3,
"germany": 4,
"uk": 1
}, {
"year": 1954,
"italy": 5,
"germany": 1,
"uk": 2
}, {
"year": 1958,
"italy": 3,
"germany": 2,
"uk": 1
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 6,
"minimum": 1
}],
"startDuration": 0,
"graphs": [{
"balloonText": "place taken by Italy in [[category]]: [[value]]",
"bullet": "round",
"title": "Italy",
"valueField": "italy",
"fillAlphas": 0
}, {
"balloonText": "place taken by Germany in [[category]]: [[value]]",
"bullet": "round",
"title": "Germany",
"valueField": "germany",
"fillAlphas": 0
}, {
"balloonText": "place taken by UK in [[category]]: [[value]]",
"bullet": "round",
"title": "United Kingdom",
"valueField": "uk",
"fillAlphas": 0
}],
"chartCursor": {
"zoomable": false
},
"categoryField": "year"
});
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px"></div>
I am facing problem with scale on vertical axis like 2,4,6,8,10 etc or 5,10,15,20. I have achieved this on one axis (name Iron in ppm) but how to achieve this on second y-axis?
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"id": "SweepGraph",
"legend": {
"marginTop": 150,
"useGraphSettings": true
},
"synchronizeGrid": synchronizeGridFlag,
"dataProvider": SortedChartData,
"valueAxes": [{
"id": "BaseNumber",
"axisColor": "#0000ff",
"axisThickness": 2,
"axisAlpha": 1,
"position": "right",
"title": "BaseNumber in mgKOH/g",
"minimum" : BaseNumberMinimum,
"maximum": BaseNumberMaximum,
"autoGridCount": false,
"gridCount": 100,
"synchronizationMultiplier": ironLabelFrequency,
"strictMinMax": true,
//"synchronizationMultiplier": BaseNumberLabelFrequency
}, {
"id": "Iron",
"maximum": IronMaximum,
"minimum": IronMinimum,
"minMaxMultiplier": 0,
"precision": 0,
"synchronizationMultiplier": ironLabelFrequency,
"synchronizeWith": "BaseNumber",
"strictMinMax": true,
"axisAlpha": 1,
"axisColor": "#ff0000",
"axisThickness": 2,
"gridCount": 100,
"gridThickness": 0,
"minHorizontalGap": 0,
"minVerticalGap": 0,
"title": "Iron in ppm"
}],
"graphs": AmCharts.parseJSON(graphData),
"chartScrollbar": {},
"chartCursor": {
"cursorPosition": "pointer",
"oneBalloonOnly": true,
"valueZoomable":true
},
"guides":GlobalSweepGuides,
"categoryField": "FeedRate",
"categoryAxis": {
"gridPosition": "start",
"title": "ACC Value in (g/Kw/h)/(%wt)",
"axisColor": "#DADADA",
"minorGridEnabled": true,
"autoGridCount": false,
"gridCount": 12
},
"export": {
"enabled": true,
"menu": [],
"libs": {
"path": "http://www.amcharts.com/lib/3/plugins/export/libs/"
},
"position": "bottom-right"
}
});
Here is jsFiddle url:https://jsfiddle.net/HARSHAD557/jgz289fw/
Please solve this problem.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"categoryField": "date",
"categoryAxis": {
"parseDates": false,
"gridAlpha": 0.15,
"minorGridEnabled": true,
"axisColor": "#DADADA",
"title": 'Timp'
},
"valueAxes": [{
"axisAlpha": 0.2,
"id": "v1",
}],
"graphs": [{
"title": "Starea echipamentului",
"id": "g1",
"valueAxis": "v1",
"valueField": "starea",
"autoGridCount": true,
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderAlpha": 1,
"lineThickness": 2,
"lineColor": "#b5030d",
"negativeLineColor": "#0352b5",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>",
}],
"titles": [
{
"size": 15,
"text": window.location.href.split('?')[1].split('=')[1].replace('%20',' ')
}
],
"legend": {
"useGraphSettings": true
},
"chartCursor": {
"fullWidth": true,
"cursorAlpha": 0.1
},
"chartScrollbar": {
"scrollbarHeight": 40,
"color": "#FFFFFF",
"autoGridCount": true,
"graph": "g1"
},
"mouseWheelZoomEnabled": true,
"responsive": {
"enabled": true
},
"export": {
"enabled": true,
"libs": {
"path": "http://amcharts.com/lib/3/plugins/export/libs/"
}
}
});
So my graph on y-axis, has only 0, 0.5 and 1 values. If i have part of the graph where i have 0.5 on y-axis it apeears values between 0.5 (0.4 min and 0.6 max). How ever i want my graph on y axis to display 0 and 1, not 1.2 . Any ideas?
Use minimum and maximum properties for the value axis:
"valueAxes": [{
"axisAlpha": 0.2,
"id": "v1",
"minimum": 0,
"maximum": 1
}],
That should do the trick.
In some rare cases, you might also want to set strictMinMax. But for this particular case, you're probably not going to need it.