Can't get amCharts WordPress dataloader to work - wordpress

I am trying to use Data Loader from amCharts in WordPress, but I have no success. I am starting with an default Stock Chart and replacing the JS dataset structure with the one from the github site. Then I change the corresponding field values but I always get an empty site. I am using a CSV file on the same server to make sure it is not an access to external sources problem.
Does someone maybe have a complete code?
Here is my not working code so far:
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"color": "#fff",
"dataSets": [{
"title": "MSFT",
"fieldMappings": [{
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
}],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "uploads/2015/12/table.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
}],
//"dataDateFormat": "YYYY-MM-DD",
"panels": [{
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"type": "candlestick",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
"comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
}],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
},
{
"title": "Volume",
"percentHeight": 30,
"marginTop": 1,
"columnWidth": 0.6,
"showCategoryAxis": false,
"stockGraphs": [{
"valueField": "volume",
"openField": "open",
"type": "column",
"showBalloon": false,
"fillAlphas": 1,
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"useDataSetColors": false
}],
"stockLegend": {
"markerType": "none",
"markerSize": 0,
"labelText": "",
"periodValueTextRegular": "[[value.close]]"
},
"valueAxes": [{
"usePrefixes": true
}]
}
],
panelsSettings: {
color: "#fff",
plotAreaFillColors: "#333",
plotAreaFillAlphas: 1,
marginLeft: 60,
marginTop: 5,
marginBottom: 5
},
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW",
backgroundColor: "#333",
graphFillColor: "#666",
graphFillAlpha: 0.5,
gridColor: "#555",
gridAlpha: 1,
selectedBackgroundColor: "#444",
selectedGraphFillAlpha: 1
},
categoryAxesSettings: {
equalSpacing: true,
gridColor: "#555",
gridAlpha: 1
},
valueAxesSettings: {
gridColor: "#555",
gridAlpha: 1,
inside: false,
showLastLabel: true
},
chartCursorSettings: {
pan: true,
valueLineEnabled: true,
valueLineBalloonEnabled: true
},
legendSettings: {
color: "#fff"
},
stockEventsSettings: {
showAt: "high",
type: "pin"
},
balloon: {
textAlign: "left",
offsetY: 10
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10D"
}, {
period: "MM",
count: 1,
label: "1M"
}, {
period: "MM",
count: 6,
label: "6M"
}, {
period: "YYYY",
count: 1,
label: "1Y"
}, {
period: "YYYY",
count: 2,
selected: true,
label: "2Y"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
}

Related

Returning a single element from an array with a join in azure Cosmos SQL DB

