How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
Related
Only articles that contain the EmailMarketing tag are needed.
I'm probably doing the wrong search on the tag, since it's an array of values, not a single object, but I don't know how to do it right, I'm just learning graphql. Any help would be appreciated
query:
query {
enArticles {
title
previewText
tags(where: {name: "EmailMarketing"}){
name
}
}
}
result:
{
"data": {
"enArticles": [
{
"title": "title1",
"previewText": "previewText1",
"tags": [
{
"name": "EmailMarketing"
},
{
"name": "Personalization"
},
{
"name": "Advertising_campaign"
}
]
},
{
"title": "title2",
"previewText": "previewText2",
"tags": [
{
"name": "Marketing_strategy"
},
{
"name": "Marketing"
},
{
"name": "Marketing_campaign"
}
]
},
{
"title": "article 12",
"previewText": "article12",
"tags": []
}
]
}
}
I believe you first need to have coded an equality operator within your GraphQL schema. There's a good explanation of that here.
Once you add an equality operator - say, for example _eq - you can use it something like this:
query {
enArticles {
title
previewText
tags(where: {name: {_eq: "EmailMarketing"}}){
name
}
}
}
Specifically, you would need to create a filter and resolver.
The example here may help.
Using rotated labels on category X axis. (Real graph uses long names but results are the same.)
A: Alignment of axis labels and their data points is fine without label rotation.
B: Labels are not aligned when rotated.
The only difference between A and B graph coding is the addition of "labels":{"rotation":90} in the xAxes renderer.
How can alignment be fixed?
var chart =am4core.createFromConfig({
"colors": { "list": ["#DB3", "#000", "#888"] },
"data": [$data],
"legend": { "markers":{"width":20, "height":10},
"position":"top",
"useDefaultMarker":true
},
"series": [
{ "dataFields": { "categoryX":"X", "valueY":"Y1" },
"name": "[font-size:16px;font-weight:600;]{$n1}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y2" },
"name": "[font-size:16px;font-weight:600;]{$n2}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y3" },
"name": "[font-size:16px;font-weight:600;]others[/]",
"strokeWidth": 2,
"type": "LineSeries"
}
],
"xAxes": [
{ "dataFields": { "category": "X" },
"renderer": { "minGridDistance":11, "labels":{"rotation":90}},
"type": "CategoryAxis"
}
],
"yAxes": [
{ "renderer": {"minGridDistance":15},
"title": {"text": "[font-size:16px;font-weight:600;]Values[/]"},
"type": "ValueAxis"
}]
}, "line", am4charts.XYChart);
LABELS renderer needed "verticalCenter":"middle" with rotation.
I don't know how many other things I tried!
I am trying to retrieve data from the weather.gov API - it returns the format in geoJSON and I am not sure how to actually get the data I want from it.
If I am using the weatherbit.io API, I have no issues as it returns JSON format in which I can pull from rather easily.
I am using GuzzleHTTP to make the API call.
I am playing around with learning APIs and I have an interest in weather so I figured I would work on an application in which I could pull information from the local weather station and output it in to readable format for users in a table.
The code I am currently using is:
$api_call = https://api.weather.xxx/points/LAT,LON;
$client = new \GuzzleHttp\Client();
$request = $client->get($api_call);
if ($request->getStatusCode() == 200) {
$weatherRequest = $request->getBody();
$requestedWeather = json_decode($weatherRequest);
$currentweather = $requestedWeather; ** THIS IS WHERE I NEED HELP ***
}
return $currentweather;
});
return view('currentweather', ["currentweather" => $currentweather]);
When I am returning $currentweather and var_dump it to the view, it gives me all the geoJSON data but I don't know how to correctly iterate through the data to pull the information I need.
When I pull from another API it gives a different JSON format which I can just pull like so:
$api_call = https://api.weatherbit.xx/v2.0/current?
$client = new \GuzzleHttp\Client();
$request = $client->get($api_call);
if ($request->getStatusCode() == 200) {
$weatherRequest = $request->getBody();
$requestedWeather = json_decode($weatherRequest);
$currentweather = $requestedWeather->data;
}
return $currentweather;
});
return view('currentweather', ["currentweather" => $currentweather]);
}
And when I use $currentweather in my view I can pull any data I need with the object string name. I am not sure how to pull the data when it's leading off with the #Context tag.
The data I want lies in the "properties" part of the geoJSON array and I just can't seem to figure out how to get that in the way I am currently using.
This is my geoJSON array return:
{ "#context": [ "https://raw.githubusercontent.xxx/geojson/geojson-ld/master/contexts/geojson-base.jsonld", { "wx": "https://api.weather.xxx/ontology#", "s": "https://schema.org/", "geo": "http://www.opengis.xxx/ont/geosparql#", "unit": "http://codes.wmo.xxx/common/unit/", "#vocab": "https://api.weather.xxx/ontology#", "geometry":
{ "#id": "s:GeoCoordinates", "#type": "geo:wktLiteral" }, "city": "s:addressLocality", "state": "s:addressRegion", "distance": { "#id": "s:Distance", "#type": "s:QuantitativeValue" }, "bearing": { "#type": "s:QuantitativeValue" }, "value": { "#id": "s:value" }, "unitCode":
{ "#id": "s:unitCode", "#type": "#id" }, "forecastOffice": { "#type": "#id" }, "forecastGridData": { "#type": "#id" }, "publicZone": { "#type": "#id" }, "county": { "#type": "#id" } } ], "id": "https://api.weather.xxx/points/xxx,xxx", "type": "Feature", "geometry": { "type": "Point", "coordinates": [ xxx, xxx ] }, "properties":
{ "#id": "https://api.weather.xxx/points/xxx,xxx", "#type": "wx:Point", "cwa": "xxx", "forecastOffice": "https://api.weather.xxx/offices/xxx", "gridX": 86, "gridY": 77, "forecast": "https://api.weather.xxx/gridpoints/xxx/xx,xx/forecast", "forecastHourly": "https://api.weather.xxx/gridpoints/xxx/xx,xx/forecast/hourly", "forecastGridData": "https://api.weather.xxx/gridpoints/xxx/xx,xx", "observationStations": "https://api.weather.xxx/gridpoints/xxx/xx,xx/stations", "relativeLocation":
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [ xxx, xxx ] }, "properties": { "city": "xxx", "state": "xx", "distance": { "value": xxxx.xxxxxxxxx, "unitCode": "unit:m" }, "bearing": { "value": 150, "unitCode": "unit:degrees_true" } } }, "forecastZone": "https://api.weather.xxx/zones/forecast/xxxxxx", "county": "https://api.weather.xxx/zones/county/xxxxxx", "fireWeatherZone": "https://api.weather.xxx/zones/fire/SCZ050", "timeZone": "America/New_York", "radarStation": "xxxx" } }
Thanks for your help!
Any member of the JSON object can be accessed via the same name on the object returned by json_decode. Your weatherbit example $requestedWeather->data works because everything is in a member called data. So... $requestedWeather->properties will get you what you want from the weather.gov API.
You can also pass true as a second argument to json_decode to get back a plain PHP array instead.
$requestedWeather = json_decode($weatherRequest, true);
var_dump($requestedWeather['properties']);
This is often recommended because JSON allows member names that are not valid PHP object property names (e.g., names containing hyphens).
I'm trying to create a pie chart with a custom set of colours using Am4Charts and the createFromConfig method.
I've followed the tutorial here but the chart keeps appearing with it's default color set.
Here is a sample of the JSON I've tried:
"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
"0": {
"pot": "Within 8 days",
"value": "£111,119.70",
},
"1": {
"pot": "9 - 17 days",
"value": "£225,537.73"
},
"2": {
"pot": "18+ days",
"value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
"type": "CategoryAxis",
"title": {
"text": "pot"
},
"dataFields": {
"category": "pot",
"title": {
"text": "Month"
}
},
"renderer": {
"labels": {
"rotation": 190,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}
],
"series": [
{
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
},
"ticks": {
"disabled": true
},
"labels": {
"disabled": true
},
}
],
Can somebody see where I've gone wrong?
Update 2:
Fixed in 4.0.0-beta.85.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
Update 1:
Response from amchart contributor/CTO Martynas Majeris (https://github.com/martynasma):
Looks like there are two issues: documentation is wrong and there's a bug that prevents it from working :)
I updated the docs. It should say this:
{
// ...
"series": [{
// ...
"colors": {
"list": [
"#845EC2",
"#D65DB1",
"#FF6F91",
"#FF9671",
"#FFC75F",
"#F9F871"
]
}
}]
}
Also, fixed bug in dev version. New version will be released within 1-2 days.
Original
This might be a bug and I have opened an issue on amchart github. I will update this once I get a response: https://github.com/amcharts/amcharts4/issues/577
By the way, I do think your configuration JSON has couple issues:
data is an array, not an object
legend is an object, not an array
This is what I used to create the pie chart demo for the opened issue:
// Create chart instance in one go
let chart = am4core.createFromConfig({
"colors": {
"list": ["#ff0000","#00ff00", "#0000ff"]
},
// Create pie series
"series": [{
"colors": ["#ff0000","#00ff00", "#0000ff"],
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
}
}],
// Add data
"data": [{
"pot": "Within 8 days",
"value": "£111,119.70"
}, {
"pot": "9 - 17 days",
"value": "£225,537.73"
}, {
"pot": "18+ days",
"value": "£720,279.85"
}],
// Add legend
"legend": {},
"innerRadius": 100
}, "chart", am4charts.PieChart);
While amcharts shows the India map correctly (showing the disputed regions as part of India) when displaying only India (http://jsfiddle.net/zxhseguw/5/)
"dataProvider": {
"map": "indiaLow",
"areas": [ {
"id": "IN-KA",
"value": 4447100,
}, {
"id": "IN-UP",
"value": 38763
}]
},
it shades it differently when rendering it on world map (http://jsfiddle.net/zxhseguw/6/)
"dataProvider": {
"map": "worldLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
I wonder, if there is a way to make it render India correctly, just like its possible in Google Charts by setting origin='India'
I'm assuming you're referring to the region around Kashmir, correct? Try using worldIndiaLow instead of worldLow, which includes more of that disputed area as part of India.
"dataProvider": {
"map": "worldIndiaLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
Updated fiddle