Develop Reference

amChart draggable pie chart rendering dummy slide

I am attempting to add a chart from amChart into my php project and everything seems to be going OK, I have two parameters and when I change them, it loads the data into my array.
I am using a new chat, a draggable pie chart and this chart seems to be making use of a "dummy" slide to do percentages and calculations.
The problem is, when my data first loads, it loads this dummy slide which of course throws off my dat and I have to manually drag it out for my chart to be correct.
I have inserted my code below, alot of the code is from the libary and my changes only involve the ajax code used to manipulate the data of the chart.
Grateful for any assistance.
<script>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var data;
jQuery(document).ready(function () {
// appHandleUniform()
$('.datepicker').datepicker({
rtl: App.isRTL(),
autoclose: true,
weekStart: app_cfg_first_day_of_week,
format: 'yyyy-mm-dd',
clearBtn: true,
});
});
var pData;
var data = [{
"country": "Dummy",
"disabled": true,
"litres": 1000,
"color": am4core.color("#dadada"),
"opacity": 0.3,
"strokeDasharray": "4,4"
} /*{
"country": "Apple",
"litres": 501.9
}, {
"country": "Pest",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}*/ ];
// cointainer to hold both charts
var container = am4core.create("chartdiv", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "horizontal";
container.events.on("maxsizechanged", function () {
chart1.zIndex = 0;
separatorLine.zIndex = 1;
dragText.zIndex = 2;
chart2.zIndex = 3;
})
var chart1 = container.createChild(am4charts.PieChart);
chart1.validateData();
var startDate = endDate = "";
$("#start_date").change(function () {
startDate = $(this).val();
});
$("#end_date").change(function () {
endDate = $(this).val();
if (startDate != "" && endDate != "") {
$.ajax({
type: "POST",
url: '<?php echo url_for("charts/getEntryFormsData") ?>',
data: {startDate: startDate, endDate: endDate},
success: function (data) {
pData = $.parseJSON(data);
// or
//chart1.validateData();
chart1.data = [{
"country": "Dummy",
"disabled": true,
"litres": 1000,
"color": am4core.color("#dadada"),
"opacity": 0.3,
"strokeDasharray": "4,4"
},{
"country": "CTR",
"litres": pData["CTR"].length
}, {
"country": "DRFI",
"litres": pData["DRFI"].length
}, {
"country": "FIUIN",
"litres": pData["FIUIN"].length
}, {
"country": "RFA",
"litres": pData["RFA"].length
}, {
"country": "RFIR",
"litres": pData["RFIR"].length
}, {
"country": "TPR",
"litres": pData["TPR"].length
}];
}
});
} else {
alert("Choose Start Date First");
$("#end_date").val("");
}
});
// chart1.data=data;
chart1 .fontSize = 11;
chart1.hiddenState.properties.opacity = 0; // this makes initial fade in effect
//chart1.data = data;
//chart1.validateData();
chart1.radius = am4core.percent(70);
chart1.innerRadius = am4core.percent(40);
chart1.zIndex = 1;
var series1 = chart1.series.push(new am4charts.PieSeries());
series1.dataFields.value = "litres";
series1.dataFields.category = "country";
series1.colors.step = 2;
series1.alignLabels = false;
series1.labels.template.bent = true;
series1.labels.template.radius = 3;
series1.labels.template.padding(0,0,0,0);
var sliceTemplate1 = series1.slices.template;
sliceTemplate1.cornerRadius = 5;
sliceTemplate1.draggable = true;
sliceTemplate1.inert = true;
sliceTemplate1.propertyFields.fill = "color";
sliceTemplate1.propertyFields.fillOpacity = "opacity";
sliceTemplate1.propertyFields.stroke = "color";
sliceTemplate1.propertyFields.strokeDasharray = "strokeDasharray";
sliceTemplate1.strokeWidth = 1;
sliceTemplate1.strokeOpacity = 1;
var zIndex = 5;
sliceTemplate1.events.on("down", function (event) {
event.target.toFront();
// also put chart to front
var series = event.target.dataItem.component;
series.chart.zIndex = zIndex++;
})
series1.ticks.template.disabled = true;
sliceTemplate1.states.getKey("active").properties.shiftRadius = 0;
sliceTemplate1.events.on("dragstop", function (event) {
handleDragStop(event);
})
// separator line and text
var separatorLine = container.createChild(am4core.Line);
separatorLine.x1 = 0;
separatorLine.y2 = 300;
separatorLine.strokeWidth = 3;
separatorLine.stroke = am4core.color("#dadada");
separatorLine.valign = "middle";
separatorLine.strokeDasharray = "5,5";
var dragText = container.createChild(am4core.Label);
dragText.text = "Drag slices over the line";
dragText.rotation = 90;
dragText.valign = "middle";
dragText.align = "center";
dragText.paddingBottom = 5;
// second chart
var chart2 = container.createChild(am4charts.PieChart);
chart2.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart2 .fontSize = 11;
chart2.radius = am4core.percent(70);
// or
//chart1.validateData();
chart2.data = [{
"country": "Dummy",
"disabled": true,
"litres": 1000,
"color": am4core.color("#dadada"),
"opacity": 0.3,
"strokeDasharray": "4,4"
}, {
"country": "CTR",
"litres": 4
}, {
"country": "DRFI",
"litres":2
}, {
"country": "FIUIN",
"litres": 5
}, {
"country": "RFA",
"litres": 5
}, {
"country": "RFIR",
"litres":6
}, {
"country": "TPR",
"litres": 6
}];
chart2.validateData();
//chart2.data = data;
chart2.innerRadius = am4core.percent(40);
chart2.zIndex = 1;
var series2 = chart2.series.push(new am4charts.PieSeries());
series2.dataFields.value = "litres";
series2.dataFields.category = "country";
series2.colors.step = 2;
series2.alignLabels = false;
series2.labels.template.bent = true;
series2.labels.template.radius = 3;
series2.labels.template.padding(0,0,0,0);
series2.labels.template.propertyFields.disabled = "disabled";
var sliceTemplate2 = series2.slices.template;
sliceTemplate2.copyFrom(sliceTemplate1);
series2.ticks.template.disabled = true;
function handleDragStop(event) {
var targetSlice = event.target;
var dataItem1;
var dataItem2;
var slice1;
var slice2;
if (series1.slices.indexOf(targetSlice) != -1) {
slice1 = targetSlice;
slice2 = series2.dataItems.getIndex(targetSlice.dataItem.index).slice;
}
else if (series2.slices.indexOf(targetSlice) != -1) {
slice1 = series1.dataItems.getIndex(targetSlice.dataItem.index).slice;
slice2 = targetSlice;
}
dataItem1 = slice1.dataItem;
dataItem2 = slice2.dataItem;
var series1Center = am4core.utils.spritePointToSvg({ x: 0, y: 0 }, series1.slicesContainer);
var series2Center = am4core.utils.spritePointToSvg({ x: 0, y: 0 }, series2.slicesContainer);
var series1CenterConverted = am4core.utils.svgPointToSprite(series1Center, series2.slicesContainer);
var series2CenterConverted = am4core.utils.svgPointToSprite(series2Center, series1.slicesContainer);
// tooltipY and tooltipY are in the middle of the slice, so we use them to avoid extra calculations
var targetSlicePoint = am4core.utils.spritePointToSvg({ x: targetSlice.tooltipX, y: targetSlice.tooltipY }, targetSlice);
if (targetSlice == slice1) {
if (targetSlicePoint.x > container.pixelWidth / 2) {
var value = dataItem1.value;
dataItem1.hide();
var animation = slice1.animate([{ property: "x", to: series2CenterConverted.x }, { property: "y", to: series2CenterConverted.y }], 400);
animation.events.on("animationprogress", function (event) {
slice1.hideTooltip();
})
slice2.x = 0;
slice2.y = 0;
dataItem2.show();
}
else {
slice1.animate([{ property: "x", to: 0 }, { property: "y", to: 0 }], 400);
}
}
if (targetSlice == slice2) {
if (targetSlicePoint.x < container.pixelWidth / 2) {
var value = dataItem2.value;
dataItem2.hide();
var animation = slice2.animate([{ property: "x", to: series1CenterConverted.x }, { property: "y", to: series1CenterConverted.y }], 400);
animation.events.on("animationprogress", function (event) {
slice2.hideTooltip();
})
slice1.x = 0;
slice1.y = 0;
dataItem1.show();
}
else {
slice2.animate([{ property: "x", to: 0 }, { property: "y", to: 0 }], 400);
}
}
toggleDummySlice(series1);
toggleDummySlice(series2);
series1.hideTooltip();
series2.hideTooltip();
}
function toggleDummySlice(series) {
var show = true;
for (var i = 1; i < series.dataItems.length; i++) {
var dataItem = series.dataItems.getIndex(i);
if (dataItem.slice.visible && !dataItem.slice.isHiding) {
show = false;
}
}
var dummySlice = series.dataItems.getIndex(0);
if (show) {
dummySlice.show();
}
else {
dummySlice.hide();
}
}
series2.events.on("datavalidated", function () {
var dummyDataItem = series2.dataItems.getIndex(0);
dummyDataItem.show(0);
dummyDataItem.slice.draggable = false;
dummyDataItem.slice.tooltipText = undefined;
for (var i = 1; i < series2.dataItems.length; i++) {
series2.dataItems.getIndex(i).hide(0);
}
})
series1.events.on("datavalidated", function () {
var dummyDataItem = series1.dataItems.getIndex(0);
dummyDataItem.hide(0);
dummyDataItem.slice.draggable = false;
dummyDataItem.slice.tooltipText = undefined;
})
</script>

Aggregate data for months in chart.js - PHP, MySQL, JS

I'm newbie to js and data aggregating for charts and it would be great to know how to aggregate data in a chart collecting them for months. In the example I'm trying to sum the money data for each employee id for months but the result is always passed like singular queries.
Here it is my code in js:
$(document).ready(function() {
/**
* call the data.php file to fetch the result from db table.
*/
$.ajax({
url : "http://localhost:8888/site/function/data.php",
type : "GET",
success : function(data){
console.log(data);
var importo = {
TRCLRT76T08F704F : [],
NGLLSN80T03F839Y : []
};
var len = data.length;
for (var i = 0; i < len; i++) {
if (data[i].cf == "TRCLRT76T08F704F") {
importo.TRCLRT76T08F704F.push(data[i].importo);
}
else if (data[i].cf == "NGLLSN80T03F839Y") {
importo.NGLLSN80T03F839Y.push(data[i].importo);
}
}
//get canvas
var ctx = $("#line-chartcanvas");
var data = {
labels : ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
datasets : [
{
label : "TRCLRT76T08F704F importo",
data : importo.TRCLRT76T08F704F,
backgroundColor : "blue",
borderColor : "lightblue",
fill : false,
lineTension : 0,
pointRadius : 5
},
{
label : "NGLLSN80T03F839Y importo",
data : importo.NGLLSN80T03F839Y,
backgroundColor : "green",
borderColor : "lightgreen",
fill : false,
lineTension : 0,
pointRadius : 5
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "Line Graph",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : true,
position : "bottom"
}
};
var chart = new Chart( ctx, {
type : "line",
data : data,
options : options
} );
},
error : function(data) {
console.log(data);
}
});
Here it is the function to call the db in data.php
$query = sprintf("SELECT cf, mese, importo FROM table WHERE `anno` = '2017' AND `importo` > '0' ORDER BY stamp_start");
//execute query
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}

Create bar chart using mysql data

I want create bar using mysql data which is returned in JSON Format.
[
{
"Score": "84",
"Trainer": "Jamshaid",
"Subject Name": "Java"
},
{
"Score": "50",
"Trainer": "Zaid",
"Subject Name": "Android"
},
{
"Score": "40",
"Trainer": "Sajjad",
"Subject Name": "iOS"
},
{
"Score": "50",
"Trainer": "Jamshaid",
"Subject Name": "iOS"
}
]
I want to create like this chart
But problem is that this gets formatted from Table. But I have data in JSON as shown above.
Here is the link I am following. Can we convert the JSON Data in a Format so that it can populate chart based on the Data as shown
https://blueflame-software.com/bar-chart-with-data-from-mysql-using-highcharts/

You can process the JSON in the Javascript to build the data required for the chart as shown below:
var jsonFromServer = [
{
"Score": "84",
"Trainer": "Jamshaid",
"Subject Name": "Java"
},
{
"Score": "50",
"Trainer": "Zaid",
"Subject Name": "Android"
},
{
"Score": "40",
"Trainer": "Sajjad",
"Subject Name": "iOS"
},
{
"Score": "50",
"Trainer": "Jamshaid",
"Subject Name": "iOS"
}
];
The above is data from server captured in a variable
The below code helps you to extract the Y axis Values (i.e the unique subject names) from the JSON response:
function getSubjects(){
var subjectsMap = {};
$.each(jsonFromServer, function(index, value){
if(!subjectsMap[value['Subject Name']]){
subjectsMap[value['Subject Name']] = 1;
}
});
return $.map(subjectsMap, function(index, val){ return val; });
}
Then we need to extract the Scores for each trainer in different subject which should be of form: [{name: "Trainer", data: []}] where data is an array of scores in subject whose order should be same as the order of subjects appearing in the Y axis data. Which can be achieved using the below code:
function getTrainers(){
var trainersMap = {};
$.each(jsonFromServer, function(index, value){
if(!trainersMap[value['Trainer']]){
trainersMap[value['Trainer']] = 1;
}
});
return $.map(trainersMap, function(index, val){ return val; });
}
function getMarks(){
var subjects = getSubjects();
var trainers= getTrainers();
var marks = {};
//initialize the trainers scores in all subjects to 0
$.each(trainers, function(index, trainer){
if ( !marks[trainer]){
marks[trainer] = {};
}
$.each(subjects, function(idx2, sub){
marks[trainer][sub] = 0;
});
});
//now populate with the actual values obtained from server
$.each(subjects, function(idx2, sub){
$.each(jsonFromServer, function(index, value){
var trainer = value['Trainer'];
var subName = value['Subject Name'];
var score = value['Score'];
if ( sub == subName){
marks[trainer][sub] = score;
}
});
});
//now format the marks object into the format required for highcharts
//i.e an array of object with properties [{name: "", data:[]}]
return $.map(marks, function(val, index){
var scoreArray = [];
$.each(val, function(index, score){
scoreArray.push(parseInt(score));
});
return {"name": index, "data": scoreArray};
});
}
The working code can be found in the fiddle here.

Javascript code when copy pasted in a function, doesnt get called. Otherwise it does. What is the logic here?

Following is the code written to load a chart by calling a function:
//Capture customer and measures values in an array
$("document").ready(function(){
$("button").click(function(){
Load_PieTest();
var custArray = new Array();
var measureArray = new Array();
var formElements = new Array();
$("#custSelect >option:selected").each(function(i){
custArray[i]=$(this).val();
});
//alert(custArray);
$("#measureSelect >option:selected").each(function(j){
measureArray[j]=$(this).val();
});
//alert(measureArray);
//Convert into suitable JSON
var length = Math.max(custArray.length, measureArray.length);
var k;
for(k=0;k<length;k++){
//alert("Inside for loop")
if(typeof(custArray[k])=="undefined"){
//alert("Undefined customer");
custArray[k]==null;
}else if(typeof(measureArray[k])=="undefined"){
//alert("Undefined measure");
measureArray[k]==null;
}
//alert("About to push into array");
formElements.push({"customer":custArray[k],"measure":measureArray[k]});
}
//alert("outside loop");
//alert(formElements[0].customer);
var chartSelect = document.getElementById("typeOfChart");
var chartOption = chartSelect.options[chartSelect.selectedIndex].value;
alert(chartOption);
//Call appropriate AMCharts javascripts
LoadCharts(chartOption,formElements);
});
});
LoadCharts is a function that loads a chart based on the selected option. Suppose PieChart is selected. Pie chart should pop up using AMCharts library
When writing the code for making the chart in between the script tag, it works fine. But if written in a function which is getting called, the inner custom methods AmCharts.ready() arent getting called. Following is the code wriitten by me:
function Load_PieTest(){
var chart;
var legend;
var chartData = [{
country: "Czech Republic",
litres: 301.90
}, {
country: "Ireland",
litres: 201.10
}, {
country: "Germany",
litres: 165.80
}, {
country: "Australia",
litres: 139.90
}, {
country: "Austria",
litres: 128.30
}, {
country: "UK",
litres: 99.00
}, {
country: "Belgium",
litres: 60.00
}];
alert("yupp");
AmCharts.ready(function () {
// PIE CHART
alert("No");
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
// WRITE
chart.write("chartdiv");
});
}
</script>
same thing when written outside the function in the script tag. works fine.Please tell me why is it happening?

The answer to your question is that AmCharts.ready waits until the window.onload event has occurred to execute your function. In your example above, where it's not working, it's because the window.onload event has already fired before you called AmCharts.ready. So AmCharts.ready is just waiting indefinitely.
Just remove AmCharts.ready altogether and execute the function code directly. Like this:
}, {
country: "Belgium",
litres: 60.00
}];
alert("yupp");
// PIE CHART
alert("No");
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
// WRITE
chart.write("chartdiv");
}