I have a query:
SELECT c.mainColour,t AS colour
FROM c
JOIN t IN c.creatorStyleMainColours
WHERE c.creatorDefaultStyleProfile = "test"
and it returns whole of the array inside the new colour object:
[
{
"colour": {
"mainColour": "black",
"colourPairings": [
"orange",
"silver",
"gold"
]
}
}
]
I need it to just return the main colour values
how do I just select the value of the "mainColour" so its a simple array like ["black","beige","white"] from the document below
I have tried:
SELECT VALUE c.mainColour,t AS colour
FROM c
JOIN t IN c.creatorStyleMainColours
WHERE c.creatorDefaultStyleProfile = "test"
but that returns a syntax error.
Here is the full document:
{
"accountId": "59951c4d-1f0b-483b-a020",
"creatorDefaultStyleProfile": "test",
"creatorDefaultStyleGender": "Female",
"creatorStyleAccountName": "",
"creatorStyleCategory": [
{
"categoryCode": "fashion",
"categoryName": "Fashion",
"categoryMetadata": {
"occasions": [
{
"occasionCode": "casual",
"occasionName": "Casual",
"occasionTypes": [
{
"occasionCode": "out",
"occasionName": "Everyday Wear"
}
]
}
],
"season": [
{
"seasonCode": "spring",
"seasonName": "Spring"
}
]
},
"id": "fashion"
}
],
"creatorStyleDescription": "",
"creatorStyleId": "Classic_Default",
"creatorStyleImages": [
{
"styleImageUrl": "https://4965fa50-6caf-11ed-8082e.png",
"styleImageCategory": "fullsize",
"styleImageResolution": {
"width": 269.25,
"height": 359
},
"styleImagePins": [
{
"itemId": "F243906F37487C78D7EB99880142B370",
"vector": {
"x": 198.125,
"y": 44.33332824707031
}
},
{
"itemId": "9B543E0DC1B05F6E9AFD0A88285AEEF9",
"vector": {
"x": 52.791656494140625,
"y": 46.33332824707031
}
},
{
"itemId": "3E6464FC1F12E3C6E435F751438F1468",
"vector": {
"x": 120.45832824707031,
"y": 320.3333282470703
}
},
{
"itemId": "1CD6065A4C7A0BD66E44DC8A62448534",
"vector": {
"x": 115.45832824707031,
"y": 192
}
}
]
}
],
"creatorStyleItems": [
{
"creatorStyleItemId": "9B543E0DC1B05F6E9AFD0A88285AEEF9",
"ItemType": "Chest",
"creatorStyleItemName": "t-shirt",
"creatorStyleItemImages": [
{
"imageUrl": "https://images/23660493-1-white?$XXL$",
"imageCategory": "thumbnail"
}
]
},
{
"creatorStyleItemId": "F243906F37487C78D7EB99880142B370",
"ItemType": "Chest",
"creatorStyleItemName": "chunky knit cardigan",
"creatorStyleItemImages": [
{
"imageUrl": "https://images/14399002-1-black?$XXL$",
"imageCategory": "thumbnail"
}
]
},
{
"creatorStyleItemId": "1CD6065A4C7A0BD66E44DC8A62448534",
"ItemType": "Leg",
"creatorStyleItemName": " mom jeans",
"creatorStyleItemImages": [
{
"imageUrl": "https://images-blue/202501450-1-denimblack?$XXL$",
"imageCategory": "thumbnail"
}
]
},
{
"creatorStyleItemId": "3E6464FC1F12E3C6E435F751438F1468",
"ItemType": "Feet",
"creatorStyleItemName": "trainers",
"creatorStyleItemImages": [
{
"imageUrl": "https://images./203112454-1-brown?$XXL$",
"imageCategory": "thumbnail"
}
]
}
],
"creatorStyleMainColours": [
{
"mainColour": "black",
"colourPairings": [
"beige",
"grey",
"white"
]
},
{
"mainColour": "beige",
"colourPairings": [
"black",
"grey",
"white"
]
},
{
"mainColour": "white",
"colourPairings": [
"beige",
"grey",
"black"
]
}
],
"creatorStyleMerchantGroup": "test1",
"creatorStyleName": "",
"creatorStyleProfiles": [
{
"id": "",
"profileAccountId": "test1",
"profileId": "test1",
"profileIsDefault": false,
"profileName": "classic",
"profileBiometric": {
"biometricName": "",
"biometricGender": "Female",
"biometricHeight": [
],
"biometricAgeRange": [
],
"biometricHairColour": [
],
"biometricSkinColour": [
],
"biometricBodyShape": [
],
"biometricMeasurement": {
}
},
"profilePersona": {
"personaName": "",
"personaDressSense": [
],
"personaInterests": [
],
"personaStyleIcons": [
],
"personaColours": [
]
}
}
],
"creatorStyleStatus": {
"styleStatusId": "nonpublished",
"styleStatusDescription": ""
},
"id": "classicStyle1",
"_rid": "IW43AJ08x+8BAAAAAAAAAA==",
"_self": "dbs/IW43AA==/colls/IW43AJ08x+8=/docs/IW43AJ08x+8BAAAAAAAAAA==/",
"_etag": "\"97005ae1-0000-1500-0000-638523be0000\"",
"_attachments": "attachments/",
"_ts": 1669669822
}

