Here is my StockGraph object:
"stockGraphs": [ {
"id": "g1",
"title": "someText",
"precision": 2,
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#00e673",
"fillColors": "#00e673",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"type": "olhc",
"compareable": true,
"lineThickness": 2,
"balloonText": "open: [[open]]\nclose: [[close]]\nhigh: [[high]]\nclose: [[close]]",
"fillAlphas": 0.6
} ],
When I replace the type with candlestick or line, it displays perfectly. But when I set it to olhc, nothing is displayed. chart cursors are visible thought. may be the chart is drawn but not visible for some reason.
The type needs to be ohlc. Swap the letters and it will work. Note that when comparing datasets, the compared graphs won't support ohlc as compareGraphType only supports line, column, step and smoothedLine.
Unable to get a pie chart to display using database data. My json looks good?
Sample Json
[{"id":1,"sport":"football","score":138.10,"entry":3.00,"winnings":8.00},{"id":2,"sport":"basketball","score":120.00,"entry":10.00,"winnings":20.00}]
I know the chart is connecting to the dataset, because I get a colored block with NaN as the label, with one block for each row in my database. See image. "entry" is a float in the Db and I've swapped it with another field that's an Int in the Db, as I was thinking that the float was coming back as Not A Number, but that doesn't look to be the case.
<script type="text/javascript">
AmCharts.makeChart("piechartdiv", {
"type": "pie",
"dataLoader": {
"url": "http://siteaddress.com/api/entries",
"format": "json",
"showErrors": "true"
},
"titlefield": "sport",
"valuefield": "entry",
"balloontext": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"legend": {
"align": "center",
"markertype": "circle"
}
});
</script>
<div id="piechartwrapper">
<div id="piechartdiv" style="width: 100%" class="col-md-6 col-md-offset-0"></div>
</div>
Your fields are set up incorrectly - they're case sensitive. titleField, valueField, balloonText and markerType are camel-case. Your config has them all in lowercase.
Updated code below:
AmCharts.makeChart("piechartdiv", {
"type": "pie",
"dataLoader": {
"url": "http://siteaddress.com/api/entries",
"format": "json",
"showErrors": "true"
},
"titleField": "sport",
"valueField": "entry",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"legend": {
"align": "center",
"markerType": "circle"
}
});
In my AngularJS Controller I got
var test = {
"type": "pie",
"theme": "light",
"data": dataWantedArea,
"valueField": "value",
"titleField": "name",
"balloon": {
"fixedPosition": true
},
"autoMargins": false,
"marginLeft": 5,
"marginRight": 5,
"marginBottom": 5,
"marginTop": 5,
"pullOutRadius": 0,
colors: ["#36CB1F", "#F58426", "#F53E26"],
"export": {
"enabled": true
}
};
in my template I do
<am-chart ng-if="test.data.length" id="test" options="test" width="90vw" height="325px"></am-chart>
Problem: its never shown, obviously test.data.length is ALWAYS false - so I would like to print some debugging in my template, is that possible somehow?
Of course If you know a direct solution to my problem, feel free to answer.
If you want to use data or variable from controller to html, you have to use $scope.
Use $scope.test intead of var test
To debug your code there is a cool browser plugin available.
http://ng-inspector.org/
There you can see a tree and all your values. It's very helpful to debug your code. You can see your scope and you can find and see problems.
I have written some code in amcharts.js to create stacked bar charts (with data as a parameter) and a pie chart.
The code can be found here:
http://jsfiddle.net/akashdmukherjee/myd363tw/30/
HTML:
<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>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS:
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JS:
var year_wise_continent_breakdown_data =
[
{"year": 2003,"europe": 2.5,"namerica": 2.5,"asia": 2.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": 2004,"europe": 2.6,"namerica": 2.7,"asia": 2.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": 2005,"europe": 2.8,"namerica": 2.9,"asia": 2.4,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
];
var quarter_wise_continent_breakdown_data_for_2003 =
[
{"year": "Q1","europe": 0.5,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": "Q2","europe": 2.6,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": "Q3","europe": 2.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
];
var quarter_wise_continent_breakdown_data_for_2004 =
[
{"year": "Q1","europe": 1.5,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": "Q2","europe": 4.6,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": "Q3","europe": 5.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
];
var quarter_wise_continent_breakdown_data_for_2005 =
[
{"year": "Q1","europe": 3.9,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": "Q2","europe": 2.1,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": "Q3","europe": 0.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
];
var continent_breakdown_data = [
{"country": "UK", "litres": 99},
{"country": "Belgium","litres": 60},
{ "country": "The Netherlands","litres": 50}
];
var make_pieChart_from_continent_breakdown_data = function(selected_year, selected_region){
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"dataProvider": continent_breakdown_data,
"valueField": "litres",
"titleField": "country",
"exportConfig":{
menuItems: [{
icon: '/lib/3/images/export.png',
format: 'png'
}]
}
});
};
var make_stackedBars_chart = function(data_for_stackedBars_chart){
AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": data_for_stackedBars_chart,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Europe",
"type": "column",
"fillColors": "#3C3C3C",
"valueField": "europe"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "North America",
"type": "column",
"color": "#000000",
"valueField": "namerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"color": "#000000",
"valueField": "asia"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Latin America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Middle-East",
"type": "column",
"color": "#000000",
"valueField": "meast"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Africa",
"type": "column",
"color": "#000000",
"valueField": "africa"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"exportConfig":{
"menuTop":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
})
};
//****************************************************************************
// RENDER CHARTS
//****************************************************************************
make_stackedBars_chart(year_wise_continent_breakdown_data);
////make_pieChart_from_continent_breakdown_data(2005, "Asia-Pacific");
If you notice, I create stacked bar charts using make_stackedBars_chart() function by passing in data. From my code, there are four options I can pass as data for the stacked bar chart:
1. year_wise_continent_breakdown_data
2. quarter_wise_continent_breakdown_data_for_2003
3. quarter_wise_continent_breakdown_data_for_2004
4. quarter_wise_continent_breakdown_data_for_2003
I could also create a pie chart instead using the function make_pieChart_from_continent_breakdown_data(selected_year, selected_region). The pie chart, for simplicity here, uses only one piece of data that's defined as the continent_breakdown_data variable.
The first view that an user of this 'dashboard' would see is the year-wise trends broken down by continents. This is the page that's renders when you open the jsfiddle link. This is made possible by a function call make_stackedBars_chart(year_wise_continent_breakdown_data);
But now is the fun part.
How do I make this interactive?
Let's start with the first view.
When the user single-clicks on the first column (data for year 2003), or second column (data for year 2004), or third column (data for year 2005), I want the selected column to be highlighted in Grey. Something like this.
My hope is that this can be set by setting the fillColors attribute of the graph object in the function. But how?
Next, when the user double-clicks on the selected column, the user should be able to drill-down to a new stacked bar chart which shows category breakdown but trending over Quarters of the selected year. So, let's say the user selected year 2005. When they single-clicked, it turned grey. After single-clicking or before single-clicking, if they double-click the year 2005 column, a new stacked bar chart is loaded with an additional button on top to go back to the previous chart. My understanding is that this needs to be done using a function call of make_stackedBars_chart(quarter_wise_continent_breakdown_data_for_2005);
This should look something like this:
Once this, is done user should be able to click on the top button to go back from there to the old chart into this view.
Fine. So the user saw year-wise view and quarter-wise view. But, now they want to select only one category (Asia-Pacific region) of year 2005 and see some other data specific to that. Selecting any portion on the chart should first collect the category (region/continent in this case) they have selected and the year they have selected. The selected region should be colored grey on a single click.
On a double click before/after the single-click on this portion of Asia-Pacific in 2005, this information should be passed onto a function that creates a pie chart accordingly. For this, a function call of this could be made
make_pieChart_from_continent_breakdown_data(2005, "Asia-Pacific"); The resultant graph should also have a button on top to go back to the original view. It should look something like this.
Clicking on 'Go Back', they should be redirected to the original year-wise stacked bar chart.
You should follow this example on drill down data: http://www.amcharts.com/tutorials/drill-down-column-chart/
Key points: generate data of quarter data as subdata for the yeardata and attach a click event to the chart to catch clicks on the bar to open next level.
Structure is like this:
data = [{country : "Country1", data1 : "value1", data2 : "value2",
subdata [{ country : "Country1", data1.1 : "value1.1", data2.1 : "data2.1"},
{country : "Country1", data1.2 : "value1.2", data2.2 : "data2.2"}]}]
and click event:
chart.addListener("clickGraphItem", function (event) {
if (event.item.dataContext.subdata != undefined) {
event.chart.dataProvider = event.item.dataContext.subdata;
event.chart.validateData();
}
});
This example shows how to change chart types onclick: http://www.amcharts.com/tips/switching-chart-type-fly-serial-pie/
Relevant points: You can have other type of chart on screen hidden, and onclick makes you change between charts:
document.getElementById('chartdiv').style.display = 'none';
document.getElementById('chartdiv2').style.display = 'block';
For double click, catch the following event: http://www.amcharts.com/tips/simulate-doubleclick-map-object/
Pointers:
map.addListener("clickMapObject", function (event) {
if ( false !== map.clickedObject && map.clickedObject === event.mapObject ) {
// doubleckick
map.clickedObject = false;
alert('doubleclick');
} else {
clearTimeout( map.clickedObjectTimeout );
map.clickedObject = event.mapObject;
map.clickedObjectTimeout = setTimeout( function () {
map.clickedObject = false;
}, 500 );
}
});
Final notes: These are some pointers where you have to make the solution by your own. Markups are taken (almost) directly from the linked examples, so event/element names will vary on your need. Maybe you at least get started with these.
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