I am using the following pykcahrts example
<head>
<link rel="stylesheet" type="text/css" href="pykcharts.1.1.0.min.css">
<script src="pykcharts.1.1.0.min.js"></script>
</head>
<body>
<div id="my_chart"></div>
<script>
window.PykChartsInit = function (e) {
var k = new PykCharts.multiD.scatter({
//Chart Container Id
"selector": "#my_chart",
//Data file path
"data": "https://s3-ap-southeast-1.amazonaws.com/chartstore.io-data/scatter.csv",
//Chart mode
"mode": "default",
//Chart Size Parameters
"chart_width": 620,
"chart_height": 400,
"chart_margin_left": 50,
"chart_margin_right": 25,
"chart_margin_top": 35,
"chart_margin_bottom": 35,
//Chart color parameters
"chart_color": [
"#255aee",
"#517bf1",
"#7c9cf5",
"#a8bdf8"
],
//X-Axis parameters
"axis_x_enable": "yes",
"axis_x_title": "",
"axis_x_position": "bottom",
"axis_x_pointer_position": "bottom",
"axis_x_line_color": "#1D1D1D",
"axis_x_pointer_size": 12,
"axis_x_pointer_color": "#1D1D1D",
"axis_x_no_of_axis_value": 5,
"axis_x_pointer_padding": 6,
"axis_x_outer_pointer_length": 0,
"axis_x_pointer_values": [],
"axis_x_time_value_datatype": "",
"axis_x_time_value_interval": 0,
//Y-Axis parameters
"axis_y_enable": "yes",
"axis_y_title": "",
"axis_y_position": "left",
"axis_y_pointer_position": "left",
"axis_y_line_color": "#1D1D1D",
"axis_y_pointer_size": 12,
"axis_y_pointer_color": "#1D1D1D",
"axis_y_no_of_axis_value": 5,
"axis_y_pointer_padding": 6,
"axis_y_pointer_values": [],
"axis_y_outer_pointer_length": 0,
"axis_y_time_value_datatype": "",
"axis_y_time_value_interval": 0,
//Chart labels parameters
"label_size": 13,
"label_weight": "normal",
"label_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
//Realtime data parameters
"real_time_charts_last_updated_at_enable": "no",
"real_time_charts_refresh_frequency": 0,
//chart border parameters
"border_between_chart_elements_thickness": 1,
"border_between_chart_elements_style": "solid",
//Chart-interactive parameters
"chart_onhover_highlight_enable": "yes",
"tooltip_enable": "yes",
"transition_duration": 0,
//Chart legends parameters
"legends_enable": "yes",
"legends_display": "horizontal",
"legends_text_weight": "normal",
"legends_text_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
//Scatter parameters
"scatterplot_pointer_enable": "no",
"scatterplot_radius": 20,
"variable_circle_size_enable": "yes",
"zoom_enable": "no",
//Chart title parameters
"title_text": "Enter title here",
"title_size": 2,
"title_weight": "bold",
"title_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
"title_color": "#1D1D1D",
//Chart subtitle parameters
"subtitle_text": "Enter subtitle here",
"subtitle_size": 1,
"subtitle_weight": "normal",
"subtitle_family": "Helvetica Neue,Helvetica,Arial,sans-serif",
"subtitle_color": "black",
//Credits parameters
"credit_my_site_name": "PykCharts",
"credit_my_site_url": "http://pykcharts.com"
});
k.execute();
}
</script>
</body>
If i change "data": "https://s3-ap-southeast-1.amazonaws.com/chartstore.io-data/scatter.csv", to scatter.csv where the local file is literally the web file saved locally the plot does not appear.
has anyone experienced this?
any insight?
What worked for me:
I was using chrome and the library was not working on the local file.
I tried firefox and it works perfectly.
Related
I'm am trying to create a chart using AmCharts by loading JSON output from a webservice using the dataloader plugin from this URL http://portal.eyeo.se/datapump_amchart.ashx. For some reason, only a few items from my data are visible as you can see here: http://portal.eyeo.se/historychart
What am I doing wrong?
Code below:
<script src="amcharts/amcharts.js"></script>
<script src="amcharts//serial.js"></script>
<script src="amcharts/plugins/export/export.min.js"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js"></script>
<link rel="stylesheet" href="amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="amcharts/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "datapump_amchart.ashx",
"format": "json",
"async": "True"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"rotate": false,
"valueAxes": [{
"position": "left",
"title": "SensorVärde"
}],
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",dateformat that is wron
},
"graphs": [{
"valueField": "value1",
"id": "g1",
"bullets": "round",
"balloon": {
"drop": false,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 10,
"hideBulletsCount": 50,
"lineThickness": 5,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value1",
"fillAlphas": 0.4,
"balloonText": "<div style='margin:5px; font-size:10px;'>Sensorvärde:<b>[[value1]]</b></div>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": "HH:NN:SS, DD MMMM",
"cursorPosition": "mouse"
},
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"export": {
"enabled": true
},
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>
The issue is that your date-based data is in the wrong order. It must be in ascending order when you're using parseDates as mentioned in the documentation.
Important: If this is set to true, the data points needs to come pre-ordered in ascending order. Data with incorrect order might result in visual and functional glitches on the chart.
Fixing the order of your data should solve your problem.
I'm trying to build a simple graph. X-axis is month, Y-axis is value. Here is the demo of my graph
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataDateFormat": "DD-MM-YYYY",
"graphs": [
{
"id":"g8",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":0,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d1",
"yField":"p1",
"xAxis":"g8",
"balloonText":"<span style='font-size:18px;'>$[[d2]]</span><br>07/1/2017-12/31/2017"
}
],
"valueAxes": [
{
"id": "g8",
"axisAlpha": 1,
"gridAlpha": 1,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"centerLabelOnFullp": true,
"position": "bottom",
"type": "date",
"minp": "DD-MM-YYYY",
"markPeriodChange": false,
}
],
"dataProvider": [
{
"d1":"01/01/2017",
"p1":"5353.9000"
},{
"d1":"02/01/2017",
"p1":"5353.9000"
},{
"d1":"01/02/2017",
"p1":"5288.9500"
},{
"d1":"01/03/2017",
"p1":"6850.9900"
},{
"d1":"01/04/2017",
"p1":"5543.1900"
},{
"d1":"01/05/2017",
"p1":"5519.0100"
},{
"d1":"01/06/2017",
"p1":"6191.7500"
}
]
});
https://jsfiddle.net/noroots/xru967ha/
I don't know why, but X-axis labels missing June and all labels looks like having left offset. How can I move it to the left and show missing month?
You could add data items before and after without drawing points:
"dataProvider": [{
"d1":"01/12/2016"
}, {
"d1":"01/01/2017",
"p1":"5353.9000"
}, ...
Please check the example here: https://jsfiddle.net/xru967ha/5/
Old Answer
Please check the example below. It's using AmSerialChart and then the datePadding plugin to set 15 extra days at the beginning and the end of your data.
"categoryAxis": {
"parseDates": true,
"minPeriod": "MM",
"prependPeriods": 0.5, // add 15 days start
"appendPeriods": 0.5 // add 15 days to end
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 60,
"dataDateFormat": "DD-MM-YYYY",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true,
"dashLength": 5
}],
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor":"#67b7dc",
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "p1",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"categoryField": "d1",
"categoryAxis": {
"parseDates": true,
"minorGridEnabled": true,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"boldPeriodBeginning": false,
"markPeriodChange": false,
"minPeriod": "MM",
"prependPeriods": 0.5,
"appendPeriods": 0.5
},
"export": {
"enabled": true
},
"dataProvider": [
{
"d1":"01/01/2017",
"p1":"5353.9000"
},{
"d1":"02/01/2017",
"p1":"5353.9000"
},{
"d1":"01/02/2017",
"p1":"5288.9500"
},{
"d1":"01/03/2017",
"p1":"6850.9900"
},{
"d1":"01/04/2017",
"p1":"5543.1900"
},{
"d1":"01/05/2017",
"p1":"5519.0100"
},{
"d1":"01/06/2017",
"p1":"6191.7500"
}
]
});
#chartdiv {
width : 800px;
height : 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
I'm trying to push data dynamically to the dataProvider of XY charts in amcharts but I'm not able to achieve that.
My chart is not being drawn.
My x axis would be month and the y axis would be a numeric value.
I tried something like this
all the month and total arrays are declared . My obj looks something like this:
dataProviderObj{(date : 2015-Jan , y :80 , value :80 ),(date : 2015-Feb , y :70 , value :70)};
dataProviderObj={};
I'm trying to push like this
for(i=0;i<=month.length;i++){
dataProviderObj.push{(
"date" : month[i],
"y" : total[i],
"value" : total[i]
)}
}
dataprovider.push(dataProviderObj);
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 80,
"dataDateFormat": "YYYY-MMM",
"startDuration": 1.5,
"trendLines": [],
"balloon": {
"adjustBorderColor": false,
"shadowAlpha": 0,
"fixedPosition":true
},
"graphs": [{
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "diamond",
"id": "AmGraph-1",
"lineAlpha": 0,
"lineColor": "#b0de09",
"fillAlphas": 0,
"valueField": "value",
"xField": "date",
"yField": "y"
}, {
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "round",
"id": "AmGraph-2",
"lineAlpha": 0,
"lineColor": "#fcd202",
"fillAlphas": 0,
"valueField": "bValue",
"xField": "date",
"yField": "by"
}],
"valueAxes": [{
"id": "ValueAxis-1",
"axisAlpha": 0
}, {
"id": "ValueAxis-2",
"axisAlpha": 0,
"position": "bottom",
"type": "date",
"minimumDate": new Date(2015, 0, 01),
"maximumDate": new Date(2015, 12, 13)
}],
"allLabels": [],
"titles": [],
"dataProvider": dataprovider,
"export": {
"enabled": true
},
"chartScrollbar": {
"offset": 15,
"scrollbarHeight": 5
},
"chartCursor":{
"pan":true,
"cursorAlpha":0,
"valueLineAlpha":0
}
});
I want to get dynamic Date in x axis and dynamic numeric value in y axis with a value . Kindly help me draw such a xy Chart in amcharts
There are two issues -
1) Your logic for populating the dataprovider isn't right. You need to push directly to the dataprovider array in the loop. The logic should be:
var dataprovider = [];
for(i=0;i<=month.length;i++){
dataProvider.push({
"date" : month[i],
"y" : total[i],
"value" : total[i]
});
}
Note the placement of the parentheses and curly braces - you're calling the dataprovider array's push function with the parentheses and you're pushing an object ({ ... }) containing your data into the array.
2) "MMM" is not a supported in dataDateFormat. As you can see in AmCharts' formatting dates documentation, any format with an asterisk is not supported. Your data/dates should look like this in the resulting dataprovider array:
dataprovider = [{
"date": "2015-01",
"y": 19,
"value": 19
},
{
"date": "2015-02",
"y": 18,
"value": 18
},
// etc
]
Here's a demo with correctly formatted data
//dummy data:
var month = [ "2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"];
var total = [ 17, 16, 15, 16, 19, 20, 17, 20, 16, 19, 16, 18 ];
var dataprovider = [];
for(var i=0;i<=month.length;i++){
dataprovider.push({
"date" : month[i],
"y" : total[i],
"value" : total[i]
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 80,
"dataDateFormat": "YYYY-MM",
"startDuration": 1.5,
"trendLines": [],
"balloon": {
"adjustBorderColor": false,
"shadowAlpha": 0,
"fixedPosition": true
},
"graphs": [{
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "diamond",
"id": "AmGraph-1",
"lineAlpha": 0,
"lineColor": "#b0de09",
"fillAlphas": 0,
"valueField": "value",
"xField": "date",
"yField": "y"
}, {
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "round",
"id": "AmGraph-2",
"lineAlpha": 0,
"lineColor": "#fcd202",
"fillAlphas": 0,
"valueField": "bValue",
"xField": "date",
"yField": "by"
}],
"valueAxes": [{
"id": "ValueAxis-1",
"axisAlpha": 0
}, {
"id": "ValueAxis-2",
"axisAlpha": 0,
"position": "bottom",
"type": "date",
"minimumDate": new Date(2014, 11, 1),
"maximumDate": new Date(2016, 0, 1)
}],
"allLabels": [],
"titles": [],
"dataProvider": dataprovider,
"export": {
"enabled": true
},
"chartScrollbar": {
"offset": 15,
"scrollbarHeight": 5
},
"chartCursor": {
"pan": true,
"cursorAlpha": 0,
"valueLineAlpha": 0
}
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width 100%; height: 400px"></div>
I have a chart that refuses to render properly if I include the categoryAxis property in the chart options. By "render properly", I mean that the plot area shows up, the title is displayed, but none of the columns are rendered.
I am using an AmCharts serial chart with GrantMStevens amChartsDirective because my project is built in Angularjs.
Here is a plunk with the categoryAxis commented out. If you enable that line of code, the chart will immediately exhibit this behavior.
This chart uses text values for the categoryField and numeric vlaues for the valueField. I have another chart that uses date values for the categoryField and numeric values for the valueField and it works just fine.
I am assuming that there some interaction between the fact that this a not a categoryField is not a date value that causes this but I cannot find any combination of properties that lets me set properties on the categoryField.
This is what I WANT to do:
categoryAxis: {
gridAlpha: 0.3,
gridColor: "GRAY"
},
Does anyone know why this doesn't work?
Here is the HTML:
<html ng-app="amChartsDirectiveExample">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div ng-controller="amChartsController2" style="height: 400px; width: 600px;">
<am-chart id="mySecondChart" options="amChartOptions2"></am-chart>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/chalk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/black.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/dark.js"></script>
<script src="https://rawgit.com/ThumbsAlmighty/amCharts-Angular/master/dist/amChartsDirective.js"></script>
<script src="script.js"></script>
<script src="theme.js"></script>
</body>
And here is the JavaScript:
angular.module('amChartsDirectiveExample', ['amChartsDirective'])
.controller('amChartsController2', function($scope) {
$scope.chartData = [
{
"EscalationCount": "2",
"Area": "One"
},
{
"EscalationCount": "9",
"Area": "Two"
},
{
"EscalationCount": "5",
"Area": "Three"
},
{
"EscalationCount": "4",
"Area": "Four"
},
{
"EscalationCount": "3",
"Area": "Five"
}];
$scope.amChartOptions2 = {
type: "serial",
categoryField: "Area",
startDuration: 1,
rotate: true,
theme: "light",
trendLines: [],
//categoryAxis: {}, // Uncomment this line to break the chart.
graphs: [{
balloonText: "[[title]] for [[category]]: [[value]]",
fillAlphas: 1,
id: "AmGraph-1",
title: "Escalation Volume",
type: "column",
valueField: "EscalationCount"
}],
guides: [],
valueAxes: [{
id: "ValueAxis-1",
title: "EscalationCount",
}],
allLabels: [],
balloon: [],
legend: {
enabled: false
},
titles: [{
id: "Title-1",
size: 15,
text: "Lookit me! I rendered the Chart title!"
}],
data: $scope.chartData
};
});
For some reason the angular directive sets parseDates to true by default if you have a categoryAxis defined, which breaks if your chart isn't date-based. If you set parseDates: false in your categoryAxis, it will work.
categoryAxis: {
parseDates: false,
gridAlpha: 0.3,
gridColor: "#d3d3d3"
},
Here's your updated plunk: http://plnkr.co/edit/TYZdR0KEOAKcbHnGdTfP?p=preview
Note, I changed your gridColor to the hex equivalent. While named colors will work, if you plan on using the export plugin, you'll need to set your colors as a hex string.
I've tried to gather information about if it is possible to put a different image located at the bottom of every column in a 100% stacked bar chart.
I've seen that is possible to modify some attributes of category labels and put images just above every bar as http://www.amcharts.com/demos/column-chart-images-top/ but I need just the opposite.
In other words, I want to make the base of the column has an image loaded, replacing x axis and category label.
Thanks in advance.
Unfortunately, Category axis does not allow using images in place of category labels.
There's also no way to make the custom bullets from graphs "trickle" outside plot area.
What you can do is to drop those custom icons right down just above category axis line.
To do that you will need:
1) Add additional fields to your data that would contain all zero values.
2) Add a separate graph that would use those fields and display custom bullets.
3) Make the "bullet graph" non-stackable (stackable: false), not clustered (clustered: false), and generally invisible (visibleInLegend: false, fillAlphas: 0, lineAlpha: 0, showBalloon: false)
Here's a working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"name": "John",
"points": 35022,
"color": "#7F8DA9",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/0.gif"
}, {
"name": "Damon",
"points": 65456,
"color": "#FEC514",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/1.gif"
}, {
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/2.gif"
}, {
"name": "Mark",
"points": 13654,
"color": "#DAF0FD",
"zero": 0,
"bullet": "//www.amcharts.com//lib/3/images/3.gif"
}],
"valueAxes": [{
"maximum": 80000,
"minimum": 0,
"axisAlpha": 0,
"dashLength": 4,
"position": "left"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"type": "column",
"valueField": "points"
}, {
"showBalloon": false,
"bulletOffset": 16,
"bulletSize": 34,
"customBulletField": "bullet",
"fillAlphas": 0,
"lineAlpha": 0,
"type": "column",
"visibleInLegend": false,
"clustered": false,
"stackable": false,
"valueField": "zero"
}],
"categoryField": "name",
"categoryAxis": {
"axisAlpha": 0,
"gridAlpha": 0,
"tickLength": 0
}
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>
Additionally, if you don't need the text labels on the category axis, you can set it's labelsEnabled: false property.