ELASTICSEARCH - Aggregations not working on string field

Elastic search extraction query is returning expected results in hints section of output but aggregation on field returning empty response
output without aggregation
{
"_shards": {
"total": 45,
"failed": 0,
"successful": 45,
"skipped": 0
},
"hits": {
"hits": [
{
"_index": "logstash-wander-2022.08.17",
"_type": "fluentd",
"_source": {
"outboundResponseStatus": "SERVICE_UNAVAILABLE"
},
"_id": "Y2NlNjkzZmEtNjZlMi00NWY4LTllNWUtOWZmNWRhMjRkMzA3",
"sort": [
1660695790244
],
"_score": null
},
{
"_index": "logstash-wander-2022.08.17",
"_type": "fluentd",
"_source": {
"outboundResponseStatus": "CONFLICT"
},
"_id": "OWNmZTFiOWEtYWQ2Mi00OGViLWFmY2EtMGQ4ZDg1NzRiYWNk",
"sort": [
1660695781810
],
"_score": null
}
],
"total": 25,
"max_score": null
},
"took": 506,
"timed_out": false
}
But adding below aggregation along with query returning empty response
"aggregations": {
"outboundResponseStatus": {
"significant_terms": {
"field": "outboundResponseStatus",
"keyed": true
}
}
}
Below is the query
{
"size": 500,
"query": {
"bool": {
"must": [
{
"query_string": {
"query": "search string",
"default_field": "*",
"fields": [],
"type": "best_fields",
"default_operator": "or",
"max_determinized_states": 10000,
"enable_position_increments": true,
"fuzziness": "AUTO",
"fuzzy_prefix_length": 0,
"fuzzy_max_expansions": 50,
"phrase_slop": 0,
"analyze_wildcard": true,
"escape": false,
"auto_generate_synonyms_phrase_query": true,
"fuzzy_transpositions": true,
"boost": 1
}
},
{
"match_phrase": {
"message": {
"query": "search string",
"slop": 0,
"zero_terms_query": "NONE",
"boost": 1
}
}
},
{
"range": {
"#timestamp": {
"from": "now-10m",
"to": "now",
"include_lower": true,
"include_upper": true,
"format": "epoch_millis",
"boost": 1
}
}
}
],
"adjust_pure_negative": true,
"boost": 1
}
},
"version": true,
"_source": {
"includes": [
"outboundResponseStatus",
"outboundUri",
"message"
],
"excludes": []
},
"stored_fields": "*",
"script_fields": {},
"sort": [
{
"#timestamp": {
"order": "desc",
"unmapped_type": "boolean"
}
}
]
}
How to get aggregations based on field in hints results?

How do I create custom output object in Kusto