Perhaps the event which triggeres AmCharts.ready() has already fired before you call the function? Does this work:
function Load_PieTest(){
var chart;
var legend;
var chartData = [{
country: "Czech Republic",
litres: 301.90
}, {
country: "Ireland",
litres: 201.10
}, {
country: "Germany",
litres: 165.80
}, {
country: "Australia",
litres: 139.90
}, {
country: "Austria",
litres: 128.30
}, {
country: "UK",
litres: 99.00
}, {
country: "Belgium",
litres: 60.00
}];
//alert("yupp");
// PIE CHART
//alert("No");
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
// WRITE
chart.write("chartdiv");
}
AmCharts.ready(function () {
Load_PieTest();
})
I moved the ready to outside, which calls the function.

jvectorMap plotting data from db

I'm trying to plot data that I get from the DB, but I have no luck with figuring how to deal with the json array and pass it to the plotting plugin (jvectorMap)
Here is the structure of my json array
{
"countries":[
{
"cname":"Albania",
"ccode":"AL",
"name":"John",
"percent":"20"
},
{
"cname":"Austria",
"ccode":"AT",
"name":"Doe",
"percent":"30"
}
]
}
javaScript in HTML
<script>
var dataC = "<?php echo $mapData?>";
$(function(){
$('#world-map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: dataC[ccode],
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onLabelShow: function(e, el, code){
el.html(el.html()+dataC[ccode]+dataC[name]+dataC[percent]+dataC[cname]);
}
});
});
</script>
Essentially I would like to have my data plotted based on the ISO code in the ccode key. For instance when i point on the map i would like to see in the marker the data from the name, percentage and the cname field too. Thanks.

