I have an array of timestamps like [1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450].
Here there are 3 values for 1485343314150, 2 values for 1485343314300 and 1 value each for 1485343314400 and 1485343314450
So while plotting on the graph
X = [1485343314150,1485343314300,1485343314400,1485343314450]
Y = [3,2,1,1]
I need a way to represent these X and Y such that Xs values are converted to a human readable datetime like 24-February 5:25 PM.
Can it be done via Chart.js or amCharts? I searched but couldn't find anything.
In AmCharts you can set parseDates to true in your categoryAxis (which is the same as the X axis) if you're using a serial chart (line, smoothed line, or column). AmCharts' XY chart can also handle dates as well by setting one of the valueAxes' type to "date", but the chart types available are limited to lines/bullets
When you enable parseDates, the chart will automatically format them to use readable date strings. You can adjust the format by specifying your own dateFormats array in the categoryAxis. You can find more information on that here.
Here's an example using a serial chart. Your data frequency is in incrments of milliseconds, so I set the categoryAxis' minPeriod to accommodate:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"timestamp": 1485343314150,
"value": 3
},{
"timestamp": 1485343314300,
"value": 2
},{
"timestamp": 1485343314400,
"value": 1
},{
"timestamp": 1485343314450,
"value": 1
}],
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "value"
}],
"categoryField": "timestamp",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff"
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<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>
<div id="chartdiv"></div>
You can further format the axis' output through the dateFormats property as mentioned before. In this scenario, you'll want to change the string in the fff period. Depending on the amount of data, you may need to change the larger periods as well.
Related
Getting quite frustrated with highcharts. I have charts with 2 y axes. I want the zeros to be aligned for the chart to make sense. Highcharts doesn't have this functionality out of the box so I've built in my own logic to handle this, which calculates an appropriate min and max for both axes.
I use these calculated values to set config.yAxis.min and config.yAxis.max. Unfortunately highcharts tries to be smart and re-calculate new min and maxes. This is especially true when I resize the browser window.
I've looked everywhere and can't find a way to forcefully set min and max. Highcharts folks, is there no way to do this? Without this, charts with double axis become completely useless.
Here's a JSFiddle: jsfiddle.net/ashokraju/5c676o1j/8
It's possible if you use yAxis.tickPositions API like that :
"yAxis": [{
"id": "quantity",
"labels": {},
"title": {
"text": "Paying Customers",
"margin": 25
},
"max": 783,
"min": -401,
"opposite": false,
"gridLineColor": "#F7F6FC",
tickPositions: [-1000, -500, 0, 500, 1000, 1500]
}, {
"id": "ratio",
"labels": {
"format": "{value}%"
},
"title": {
"text": null
},
"max": 13450,
"min": -6725,
"opposite": true,
"gridLineColor": "transparent",
tickPositions: [-10000, -5000, 0, 5000, 10000, 15000]
}]
Fiddle
Edit :
You're calculating the min and max so maybe you will have to calculate the ticks too.
Try this:
"max":783,
"min":-401,
"startOnTick": false,
"endOnTick": false,
https://api.highcharts.com/highcharts/yAxis.endOnTick
The tick options force a series to start or end at the specified min/max values.
You can also try zero-align y-axes Highcharts plugin:
https://www.highcharts.com/products/plugin-registry/single/42/Zero-align%20y-axes
I am new to amCharts and javascript. My html file looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="">
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<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>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "output.json",
"format": "json"
},
"valueField": "count",
"titleField": "date"
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>
</html>
My json file:
[{
"date": "2015-11-17",
"count": "1"
}, {
"date": "2015-11-28",
"count": "1"
}, {
"date": "2016-01-13",
"count": "1"
}, {
"date": "2016-01-22",
"count": "1"
}]
By using http-server -o, Local host opens up in the Chrome browser.
http://127.0.0.1:8080/test2.html
test2.html and output.json are in the same directory
I can see from the chromeconsole, it is loading the json file properly.
I am not able to figure out why the data is not showing up in the chart. I tried browsing and looking at other examples, kind of stuck.
Your chart is missing a few pieces that you can find in any of the line/column demos on the amCharts site. Here's what you're missing:
You're missing a graphs array. This is required for a serial chart (it looks like you started from a pie chart, which is completely different). Each graph object in the graphs array contains a valueField.
Your chart is missing a categoryField.
It looks like your data has dates, so you'll need to create a categoryAxis and set parseDates to true. You'll also want to set a dataDateFormat string in the top level of your chart config as well so that the chart knows how to parse your dates consistently across all browsers.
Assuming you want a line chart, here's the bare minimum makeChart call you need for your data:
AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "output.json",
"format": "json"
},
"graphs": [{
"valueField": "count"
}],
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD",
"categoryAxis": {
"parseDates": true
}
});
Demo
I'm currently building an application in which I want to display histograms. Problem is that I can't manage to properly render an histogram with zingchart... I want ticks of the scale-x to be place on each side of data points, not centered on them as they represent the bounds of histogram bins.
Below is the python function that computes data to create the histogram using the histogram function on numpy package.
from numpy import histogram
def graph(self):
results = sorted(results, key=lambda x: mark)
marks = [result.mark for result in results]
maximum = 20
divisor = maximum
step = maximum / divisor
data, bin_edges = histogram(a=marks, range=(0, maximum), bins=divisor)
data = data.tolist()
return {'data': data, 'divisor': divisor, 'maximum': maximum, 'step': step}
Then this histogram data are used in the view to render the zing chart graph (This is a Jinja2 template as I use Flask-framework) :
<script>
var chartData = {
"type": "bar",
"plot": {
"aspect": "histogram",
},
"plotarea": {
"adjust-layout": true,
},
"series": [
{"values": {{ graph['data'] }}},
],
"scale-x": {
"progression": "lin",
"min-value": 0,
"max-value": {{ graph['maximum'] }},
"step": {{ graph['step'] }},
"decimals": 1,
},
};
zingchart.render({
"id": "graph1",
"data": chartData,
"width": "100%",
"height": "400px",
});
</script>
EDIT
To offset the scale-x number position, you just add the offsetX attribute to the scaleX.item. Here's an example...
scaleX: {
item: {
offsetX: 20
}
}
The default behavior of ZingChart histograms is to have the tick marks placed on each side of the data point. I placed some dummy data in your chart JSON and rendered it out. This is what it shows.
You can view the chart here: http://demos.zingchart.com/view/GQEQHWVV
Can you provide more insight into the problem you're trying to solve? There may be issues with the data you're passing. As far as I can tell, ZingChart renders histograms properly.
FYI: I'm on the ZingChart team
I've implemented a regular AmSerial Chart to visualise number of users using an app per month. The library, however seems to rescale by changing the min value on Value Axis to larger values as the highest value keeps increasing. What we want is to set Value axis' starting value to 0 and also be able to change the magnitude of increments along the axis, for example, [0, 1000,2000,...] or [0,5000,10000,...]
I've tried to look at the docs on their site and the only thing that let me customise Value axis was ValueAxesSettings, but it doesn't let me do the above.
For the record, ValueAxesSettings is a feature for Stock Chart product and is completely ignored by regular serial charts.
To set the scale to start from 0 for value axis, use its minimum setting.
As far as increments go, you have several options.
Option 1: Manipulate grid count
If you know the range of your values, you can set both minimum and maximum properties of the value axis, then set autoGridCount: false as well as gridCount so that range divides up into increments that you need.
For example, if you have a range of values from 0 to 1000 and want to display a label/grid line at every 1000, you could do something like this:
"valueAxes": [{
"minimum": 0,
"maximum": 10000,
"autoGridCount": false,
"gridCount": 10
}]
Option 2: Use guides
If you need absolute control over which labels are placed, you can disable value axis' labels (labelsEnabled: false) and grid (gridAlpha: 0) and use guides.
Those are horizontal lines with labels, placed at values you specify:
"valueAxes": [ {
"labelsEnabled": false,
"gridAlpha": 0,
"guides": [{
"value": 5000,
"label": "5000",
"inside": false,
"lineAlpha": 0.5
}, {
"value": 10000,
"label": "10000",
"inside": false,
"lineAlpha": 0.5
}, {
"value": 15000,
"label": "15000",
"inside": false,
"lineAlpha": 0.5
}]
} ]
The above will place lines and labels at values 5000, 10000 and 15000.
I have json object which i pass to AmCharts.makeChart() function as a data provider and it shows proper graph in firefox, chrome and ie but not in safari
I also see that json data in console but still graph not comes
I had used amchart.js, serial.js
Thanks in advance...
I had the same problem. Passing "dataDateFormat": "YYYY-MM-DD HH:NN:SS" to the AmCharts.makeChart command solved the issue for me. An example graph code would look like this:
var chart1 = AmCharts.makeChart("chartdiv1", {
"type": "serial",
"theme": "dark",
"pathToImages": "amcharts/images/",
"dataProvider": chartData,
"valueAxes": [{
"position": "left",
"title": "temperature (\xB0C)"
}],
"graphs": [{
"fillAlphas": 0.4,
"valueField": "temp"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"categoryField": "time",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"title": "date"
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS"
});
In my case, the JSON object was created from a mysql database from a php script. The database contained epoch timestamps which I converted into date time format in mysql by using a FROM_UNIXTIME(time) select query. This gives me dates like 2014-10-06 22:04:16. Apparently, Chrome and firefox can handle such date strings natively but safari cannot.
This is a Safari specific issue.
Adding dataDateFormat: YYYY-MM-DD HH:NN:SS to AmCharts.makeChart solved the issue as answered by Thawn here:
https://stackoverflow.com/a/26795224/4448807