I have array like below as one of the properties for my object. I'd like to extract certain fields and return it still as array in output. For example I want only name and storageAccountType to be returned like below
Desired Output
[
{
"name": "Data",
"storageAccountType": "Standard_LRS"
},
{
"name": "Disk2",
"storageAccountType": "Standard_LRS"
}
]
Input Array
[
{
"name": "Data",
"createOption": "Attach",
"diskSizeGB": 10,
"managedDisk": {
"id": "/subscriptions/24ba3e4c-45e3-4d55-8132-6731cf25547f/resourceGroups/GREG/providers/Microsoft.Compute/disks/Data",
"storageAccountType": "Standard_LRS"
},
"caching": "None",
"toBeDetached": false,
"lun": 0
},
{
"name": "Disk2",
"createOption": "Attach",
"diskSizeGB": 10,
"managedDisk": {
"id": "/subscriptions/24ba3e4c-45e3-4d55-8132-6731cf25547f/resourceGroups/GREG/providers/Microsoft.Compute/disks/Disk2",
"storageAccountType": "Standard_LRS"
},
"caching": "None",
"toBeDetached": false,
"lun": 1
}
]
here's a direction you could follow (which assumes you actually needs to get back arrays and not to have each element in the array in its own row. if the latter is good, remove the rows with the comments (// *)
datatable(some_value:string, d:dynamic) // just a sample data set with 2 records
[
"hello", dynamic([
{
"name": "Data",
"createOption": "Attach",
"diskSizeGB": 10,
"managedDisk": {
"id": "/subscriptions/24ba3e4c-45e3-4d55-8132-6731cf25547f/resourceGroups/GREG/providers/Microsoft.Compute/disks/Data",
"storageAccountType": "Standard_LRS"
},
"caching": "None",
"toBeDetached": false,
"lun": 0
},
{
"name": "Disk2",
"createOption": "Attach",
"diskSizeGB": 10,
"managedDisk": {
"id": "/subscriptions/24ba3e4c-45e3-4d55-8132-6731cf25547f/resourceGroups/GREG/providers/Microsoft.Compute/disks/Disk2",
"storageAccountType": "Standard_LRS"
},
"caching": "None",
"toBeDetached": false,
"lun": 1
}
]), "world", dynamic([
{
"name": "Data3",
"createOption": "Attach",
"diskSizeGB": 10,
"managedDisk": {
"id": "/subscriptions/24ba3e4c-45e3-4d55-8132-6731cf25547f/resourceGroups/GREG/providers/Microsoft.Compute/disks/Data",
"storageAccountType": "Standard_LRS"
},
"caching": "None",
"toBeDetached": false,
"lun": 0
},
{
"name": "Disk23",
"createOption": "Attach",
"diskSizeGB": 10,
"managedDisk": {
"id": "/subscriptions/24ba3e4c-45e3-4d55-8132-6731cf25547f/resourceGroups/GREG/providers/Microsoft.Compute/disks/Disk2",
"storageAccountType": "Standard_LRS"
},
"caching": "None",
"toBeDetached": false,
"lun": 1
}
])
]
// --> answer starts here <--
| extend r = rand() // *
| mv-apply d on (
project d = pack("name", d.name, "storageAccountType", d.managedDisk.storageAccountType)
)
| summarize d = make_list(d) by r, some_value // *
| project-away r // *

How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?