var dataC = {
"countries": [
{
"cname": "Albania",
"ccode": "AL",
"name": "John",
"percent": "20"},
{
"cname": "Austria",
"ccode": "AT",
"name": "Doe",
"percent": "30"}
]
};
//---------------------------------------------------------------------------
// The data for the jVectorMap is expected to be an object with
// member variables for each country code and an associated value.
// You need to convert your `dataC` data into that format.
//---------------------------------------------------------------------------
var countryData = [];
//for each country, set the code and value
$.each(dataC.countries, function() {
countryData[this.ccode] = this.percent;
});
$(function() {
$('#world-map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: countryData, //load the data
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'}]
},
//-----------------------------------------------
// changed to onRegionLabelShow from onLabelShow
//-----------------------------------------------
onRegionLabelShow: function(e, el, code) {
//search through dataC to find the selected country by it's code
var country = $.grep(dataC.countries, function(obj, index) {
return obj.ccode == code;
})[0]; //snag the first one
//only if selected country was found in dataC
if (country != undefined) {
el.html(el.html() +
"<br/><b>Code: </b>" +country.ccode +
"<br/><b>Name: </b>" + country.name +
"<br/><b>Percent: </b>" + country.percent +
"<br/><b>Country Name: </b>"+ country.cname);
}
}
});
});​