Related
if the value comes 9 or greater than 9 it should show good , if value between 6 - 9 bad and below 6 poor . how to change the header inner text dynamically according to the variable value- "turbidity". sample data - 9.00
<script>
FusionCharts.ready(function () {
LoadChart();
});
function LoadChart() {
$.ajax({
url: 'https://url', // local address
type: 'GET',
crossDomain: true,
success: function (data) {
console.log('xhr success')
//if (data.success) {
console.log("success");
var turbidity = data;
if (turbidity >= 9.0) {
$('#headerValue').text("Good");
}
if (turbidity < 9.0 && turbidity > 6.0) {
$('#headerValue').text("Normal");
}
if (turbidity < 6.0) {
$('#headerValue').text("Poor");
}
var phfusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'ph-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Turbidity",
"lowerLimit": "0",
"upperLimit": "12",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "4",
"code": "#6baa01"
}, {
"minValue": "4",
"maxValue": "8",
"code": "#f8bd19"
}, {
"minValue": "8",
"maxValue": "12",
"code": "#e44a00"
}]
},
"dials": {
"dial": [{
"value": turbidity
}]
}
}
});
phfusioncharts.render();
//}
}
});
}
</script>
<td><h3 align="center">Water Quality : Good</h3> </td>
Write the html as this by giving id to status
<td><h3 align="center">Water Quality : <span id="status">Good</span></h3> </td>
Now when you'll get the result just use js to change the text
//Suppose you got data in var named data
if(data >=9 )
{
document.getElementById("status").innerText="Good"
}
else if(data >=6 && data <9 )
{
document.getElementById("status").innerText="Bad"
}
else
{
document.getElementById("status").innerText="Poor"
}
I am trying to generate a labels for the last level of the category...
This is the one I am looking for...
Created JsFiddle for you
var Cdata={"data":[{"label":"2010","value":"702600","color":"#FF8B3C","category":[{"label":"Public","value":"340394","color":"#FF8B3C","category":[{"label":"Single","value":"91787","color":"#FF8B3C","category":null},{"label":"Married","value":"85787","color":"#FF8B3C","category":null},{"label":"Divorced","value":"77464","color":"#FF8B3C","category":null},{"label":"Widow","value":"85356","color":"#FF8B3C","category":null}]},{"label":"Private","value":"362206","color":"#FF8B3C","category":[{"label":"Single","value":"102443","color":"#FF8B3C","category":null},{"label":"Married","value":"77220","color":"#FF8B3C","category":null},{"label":"Divorced","value":"85393","color":"#FF8B3C","category":null},{"label":"Widow","value":"97150","color":"#FF8B3C","category":null}]}]},{"label":"2011","value":"746880","color":"#A5AC0F","category":[{"label":"Public","value":"358315","color":"#A5AC0F","category":[{"label":"Single","value":"86968","color":"#A5AC0F","category":null},{"label":"Married","value":"92456","color":"#A5AC0F","category":null},{"label":"Divorced","value":"83679","color":"#A5AC0F","category":null},{"label":"Widow","value":"95212","color":"#A5AC0F","category":null}]},{"label":"Private","value":"388565","color":"#A5AC0F","category":[{"label":"Single","value":"100185","color":"#A5AC0F","category":null},{"label":"Married","value":"94838","color":"#A5AC0F","category":null},{"label":"Divorced","value":"96399","color":"#A5AC0F","category":null},{"label":"Widow","value":"97143","color":"#A5AC0F","category":null}]}]},{"label":"2012","value":"789482","color":"#83E0FF","category":[{"label":"Public","value":"383454","color":"#83E0FF","category":[{"label":"Single","value":"104390","color":"#83E0FF","category":null},{"label":"Married","value":"89375","color":"#83E0FF","category":null},{"label":"Divorced","value":"96117","color":"#83E0FF","category":null},{"label":"Widow","value":"93572","color":"#83E0FF","category":null}]},{"label":"Private","value":"406028","color":"#83E0FF","category":[{"label":"Single","value":"99938","color":"#83E0FF","category":null},{"label":"Married","value":"93399","color":"#83E0FF","category":null},{"label":"Divorced","value":"115378","color":"#83E0FF","category":null},{"label":"Widow","value":"97313","color":"#83E0FF","category":null}]}]},{"label":"2013","value":"705560","color":"#ff9999","category":[{"label":"Public","value":"354781","color":"#ff9999","category":[{"label":"Single","value":"98333","color":"#ff9999","category":null},{"label":"Married","value":"87342","color":"#ff9999","category":null},{"label":"Divorced","value":"77118","color":"#ff9999","category":null},{"label":"Widow","value":"91988","color":"#ff9999","category":null}]},{"label":"Private","value":"350779","color":"#ff9999","category":[{"label":"Single","value":"102129","color":"#ff9999","category":null},{"label":"Married","value":"79801","color":"#ff9999","category":null},{"label":"Divorced","value":"81731","color":"#ff9999","category":null},{"label":"Widow","value":"87118","color":"#ff9999","category":null}]}]},{"label":"2014","value":"738714","color":"#e580ff","category":[{"label":"Public","value":"350028","color":"#e580ff","category":[{"label":"Single","value":"69093","color":"#e580ff","category":null},{"label":"Married","value":"100824","color":"#e580ff","category":null},{"label":"Divorced","value":"89057","color":"#e580ff","category":null},{"label":"Widow","value":"91054","color":"#e580ff","category":null}]},{"label":"Private","value":"388686","color":"#e580ff","category":[{"label":"Single","value":"92575","color":"#e580ff","category":null},{"label":"Married","value":"105411","color":"#e580ff","category":null},{"label":"Divorced","value":"86773","color":"#e580ff","category":null},{"label":"Widow","value":"103927","color":"#e580ff","category":null}]}]},{"label":"2015","value":"726130","color":"#9999ff","category":[{"label":"Public","value":"348346","color":"#9999ff","category":[{"label":"Single","value":"84893","color":"#9999ff","category":null},{"label":"Married","value":"92005","color":"#9999ff","category":null},{"label":"Divorced","value":"81349","color":"#9999ff","category":null},{"label":"Widow","value":"90099","color":"#9999ff","category":null}]},{"label":"Private","value":"377784","color":"#9999ff","category":[{"label":"Single","value":"88107","color":"#9999ff","category":null},{"label":"Married","value":"94300","color":"#9999ff","category":null},{"label":"Divorced","value":"101897","color":"#9999ff","category":null},{"label":"Widow","value":"93480","color":"#9999ff","category":null}]}]}]};
FusionCharts.ready(function () {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id : "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor" : "#ffffff",
"canvasBgColor" : "#ffffff",
"showBorder" : "0",
"showShadow" : "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue"
},
"category": Cdata.data
}
});
topProductsChart.render();
});
Suggest us how can we draw the lines for the last level.
You can use annotation feature provided by FusionCharts to draw lines for outer-ring and and add label values. Check out this link to know more about annotations.
You can check implementation example in this updated JSFiddle.
Here's code used for annotations in above JSFiddle:
"annotations": {
"groups": [{
"items": [{
"id": "line1",
"type": "line",
"x": "$chartCenterX + 205",
"y": "$chartCenterY - 50",
"toX": "$chartCenterX + 240",
"toY": "$chartCenterY - 80",
},
{
"id": "linelabel1",
"type": "text",
"x": "$chartCenterX + 245",
"y": "$chartCenterY - 88",
"text": "22.76%",
"fontSize": "11"
}
]
}]
}
I am trying to create a chart using fusioncharts, I am using an AJAX query to get the data and below is how I'm generating the chart.
My problem is that fusion charts needs to see for example "value" : "1" where as I need to be able to use "0" : "1" because of my php below
My PHP Script to get logins for each hour of yesterday and today
$yesterdays_date = new datetime(date('d.m.Y',strtotime("-1 days")));
$query = "SELECT DATE(login_date) as date, HOUR(login_date) as hour, COUNT(*) as logins FROM logins WHERE login_date >= '".$yesterdays_date->format('Y-m-d')."' GROUP BY DATE(login_date), HOUR(login_date)";
//storing the result of the executed query
$result = $conn->query($query);
//initialize the array to store the processed data
$jsonArray = array();
$array = array(
'today' => array(
"seriesname" => "Logins Yesterday",
"data" => array(
'0' => 0,
'1' => 0,
'2' => 0,
'3' => 0,
'4' => 0,
'5' => 0,
'6' => 0,
'7' => 0,
'8' => 0,
'9' => 0,
'10' => 0,
'11' => 0,
'12' => 0,
'13' => 0,
'14' => 0,
'15' => 0,
'16' => 0,
'17' => 0,
'18' => 0,
'19' => 0,
'20' => 0,
'21' => 0,
'22' => 0,
'23' => 0,
),
),
'yesterday' => array(
"seriesname" => "Logins Today",
"renderAs" => "line",
"showValues" => "0",
"data" => array(
'0' => 0,
'1' => 0,
'2' => 0,
'3' => 0,
'4' => 0,
'5' => 0,
'6' => 0,
'7' => 0,
'8' => 0,
'9' => 0,
'10' => 0,
'11' => 0,
'12' => 0,
'13' => 0,
'14' => 0,
'15' => 0,
'16' => 0,
'17' => 0,
'18' => 0,
'19' => 0,
'20' => 0,
'21' => 0,
'22' => 0,
'23' => 0,
),
),
);
//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
//Converting the results into an associative array
while($row = $result->fetch_assoc()) {
if($row['date'] == $yesterdays_date->format('Y-m-d')){
//- Yesterdays data
$array['yesterday']['data'][$row['hour']] = $row['logins'];
}else{
//- Todays data
$array['today']['data'][$row['hour']] = $row['logins'];
}
//$jsonArrayItem = array();
//$jsonArrayItem['date'] = $row['date'];
//$jsonArrayItem['hour'] = $row['hour'];
//$jsonArrayItem['logins'] = $row['logins'];
//append the above created object into the main array.
//array_push($jsonArray, $jsonArrayItem);
}
}
//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function.
echo json_encode($array);.
My Data returned from the PHP script
My jQuery to generate the chart comparing yesterdays logins with today
function getLogins(){
$.ajax({
url: '/ajax/getLoginsToday.php',
type: 'GET',
success: function(data){
var chartProperties = {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Login Total",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendBgAlpha": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
"showHoverEffect": "1"
};
apiChart = new FusionCharts({
type: 'stackedcolumn2dline',
renderAt: 'chartContainer',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": chartProperties,
"categories": [
{
"category": [
{
"label": "00-01"
},
{
"label": "01-02"
},
{
"label": "02-03"
},
{
"label": "03-04"
},
{
"label": "04-05"
},
{
"label": "05-06"
},
{
"label": "06-07"
},
{
"label": "07-08"
},
{
"label": "08-09"
},
{
"label": "09-10"
},
{
"label": "10-11"
},
{
"label": "11-12"
},
{
"label": "12-13"
},
{
"label": "13-14"
},
{
"label": "14-15"
},
{
"label": "15-16"
},
{
"label": "16-17"
},
{
"label": "17-18"
},
{
"label": "18-19"
},
{
"label": "19-20"
},
{
"label": "20-21"
},
{
"label": "21-22"
},
{
"label": "22-23"
},
{
"label": "23-24"
}
]
}
],
"dataset": [
{
"seriesname": "Logins Yesterday",
"data": data
},
{
"seriesname": "Logins Today",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "24000"
},
{
"value": "45000"
},
{
"value": "23000"
},
{
"value": "38000"
}
]
}
]
}
});
apiChart.render();
}
});
}
In my jQuery AJAX success block above you can see i'm trying to set the dataset via the AJAX data but fusioncharts needs to see it like "value":"1"
whereas my data is formatted like "0":"1", "23":"4".
What's my best solution to get it into the format that fusioncharts wants?
You might try with Array.map().
The code above will let you convert this:
[15,15,16,17,18,19,20,21,22,25,30,32,28,15,14,15,15,10,8,7,8,9,10,10]
to this:
[{"value":15},{"value":15},{"value":16},{"value":17},{"value":18},{"value":19},{"value":20},{"value":21},{"value":22},{"value":25},{"value":30},{"value":32},{"value":28},{"value":15},{"value":14},{"value":15},{"value":15},{"value":10},{"value":8},{"value":7},{"value":8},{"value":9},{"value":10},{"value":10}]
Explanation:
var yesterdayData = [15,15,16,17,18,19,20,21,22,25,30,32,28,15,14,15,15,10,8,7,8,9,10,10];
var yesterday = []; // Declare a new variable to expose the results in the graph.
yesterdayData.map(function(x) { // x contains the current value.
yesterday.push({"value": x}); // For every item in the array, push the current value to the yesterday array variable.
});
Something like this:
$(function() {
function getLogins() {
$.ajax({
url: "https://gist.githubusercontent.com/dannyjhonston/4ef6fae2e6142606578c080aec4cd690/raw/04ab3a73f4a07defbd67de6b9e8ffaf47ea61862/fusioncharts.json",
type: "GET",
success: function(data) {
data = JSON.parse(data);
var yesterdayData = data.yesterday.data; // Data from the server.
var yesterday = [], todayData = data.today.data; // Data from the server.
var today = [];
yesterdayData.map(function(x) {
yesterday.push({
"value": x
});
});
todayData.map(function(x) {
today.push({
"value": x
});
});
var chartProperties = {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Login Total",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendBgAlpha": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
"showHoverEffect": "1"
};
var apiChart = new FusionCharts({
type: 'stackedcolumn3dline',
renderAt: 'chartContainer',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": chartProperties,
"categories": [{
"category": [{
"label": "00-01"
}, {
"label": "01-02"
}, {
"label": "02-03"
}, {
"label": "03-04"
}, {
"label": "04-05"
}, {
"label": "05-06"
}, {
"label": "06-07"
}, {
"label": "07-08"
}, {
"label": "08-09"
}, {
"label": "09-10"
}, {
"label": "10-11"
}, {
"label": "11-12"
}, {
"label": "12-13"
}, {
"label": "13-14"
}, {
"label": "14-15"
}, {
"label": "15-16"
}, {
"label": "16-17"
}, {
"label": "17-18"
}, {
"label": "18-19"
}, {
"label": "19-20"
}, {
"label": "20-21"
}, {
"label": "21-22"
}, {
"label": "22-23"
}, {
"label": "23-24"
}]
}],
"dataset": [{
"seriesname": "Logins Yesterday",
"data": today // The required data goes here.
}, {
"seriesname": "Logins Today",
"renderAs": "line",
"showValues": "0",
"data": yesterday // The required data goes here.
}]
}
});
apiChart.render();
}
});
}
getLogins();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id="chartContainer">FusionCharts will render here</div>
Hope this helps.
["Order", "Id", "Comment", "Id_type", "UbAction", "Ub_Factor", "LbAction","Lb_Factor",
"6", "12321", "3rd test", "Industry", "0.23", "true", "0", "false",
"22", "sss", "4", "Sector", "0", "true", "0.565676", "true",
"99", "277906", "", "Sector", "1", "true", "0", "true",
"3", "416921", "correction check", "Industry", "1", "true", "0", "false"]
I have this array shown above. The first eight elements are the header. So I will remove those using splice.
I need to check if the elements 8,16,24 AND 9,17,25 AND 11,19,27 are empty. How can i loop through this elements dynamically. The sequence of elements are weird. Can someone please suggest how to check if these above element number is the current one which is being looped.
Thanks guys for the replies. I worked on it a bit and the below code worked for me pretty nicely...
var count = 0;
var array2= [0,1,3,4,6];
function checkArray5(cell_data){
for(var i=8;i<cell_data.length; i++) {
for (var j=0;j<5;j++)
{
if (i%8 == array2[j])
{
if(cell_data[i] ==="") {
console.log(count++);
}
}
}
}
}
checkArray5(array);
Use the % operator to search for the indexes that return 0, 1 and 3 respectively:
var table = ["Order", "Id", "Comment", "Id_type", "UbAction", "Ub_Factor", "LbAction","Lb_Factor",
"6", "12321", "3rd test", "Industry", "0.23", "true", "0", "false",
"22", "sss", "4", "Sector", "0", "true", "0.565676", "true",
"99", "277906", "", "Sector", "1", "true", "0", "true",
"3", "416921", "correction check", "Industry", "1", "true", "0", "false"];
var index = 0;
var columns = 8;
var cells = table.slice(columns);
var len = cells.length;
for (;index < len; index++) {
var mod = index % columns;
switch (mod) {
case 0:
case 1:
case 3:
isEmpty(cells[index]);
break;
}
}
Here is my suggestion:
var myArr = ["Order", "Id", "Comment", "Id_type", "UbAction", "Ub_Factor", "LbAction", "Lb_Factor",
"6", "12321", "3rd test", "Industry", "0.23", "true", "0", "false",
"22", "sss", "4", "Sector", "0", "true", "0.565676", "true",
"99", "277906", "", "Sector", "1", "true", "0", "true",
"3", "416921", "correction check", "Industry", "1", "true", "0", "false"];
// added or remove elements to be checked if empty.
var emptyElementChk = [8, 9, 11, 16, 17, 19, 24, 25, 27];
for (var i = 0; i < emptyElementChk.length; i++) {
//All checked array listed
console.log("Key : " + emptyElementChk[i] + " value: " + myArr[emptyElementChk[i]]);
if (myArr[emptyElementChk[i]] == "") {
// empty arrays action
} else {
// none empty arrays action
}
};
I'm not why my Google chart is not rendering and instead, it display
I also notice I got this error message on my console.
Uncaught TypeError: Cannot read property 'danger' of undefined
Then, I checked my JSON file, danger is there. which danger is it referring to ?
JS
'use strict';
define(['jquery'], function($) {
$(function() {
var danger = $('#pc-danger');
var warning = $('#pc-warning');
var success = $('#pc-success');
var danger_list = $('#pc-danger-list');
var warning_list = $('#pc-warning-list');
var success_list = $('#pc-success-list');
var basePath = "/BIM/resources/js/reports/student/section-exercise/";
$.ajax({
url: basePath + "data.json",
type: "GET",
dataType : "json",
success: function( objects ) {
function updateInfo(x) {
danger.html(objects[x].danger);
warning.html(objects[x].warning);
success.html(objects[x].success);
danger_list.html(objects[x].danger_list);
warning_list.html(objects[x].warning_list);
success_list.html(objects[x].success_list);
}
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart());
function drawChart() {
var options = {
width: 160,
height: 160,
chartArea: {
left: 10,
top: 20,
width: "100%",
height: "100%"
},
colors: ['#F46E4E', '#F9C262' , '#ADB55E',],
legend: 'none',
enableInteractivity: false,
pieSliceText: 'none',
};
var data = {};
var chart = {};
for (var object in objects) {
var total = objects[object].danger + objects[object].warning + objects[object].success ;
data[object] = google.visualization.arrayToDataTable([
['Piechart' , 'Number of Skills'],
['danger' , ( objects[object].danger/total ) * 100 ],
['warning' , ( objects[object].warning/total ) * 100 ],
['success' , ( objects[object].success/total ) * 100 ],
]);
object = object.toLowerCase();
// piechart object
var $el = $('#sa-piechart-' + object );
// button
var button = $('.sa-report-btn-'+ object );
// append
var $el = $('#sa-piechart-' + object ).length ? $('#sa-piechart-' + object ) : $('<div id="sa-piechart-' + object +'"></div>').appendTo($('#sa-piechart-'+ object ));
chart[object] = new google.visualization.PieChart($el[0]);
chart[object].draw(data[object]);
// attach click handler to the button
button.click(function() {
updateInfo(object);
chart[object].draw(data[object]);
});
}
}
},
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},
});
});
});
JSON
{
"A": {
"report_type": "chapter test",
"section_num": "2",
"assignment": "algebra 1",
"date": "2/10/2015",
"correct_num": "15",
"avg_score": "89",
"danger": "5",
"danger_list": "5,10,15,19,23",
"warning": "8",
"warning_list": "3,7,11,13,14,16,21,22",
"success": "12",
"success_list": "1,2,4,6,8,9,12,17,18,20,24,25"
},
"B": {
"report_type": "section exercise",
"section_num": "2.2",
"assignment": "algebra 1",
"date": "2/09/2015",
"correct_num": "11",
"avg_score": "44",
"danger": "12",
"danger_list": "11,12,13,14,15,16,17,18,19,20,3,4",
"warning": "2",
"warning_list": "1,2",
"success": "11",
"success_list": "21,21,23,24,25,5,6,7,8,9,10"
},
"C": {
"report_type": "test",
"section_num": "1",
"assignment": "algebra 1",
"date": "1/10/2015",
"correct_num": "15",
"avg_score": "75",
"danger": "0",
"danger_list": "",
"warning": "10",
"warning_list": "1,2,3,4,5,6,7,8,9,10",
"success": "15",
"success_list": "11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
},
"D": {
"report_type": "practice test",
"section_num": "1",
"assignment": "algebra 1",
"date": "1/09/2015",
"correct_num": "15",
"avg_score": "79",
"danger": "5",
"danger_list": "1,2,3,4,5",
"warning": "0",
"warning_list": "",
"success": "20",
"success_list": "6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
}
}
Any help / hints / suggestions will mean a lot to me.
Thank-you !
You are pushing DataTable to data[object] which are A,B,C.. and after that you conver it to lowerCase by this line:-
object = object.toLowerCase();
so after that when you get that object it return null in this line:-
chart[object].draw(data[object]);
so you just need to remove this line:-
object = object.toLowerCase();
here is demo( i just use one div for demo purpose)
Demo
hope this will help you.