I want to pass php results to javascript charts.
<script>
<?php foreach ($hourlyreport as $val) {?>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "totalstaff",
"litres": <?php echo $val->totalstaff;?>
}, {
"country": "totaltasks",
"litres": <?php echo $val->totaltasks;?>
}, {
"country": "completed tasks",
"litres": <?php echo $val->is_completed;?>
}, {
"country": "pendingtasks",
"litres": <?php echo $pending;?>
}
],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
<?php } ?>
</script>
This is my chart script, I'm passing foreach results to this charts. On client side HTML page has code something like below.
<div id="chartdiv">
</div>
<?php
$value='';
foreach ($hourlyreport as $val) {
$value='{
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "totalstaff",
"litres": <?php echo $val->totalstaff;?>
}, {
"country": "totaltasks",
"litres": <?php echo $val->totaltasks;?>
}, {
"country": "completed tasks",
"litres": <?php echo $val->is_completed;?>
}, {
"country": "pendingtasks",
"litres": <?php echo $pending;?>
}
],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} ' ;
} ?>
<script>
var chart = AmCharts.makeChart( "chartdiv",<?php echo $value;?>);
</script>
OutPut
<script> var chart = AmCharts.makeChart( "chartdiv",{ "type": "pie", "theme": "light", "dataProvider": [ { "country": "totalstaff", "litres": $val->totalstaff; }, { "country": "totaltasks", "litres": $val->totaltasks; }, { "country": "completed tasks", "litres": $val->is_completed; }, { "country": "pendingtasks", "litres": $pending; } ], "valueField": "litres", "titleField": "country", "balloon":{ "fixedPosition":true }, "export": { "enabled": true } } ); </script>
You are running the loop for the whole chart object so it is try to create multiple chart object.That's why it is not working. I have done this in my project.
Try this it will work for you
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [
<?php foreach ($hourlyreport as $val) {?>
{
"country": "totalstaff",
"litres": '<?php echo $val->totalstaff;?>'
}, {
"country": "totaltasks",
"litres": '<?php echo $val->totaltasks;?>'
}, {
"country": "completed tasks",
"litres": '<?php echo $val->is_completed;?>'
}, {
"country": "pendingtasks",
"litres": '<?php echo $pending;?>'
}
<?php } ?>
],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
</script>
Related
Im trying to make a simple JSON retriever.
So here is what im trying to do.
When i type for example
Japan. and i post the data to php.
I want it to load the json it has and search arrays for values containing this country Japan
Sending a smaller cut down json array containing only results containing this value back to the page.
The key is Country,
Example json
{
"1": {
"country": "America",
"Name": "Harry",
"Age": "41"
},
"2": {
"country": "America",
"Name": "ben",
"Age": "40"
},
"3": {
"country": "Japan",
"Name": "taka",
"Age": "48"
},
"4": {
"country": "Japan",
"Name": "John",
"Age": "41"
},
"5": {
"country": "America",
"Name": "Ted",
"Age": "41"
},
"6": {
"country": "America",
"Name": "Simon",
"Age": "41"
}
}
var country = $(".country").val();
$.ajax ({
url: json.php,
type: 'POST',
data: {
'find': country,
},
success: function (results) {
console.log(results);
},
fail: function(data) {
console.log( data.responseText );
console.log( 'Request Failed' + data.statusText );
}
})
<input name="country" class="country" type="text" placeholder="type country"></input>
<?php
header('content-type: application/json; charset=utf-8');
header("access-control-allow-origin: *");
$jsonurl = "data.json";
$json = file_get_contents($jsonurl);
$find = $_POST["find"];
$decode = json_decode($json, true);
$results = array_filter($decode[''], function($country) {
return $country['country'] == $find;
});
var_dump($results);
Any help would be appreciated...
Here is the code sample using which you can achieve your requirement.
$my_json = '{
"1": {"country": "America","Name": "Harry","Age": "41"},
"2": {"country": "America","Name": "ben","Age": "40"},
"3": {"country": "Japan","Name": "taka","Age": "48"},
"4": {"country": "Japan","Name": "John","Age": "41"},
"5": {"country": "America","Name": "Ted","Age": "41"},
"6": {"country": "America","Name": "Simon","Age": "41"}
}';
$json_arr = json_decode($my_json);
$item = array();
foreach($j as $k=>$struct) {
if ('Japan' == $struct->country) {
$item[$k] = $struct;
}
}
echo 'Object Array form::';
echo '---------------------------';
print_r(array_values($item));
echo 'Json form::';
echo '---------------------------';
echo json_encode(array_values($item));
I have a bar chart from amcharts. I need to highlight a single bar on click on bar. Current scenario is when I click multiple bar, all bars highlighted.
Here is my code
"listeners": [{
"event": "clickGraphItem",
"method": function(event) {
var node = event.item.columnGraphics.node.lastChild;
node.setAttribute("stroke","#8198b4");
node.setAttribute("fill","#8198b4");
}
}]
Any help? Thank You.
Instead of modifying the node, use fillColorsField instead, which allows you to set/unset the currently selected column's highlight and allows you to go through the rest of the chart's data to make sure only one item is selected.
"graphs": [{
// ...
"fillColorsField": "selected"
}],
"zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
//if the current item is already selected, deselect it
if (e.item.dataContext.selected) {
e.item.dataContext.selected = undefined;
}
else {
//otherwise, find any other columns that were selected and deselect them
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined;
break;
}
}
e.item.dataContext.selected = "#8198b4";
}
e.chart.validateData(); //update chart
}
}]
Demo below:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"fillColorsField": "selected"
}],
"categoryField": "country",
"zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
//if the current item is already selected, deselect it
if (e.item.dataContext.selected) {
e.item.dataContext.selected = undefined;
}
else {
//otherwise, find any other columns that were selected and deselect them
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined;
break;
}
}
e.item.dataContext.selected = "#8198b4";
}
e.chart.validateData(); //update chart
}
}]
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
I am trying to query the following data:
(obtained from:https://dotnetcodr.com/2017/06/21/introduction-to-couchdb-with-net-part-17-starting-with-mango-queries/)
{
"post_code": 35801,
"country": "United States",
"country_abbreviation": "US",
"places": [
{
"place_name": "Huntsville",
"longitude": -86.5673,
"state": "Alabama",
"state_abbreviation": "AL",
"latitude": 34.7269
}
]
},
..........
My question:
How to include, say, firstly, the place_name, in the query.
The following javascript does not give a result:
{
"selector": {
"post_code": {"$eq": 35801}
},
"fields":["places.placename"]
}
correct index on post_code:
{
"index": {
"fields": [
"post_code"
]
},
"type": "json",
"name": "post-code-index"
}
I did set up an additional index as follows:
{
"index": {
"fields": [
"places.placename"
]
},
"type": "json"
}
What if the data had the following field:
"old_post_code_numbers": [12345, 67890, ......]
or:
What if the data had the following fields:
"places":
{
"place_name": "Huntsville",
"longitude": -86.5673,
"state": "Alabama",
"state_abbreviation": "AL",
"latitude": 34.7269
}
JSON has so many forms and I struggle to get a handle on the principles behind the javascript required for these kind of queries.
I know it is simple. It must be simple.
Many thanks for any guidance or websites I should/could visit.
Edit:
I managed to get the following to work on an online javascript testing site, but I still could not get this to work in CouchDB Mango. Surely this is possible in CouchDB.???
var xxx=
{
"post_code": 82941,
"country": "United States",
"country_abbreviation": "US",
"places": [
{
"place_name": "Pinedale",
"longitude": -109.8561,
"state": "Wyoming",
"state_abbreviation": "WY",
"latitude": 42.8543
}]
}
console.log(xxx.places[0].place_name);
I have been able to get a result for part 1. of my question (based on the answer to this question), as follows:
My index:
{
"type": "json",
"def": {
"fields": [
{
"places.0.place_name": "asc"
}
]
}
}
My query:
{
"selector": {
"places.0.place_name": {
"$gte": null
}
},
"fields": [
"_id",
"places.0.place_name"
],
"sort": [
{
"places.0.place_name": "asc"
}
]
}
Result:
{"docs":[
{"_id":"254b9a8c7a46934363076cc3d9034082","places":{"0":{"place_name":"Aberdeen"}}},
{"_id":"254b9a8c7a46934363076cc3d9037559","places":{"0":{"place_name":"Altavista"}}},
{"_id":"254b9a8c7a46934363076cc3d900e4d2","places":{"0":{"place_name":"Anchorage"}}},
{"_id":"254b9a8c7a46934363076cc3d900f3b9","places":{"0":{"place_name":"Anchorage"}}},
{"_id":"254b9a8c7a46934363076cc3d902c738","places":{"0":{"place_name":"Ashland"}}},
{"_id":"254b9a8c7a46934363076cc3d901a2f2","places":{"0":{"place_name":"Atlanta"}}},
{"_id":"254b9a8c7a46934363076cc3d901a374","places":{"0":{"place_name":"Atlanta"}}}
.................
In this case I have omitted the "post_code": {"$eq": 35801} but this can be added without an error occurring.
part3:
Index:
{
"index": {
"fields": [
{
"places.place_name": "asc"
}
]
},
"type": "json"
}
Query:
{
"selector": {
"places.place_name": {
"$gte": null
}
},
"fields": [
"places.place_name"
],
"sort": [
{
"places.place_name": "asc"
}
]
}
Result:
{"docs":[
{"places":{"place_name":"Anchorage"}},
{"places":{"place_name":"Anchorage"}},
{"places":{"place_name":"Huntsville"}},
{"places":{"place_name":"Huntsville"}},
{"places":{"place_name":"Phoenix"}},
{"places":{"place_name":"Phoenix"}}
]}
Part 2:
Index:
{
"index": {
"fields": [
{
"old_post_code_numbers": "asc"
}
]
},
"type": "json"
}
Query:
{
"selector": {
"old_post_code_numbers": {
"$gte": null
}
},
"fields": [
"places.place_name",
"old_post_code_numbers"
],
"sort": [
{
"old_post_code_numbers": "asc"
}
]
}
Result:
{"docs":[
{"places":{"place_name":"Huntsville"},"old_post_code_numbers":[12345,67890]},
{"places":{"place_name":"Huntsville"},"old_post_code_numbers":[12345,67890]},
{"places":{"place_name":"Anchorage"},"old_post_code_numbers":[12345,67890]},
{"places":{"place_name":"Anchorage"},"old_post_code_numbers":[12345,67890]},
{"places":{"place_name":"Phoenix"},"old_post_code_numbers":[12345,67890]},
{"places":{"place_name":"Phoenix"},"old_post_code_numbers":[12345,67890]}
]}
The last example using: "old_post_code_numbers.0" throughout, gives:
{"docs":[
{"places":{"place_name":"Huntsville"},"old_post_code_numbers":{"0":12345}},
{"places":{"place_name":"Huntsville"},"old_post_code_numbers":{"0":12345}},
{"places":{"place_name":"Anchorage"},"old_post_code_numbers":{"0":12345}},
{"places":{"place_name":"Anchorage"},"old_post_code_numbers":{"0":12345}},
{"places":{"place_name":"Phoenix"},"old_post_code_numbers":{"0":12345}},
{"places":{"place_name":"Phoenix"},"old_post_code_numbers":{"0":12345}}
]}
I would appreciate any comments.
I am trying to create chart in my widget. I am using AM Charts for this purpose.
I am having a script file(.js) in which I am unable to load the AM Charts. The scripts are getting loaded but I am getting the error "AmCharts is not defined".
My Widget Code:
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}
/******** Our main function ********/
function main() {
var LanguageVal = 1;
jQuery(document).ready(function ($) {
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "Content/css/DailyPrices.css"
});
css_link.appendTo('head');
var css_link1 = $("<link>", {
rel: "stylesheet",
type: "text/css",
media:"all",
href: "https://www.amcharts.com/lib/3/plugins/export/export.css"
});
css_link1.appendTo('head');
var css_link2 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/amcharts.js",
});
css_link2.appendTo('head');
var css_link3 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/serial.js",
});
css_link3.appendTo('head');
var css_link4 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/plugins/export/export.min.js",
});
css_link4.appendTo('head');
var css_link5 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/themes/light.js",
});
css_link5.appendTo('head');
$.ajax({
url: "http://localhost:44360/api/TodayPrice/DailyPrice",
data: { Language: LanguageVal },
success: function (result) {
var list1 = result.data;
var list2 = result.HeaderLst;
var TodayDieselPrice = list1[0].TodayDieselPrice;
var TodayPetrolPrice = list1[0].TodayPetrolPrice;
var YesterdayDieselPrice = list1[0].YesterdayDieselPrice;
var YesterdayPetrolPrice = list1[0].YesterdayPetrolPrice;
var PetrolText = list1[0].PetrolText;
var DieselText = list1[0].DieselText;
var PetrolIconColor = list1[0].PetrolIconColor;
var DieselIconColor = list1[0].DieselIconColor;
var FirstHeader = list2[0].FirstHeader;
var SecondHeader = list2[0].SecondHeader;
var ThirdHeader = list2[0].ThirdHeader;
var FourthHeader = list2[0].FourthHeader;
var FifthHeader = list2[0].FifthHeader;
var LastHeader = list2[0].LastHeader;
$("#example-widget-container").append('<div class="WholeDiv row"><div class="col-md-12 firstrow"><div style="float:left;padding:8px">'+FirstHeader+'</div><div style="float:right"><img src="Content/images/Petrol-pump-icon.png"/></div></div>'+
'<div class="col-md-12 secondrow"><div class="col-md-3">'+SecondHeader+'</div><div class="col-md-4">'+ThirdHeader+'</div><div class="col-md-2"></div><div class="col-md-3">'+FourthHeader+'</div></div><div class="col-md-12 thirdrow"><div class="col-md-3">'+PetrolText+'</div><div class="col-md-4">'+YesterdayPetrolPrice+'</div><div class="col-md-2"><div class="PIconColor"></div></div><div class="col-md-3">'+TodayPetrolPrice+'</div></div>'+
'<div class="col-md-12 fourthrow"><div class="col-md-3">'+DieselText+'</div><div class="col-md-4">'+YesterdayDieselPrice+'</div><div class="col-md-2"><div class="DIconColor"></div></div><div class="col-md-3">'+TodayDieselPrice+'</div></div><div class="col-md-12 fifthrow"> <div style="float:left"><a>'+FifthHeader+'</a></div> <div style="float:right" class="sponsorDiv"><div class="sponsorTextDiv">Powered By ICICI</div></div></div></div>');
$("#example-widget-container").append('<div id="chartdiv"></div>');
if (PetrolIconColor == "Red") {
$('.PIconColor').addClass('arrow-up');
}
else
{
$('.PIconColor').addClass('arrow-down');
}
if (DieselIconColor == "Red") {
$('.DIconColor').addClass('arrow-up');
}
else {
$('.DIconColor').addClass('arrow-down');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
});
}
})(); // We call our anonymous function immediately
HTML Code:
<div id="example-widget-container"></div>
Try following order atleast AmCharts issue seems to be resolved
function loadChart() {
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
}
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "Content/css/DailyPrices.css"
});
css_link.appendTo('head');
var css_link1 = $("<link>", {
rel: "stylesheet",
type: "text/css",
media:"all",
href: "https://www.amcharts.com/lib/3/plugins/export/export.css"
});
css_link1.appendTo('head');
var css_link2 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/amcharts.js",
});
css_link2.appendTo('head');
var css_link3 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/serial.js",
});
css_link3.appendTo('head');
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
setTimeout(function(){
// wait for amchart to load
var css_link4 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/plugins/export/export.min.js",
});
css_link4.appendTo('head');
jQuery = window.jQuery.noConflict(true);
var css_link5 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/themes/light.js",
});
css_link5.appendTo('head');
main();
}, 1000);
}
/******** Our main function ********/
function main() {
var LanguageVal = 1;
jQuery(document).ready(function ($) {
$.ajax({
url: "http://localhost:44360/api/TodayPrice/DailyPrice",
data: { Language: LanguageVal },
success: function (result) {
var list1 = result.data;
var list2 = result.HeaderLst;
var TodayDieselPrice = list1[0].TodayDieselPrice;
var TodayPetrolPrice = list1[0].TodayPetrolPrice;
var YesterdayDieselPrice = list1[0].YesterdayDieselPrice;
var YesterdayPetrolPrice = list1[0].YesterdayPetrolPrice;
var PetrolText = list1[0].PetrolText;
var DieselText = list1[0].DieselText;
var PetrolIconColor = list1[0].PetrolIconColor;
var DieselIconColor = list1[0].DieselIconColor;
var FirstHeader = list2[0].FirstHeader;
var SecondHeader = list2[0].SecondHeader;
var ThirdHeader = list2[0].ThirdHeader;
var FourthHeader = list2[0].FourthHeader;
var FifthHeader = list2[0].FifthHeader;
var LastHeader = list2[0].LastHeader;
$("#example-widget-container").append('<div class="WholeDiv row"><div class="col-md-12 firstrow"><div style="float:left;padding:8px">'+FirstHeader+'</div><div style="float:right"><img src="Content/images/Petrol-pump-icon.png"/></div></div>'+
'<div class="col-md-12 secondrow"><div class="col-md-3">'+SecondHeader+'</div><div class="col-md-4">'+ThirdHeader+'</div><div class="col-md-2"></div><div class="col-md-3">'+FourthHeader+'</div></div><div class="col-md-12 thirdrow"><div class="col-md-3">'+PetrolText+'</div><div class="col-md-4">'+YesterdayPetrolPrice+'</div><div class="col-md-2"><div class="PIconColor"></div></div><div class="col-md-3">'+TodayPetrolPrice+'</div></div>'+
'<div class="col-md-12 fourthrow"><div class="col-md-3">'+DieselText+'</div><div class="col-md-4">'+YesterdayDieselPrice+'</div><div class="col-md-2"><div class="DIconColor"></div></div><div class="col-md-3">'+TodayDieselPrice+'</div></div><div class="col-md-12 fifthrow"> <div style="float:left"><a>'+FifthHeader+'</a></div> <div style="float:right" class="sponsorDiv"><div class="sponsorTextDiv">Powered By ICICI</div></div></div></div>');
$("#example-widget-container").append('<div id="chartdiv"></div>');
if (PetrolIconColor == "Red") {
$('.PIconColor').addClass('arrow-up');
}
else
{
$('.PIconColor').addClass('arrow-down');
}
if (DieselIconColor == "Red") {
$('.DIconColor').addClass('arrow-up');
}
else {
$('.DIconColor').addClass('arrow-down');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
});
loadChart();
});
}
})();
My HTML code is like this :
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
My Javascript code is like this :
var chart;
var legend;
var chartData = [
{
"country": "Czech Republic",
"litres": 301.9
},
{
"country": "Ireland",
"litres": 201.1
},
{
"country": "Germany",
"litres": 165.8
},
{
"country": "Australia",
"litres": 139.9
},
{
"country": "Austria",
"litres": 128.3
},
{
"country": "UK",
"litres": 99
},
{
"country": "Belgium",
"litres": 60
}
];
console.log(chartData);
AmCharts.ready(function () {
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
// WRITE
chart.write("chartdiv");
});
Demo and complete code is like this : https://jsfiddle.net/oscar11/4qdan7k7/2/
I want to change amchart themes like this : https://www.amcharts.com/demos/simple-pie-chart/
I add light.js library, but the themes not change
Any solution to solve my problem?
You need to specify the theme option while initializing as below and also make use of makeChart directly instead of Amcharts.AmPieChart(). Your updated code would be:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": chartData,
"valueField": "litres",
"titleField": "country",
"export": {
"enabled": true
}
});
UPDATED FIDDLE