I'm trying to create a hover effect for two bar at the same time, is there any possibility to achieve this by using any existing method or external css to achieve this kind of hover effect, on hover event present in highcharts I can only change the colour of the single bar image.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/xrange.js"></script>
<div id="container" style="width: 100%; height: 100px"></div>
Highcharts
Highcharts.setOptions({
time: {
useUTC: false
}
});
Highcharts.chart('container',{
chart:{
type : 'xrange',
backgroundColor : '0C0D19',
renderTo:'container',
marginRight: 100,
},
colors : ['#45AD59','#6699FF'],
title : { text : '' },
credits : { enabled : false },
legend : { enabled : false },
exporting : {
buttons : {
contextButton : {
enabled : false
}
}
},
plotOptions : {
series : {
cursor : 'pointer',
}
},
tooltip : { enabled: false },
xAxis : {
type : 'datetime',
opposite : true,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickLength: 0,
tickInterval:3600*1000,
gridLineColor:'#2c2d39',
gridLineWidth:1,
min : 1545281770000,
minPadding: 0,
dateTimeLabelFormats : {
millisecond: '%I:%M %P',
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
crosshair : {
snap : false,
zIndex : 100,
label: {
enabled: true,
format: '{value:%I:%M %P}'
}
},
labels : {
align : 'left',
style : {
color : 'rgba(255, 255, 255, 0.7)',
fontSize : '12px'
}
},
},
yAxis: {
title: {
text: ''
},
plotBands: [{
from: -0.21001,
to: 0.3291,
color: '#00401f'
},{
from:0.5570,
to:1.275,
color:'#2f4776'
}],
categories: ['Reported','Tracked'],
reversed: true,
labels:{
align:'center',
style:{
color:'rgba(255, 255, 255, 0.7)',
fontSize:'12px'
},
formatter: function() {
return this.value + '<img></img>';
},
useHTML: true
},
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
pointWidth: 20,
borderWidth:0,
borderRadius:0,
data : [{
"x": 1545281770000,
"x2": 1545284950000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 0
}, {
"x": 1545285388000,
"x2": 1545291448000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 1,
}, {
"x": 1545303407000,
"x2": 1545312167000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 2,
}, {
"x": 1545312218000,
"x2": 1545312338000,
"y": 1,
"floor": 3,
"room": "3000",
"value": true,
"hoverId": 3,
}, {
"x": 1545314138000,
"x2": 1545314738000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 4,
}
,{
x:1545281701745,
x2:1545285267354,
y:0,
},
{
x:1545285327157,
x2:1545292261051,
y:0,
},{
x:1545303345999,
x2:1545314757609,
y:0,
className:'manual',
}
],
dataLabels: {
enabled: false
}
}]
})
CSS
#container .highcharts-grid.highcharts-yaxis-grid path{
display: none;
}
#container .highcharts-axis.highcharts-xaxis path{
display: none;
}
#container .highcharts-point.highcharts-point.highcharts-color-0 rect{
height: 15px;
y: 8;
}
#container .highcharts-point.highcharts-point.highcharts-color-1 rect{
y: 27;
height: 18px;
}
Here is a JSFiddle
You can make it using Highcharts.SVGRenderer which allows you to plot a rectangle and Highcharts.SVGElement.on method which allows you to add events on SVG elements (for example series group). Check demo and code posted below.
Code:
chart: {
type: 'xrange',
backgroundColor: '0C0D19',
renderTo: 'container',
marginRight: 100,
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesSvg = series.group,
seriesSvgBBox = seriesSvg.getBBox(),
width = 80,
height = seriesSvgBBox.height,
y = chart.plotTop + seriesSvgBBox.y,
x,
tooltip;
seriesSvg.on('mousemove', function(e) {
if (tooltip) {
tooltip.destroy();
}
x = e.offsetX - width / 2
tooltip = chart.renderer
.rect(x, y, width, height)
.attr({
fill: 'rgba(255, 255, 255, 0.2)'
})
.css({
'pointer-events': 'none'
})
.add()
.toFront();
});
seriesSvg.on('mouseout', function(e) {
tooltip.destroy();
tooltip = null;
});
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on

AmCharts: Limit Y-Axs -Range and cut out non-periodical gaps

I have a problem with amCharts after trying a lot of settings.
I want to limit the range of the y-axis from 1-150 and do not want amCharts to plot data points with the value 0. There is no time-period in the x-range. I created a fiddle of my actual result: http://jsfiddle.net/zt9exqwq/5/
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
Here's what it actual looks like:
And here's what I want to have:
Has anybody an idea? Thanks very much.
Value axis
To set the the scale for the value axis, we can use its minimum and maximum properties. However, even if we set those two, the chart will try to round up value axis increments to "pretty" numbers, hence it will still display 0.
To work around that we will use another value axis property strictMinMax. It will ensure that our value axis scale is crisply cut at 0 and 15 values.
However we now lose the first and last labels. We'll use guides to add labels for 1 and 150 values.
Combined code for the above is this:
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}]
Gaps
Zero is a valid number and a value. If you need to display a gap in place of the zero-value data points, you will need to set the value for those to null.
If you can't replace that directly in your data, you can add some custom code to iterate through the data and replace zero values with null:
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
In order to display gaps, we will also need to set connect: false for the graph.
And since your data is at irregular date intervals, we'll also set gapPeriod to some larger period (say 10) so that gaps are not displayed whenever you have a distance bigger than 1 day between two adjacent data points.
Here's combined working chart:
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"connect": false,
"gapPeriod": 10
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

Resources