Dart Chartjs Bubble Example - dart
I'm struggling to get the chart.js dart port to properly render a bubble chart when serving the web app with the --release flag. Using dart2js seems to be breaking the chart, as it works perfectly with --no-release.
The chart renders in properly, and the axes look fine. It's just the data that isn't rendering in. No errors are thrown in the console.
I've tried two approaches to adding the data. One with a simple map, like so:
List<Map> myData = [];
myData.add({'x': 0, 'y': 0, 'r': 5}); //for example..
ChartDataSets dataset = new ChartDataSets(
label: 'outer',
data: myData
);
var chartData = new LinearChartData(datasets: <ChartDataSets>[
dataset,
]);
ChartConfiguration config = new ChartConfiguration(
type: 'bubble', data: dataset, options: new ChartOptions(
responsive: true,
legend: new ChartLegendOptions(display: false),
scales: scales,
));
I've also tried creating an class to hold the data, and handing objects to the input list:
class BubbleObject{
int x;
int y;
double r;
BubbleObject(this.x, this.y, this.r);
}
so myData becomes List<BubbleObject> myData = []
Any idea why the --release flag would break this approach, and how this issue can be fixed?
Thanks in advance!
Related
Merging topojson using topomerge messes up winding order
I'm trying to create a custom world map where countries are merged into regions instead of having individual countries. Unfortunately for some reason something seems to get messed up with the winding order along the process.
As base data I'm using the natural earth 10m_admin_0_countries shape files available here. As criteria for merging countries I have a lookup map that looks like this:
const countryGroups = {
"EUR": ["ALA", "AUT", "BEL"...],
"AFR": ["AGO", "BDI", "BEN"...],
...
}
To merge the shapes I'm using topojson-client. Since I want to have a higher level of control than the CLI commands offer, I wrote a script. It goes through the lookup map and picks out all the topojson features that belong to a group and merges them into one shape and places the resulting merged features into a geojson frame:
const topojsonClient = require("topojson-client");
const topojsonServer = require("topojson-server");
const worldTopo = topojsonServer.topology({
countries: JSON.parse(fs.readFileSync("./world.geojson", "utf-8")),
});
const geoJson = {
type: "FeatureCollection",
features: Object.entries(countryGroups).map(([region, ids]) => {
const relevantCountries = worldTopo.objects.countries.geometries.filter(
(country, i) =>
ids.indexOf(country.properties.ISO_A3) >= 0
);
return {
type: "Feature",
properties: { region, countries: ids },
geometry: topojsonClient.merge(worldTopo, relevantCountries),
};
}),
};
So far everything works well (allegedly). When I try to visualise the map using github gist (or any other visualisation tool like vega lite) the shapes seem to be all messed up. I'm suspecting that I'm doing something wrong during the merging of the features but I can't figure out what it is.
When I try to do the same using the CLI it seems to work fine. But since I need more control over the merging, using just the CLI is not really an option.
The last feature, called "World", should contain all remaining countries, but instead, it contains all countries, period. You can see this in the following showcase.
var w = 900,
h = 300;
var projection = d3.geoMercator().translate([w / 2, h / 2]).scale(100);
var path = d3.geoPath().projection(projection);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select('svg')
.attr('width', w)
.attr('height', h);
var url = "https://gist.githubusercontent.com/Flave/832ebba5726aeca3518b1356d9d726cb/raw/5957dca433cbf50fe4dea0c3fa94bb4f91c754b7/world-regions-wrong.topojson";
d3.json(url)
.then(data => {
var geojson = topojson.feature(data, data.objects.regions);
geojson.features.forEach(f => {
console.log(f.properties.region, f.properties.countries);
});
svg.selectAll('path')
// Reverse because it's the last feature that is the problem
.data(geojson.features.reverse())
.enter()
.append('path')
.attr('d', path)
.attr('fill', d => color(d.properties.region))
.attr('stroke', d => color(d.properties.region))
.on('mouseenter', function() {
d3.select(this).style('fill-opacity', 1);
})
.on('mouseleave', function() {
d3.select(this).style('fill-opacity', null);
});
});
path {
fill-opacity: 0.3;
stroke-width: 2px;
stroke-opacity: 0.4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<script src="https://d3js.org/topojson.v3.js"></script>
<svg></svg>
To fix this, I'd make sure to always remove all assigned countries from the list. From your data, I can't see where "World" is defined, and if it contains all countries on earth, or if it's a wildcard assignment.
In any case, you should be able to fix it by removing all matches from worldTopo:
const topojsonClient = require("topojson-client");
const topojsonServer = require("topojson-server");
const worldTopo = topojsonServer.topology({
countries: JSON.parse(fs.readFileSync("./world.geojson", "utf-8")),
});
const geoJson = {
type: "FeatureCollection",
features: Object.entries(countryGroups).map(([region, ids]) => {
const relevantCountries = worldTopo.objects.countries.geometries.filter(
(country, i) =>
ids.indexOf(country.properties.ISO_A3) >= 0
);
relevantCountries.forEach(c => {
const index = worldTopo.indexOf(c);
if (index === -1) throw Error(`Expected to find country ${c.properties.ISO_A3} in worldTopo`);
worldTopo.splice(index, 1);
});
return {
type: "Feature",
properties: { region, countries: ids },
geometry: topojsonClient.merge(worldTopo, relevantCountries),
};
}),
};
how to draw dynamic series in Highchart based on data
I want add number of series based on the data. Example sometimes for the same request, High-chart may include 2 series or 4 series. Ex: Request 1 [[ser1,ser2,datetime],[ser1,ser2,datetime]] Request 2 [[ser1,ser2, ser3,ser4, datetime],[ser1,ser2, ser3,ser4, datetime]] Where "datetime" is x-axis values Could you please suggest me how to approach this.
You can convert your data to the right format in the preprocessing.
var json = [
[2, 4, 1500284119000],
[10, 20, 1500284141000]
],
series = [],
each = Highcharts.each,
len;
each(json, function(items, i) {
len = items.length;
each(items, function(item, j) {
if (j < len - 1) {
if (i === 0) { // create series structure
series.push({
data: []
});
}
series[j].data.push({
x: items[len - 1],
y: item
})
}
});
});
Example:
http://jsfiddle.net/hx97ak00/
I would suggest you to change the response structure if your xAxis is a datetime. better include the timestamp along with data as below seriesData = [[timestamp1, val1],[timestamp2, val],[timestamp3, val3],......] now your request looks like this Request 1 [seriesData1, seriesData2, seriesData3,seriesData4] Request 2 [seriesData1, seriesData2, seriesData3, seriesData4, seriesData5, seriesData6, seriesData7,seriesData8] I think you went to have a separate array for datetime because you have diffent number of series of data for 2 different timestamps. In the above mentioned approach. you can directly feed the series section with the incoming response of the request. Hope this will help you.
How do I configure the options in Highcharts to allow multiple drilldowns asynchronously?
I'm trying to convert the following options in Highcharts to multiple series with multiple drilldowns. The problem is that I've changed the loop to progress over the points so as to add both drilldown series. However, in the loop I've written, it seems to be the case that after one go through the loop, the points array is overwritten with nulls, which makes the whole thing irrelevant.
I'm a beginner with the options, and after having spent quite a bit of time on it I can't crack it. An explanation and a solution would be an ideal answer to the question: "How do I do the following with multiple drilldowns?" It's all asynchronous requests on datasets.
I'm starting with
options.chart = options.chart || {};
options.chart.events = options.chart.events || {};
var dd = options.chart.events.drilldown || function(e) {};
options.chart.events.drilldown = function(e) {
var chart = this;
chart._drilldowns = chart._drilldowns || {};
var series = chart._drilldowns[e.point.drilldown];
if (series) {
e.seriesOptions = series;
chart.addSeriesAsDrilldown(e.point, series);
dd(e);
}
if (!e.seriesOptions) {
chart.showLoading('Fetching data...');
$.getJSON(
'%(url)s?' + analytics.get_form_data(),
function(drilldowns) {
chart.hideLoading();
chart._drilldowns = drilldowns;
var series = drilldowns[e.point.drilldown];
chart.addSeriesAsDrilldown(e.point, series);
e.seriesOptions = series;
dd(e);
}
);
}
};
''' % {'url': self.get_drilldown_url()}
and I've tried to change the second part to:
...
function(drilldowns) {
chart.hideLoading();
chart._drilldowns = drilldowns;
e.points.forEach(function(value, key){
var series = drilldowns[value.drilldown];
chart.addSeriesAsDrilldown(value, series);
})
e.seriesOptions = series;
dd(e);
}
);
}
};
But I don't get both my series drilling down. I actually get a Property xAxis of null is not allowed error, as when I go through the loop the second time, the set of points has been changed to null.
UPDATE
We eventually fixed (actually a collegue did!) using promises. We engineered it to wait until the first async request for data was retrieved, and then called addSingleSeriesAsDrilldown on each one until we hit the last one (derived off the chart state) at which point we called addSeriesAsDrilldown which does the applyDrilldown as part of the code.
It's not the part of official API, but this way you can get multiple drilldowns: http://jsfiddle.net/p2xw9416/ In the lowest level of AJAX requests (if you have multiple of them), add each series as single object: chart.hideLoading(); chart.addSingleSeriesAsDrilldown(e.point, series_1); chart.addSingleSeriesAsDrilldown(e.point, series_2); chart.applyDrilldown(); // update && animate
highcharts not plotting json string containing x,y pairs (string, float). how to fix?
I just switch from jqplot to highcharts, because i couldn't find an answer for my problem with jqplot.
My problem:
I want to plot the following result from a json string. this string contains out of datapairs in the following format: yyyy00kw (year with 4digits, 00 for padding, weeknumber 2digits) and a value (could be formated to float).
because the x value of the pair could change to yyyymmdd (year month day) or yyyywwdd (year week day) it has to be a string.
My json string contains the following:
[
[
["20050043",12.800000190735],
["20050044",17.39999961853],
["20050045",10.10000038147],
["20050046",5.9000000953674],
["20050048",4.6999998092651],
["20050049",9.8999996185303],
["20050050",9.1999998092651],
["20050051",8.3999996185303],
["20050052",2.0999999046326],
["20060001",2.7000000476837],
["20060002",-1.1000000238419],
["20060004",2],
["20060005",4.9000000953674],
["20060006",6.8000001907349],
["20060007",6.0999999046326],
["20060009",4.3000001907349],
["20060010",3.4000000953674],
["20060011",8.1999998092651],
["20060012",7],
["20060017",11.60000038147],
["20060018",21.60000038147],
["20060019",24.799999237061],
["20060020",16.700000762939],
["20060021",0],
["20060022",0],
["20060024",0],
["20060025",18.10000038147],
["20060026",20.200000762939],
["20060052",2.9000000953674],
["20070001",0],
["20070019",0],
["20070020",0],
["20070024",0],
["20070025",0],
["20070026",0],
["20070027",0],
["20070028",0],
["20070029",0],
["20070030",0],
["20070031",0],
["20070032",0],
["20070033",0],
["20070034",0],
["20070035",0],
["20070036",0],
["20070037",0],
["20070038",0],
["20070039",0],
["20070040",0],
["20070041",0],
["20070042",0],
["20070043",0],
["20070044",0],
["20070045",0],
["20070046",0],
["20070047",0],
["20070048",0],
["20070049",0],
["20070050",0],
["20070051",0],
["20070052",0],
["20080001",0],
["20080002",0],
["20080003",0],
["20080004",0],
["20080005",0],
["20080006",0],
["20080007",0],
["20080008",0],
["20080009",0],
["20080010",0],
["20080012",0],
["20080013",0],
["20080017",0],
["20080018",0],
["20080019",0],
["20080020",0],
["20080021",0],
["20080022",0],
["20080023",0],
["20080024",0],
["20080025",0],
["20080026",0],
["20080027",0],
["20080028",0],
["20080029",0],
["20080030",0],
["20080031",0],
["20080034",0],
["20080035",0],
["20080036",0],
["20080037",0],
["20080038",0],
["20080039",0],
["20080040",0],
["20080041",0],
["20080042",0],
["20080043",0],
["20080044",0],
["20080045",0],
["20080046",0],
["20080047",0],
["20080048",0],
["20080049",0],
["20080050",0],
["20080051",0],
["20080052",0],
["20090001",0],
["20090002",0],
["20090003",0],
["20090004",0],
["20090005",0],
["20090006",0],
["20090024",0],
["20090025",0],
["20090026",0],
["20090028",0],
["20090029",0],
["20090030",0],
["20090031",0],
["20090032",0],
["20090033",0],
["20090034",0],
["20090035",0],
["20090036",0],
["20090037",0],
["20090038",0],
["20090039",0],
["20090040",0],
["20090041",0],
["20090042",0],
["20090043",0],
["20090044",0],
["20090045",0],
["20090046",0],
["20090047",0],
["20090048",0],
["20090049",0],
["20090050",0],
["20090051",0],
["20090052",0],
["20090053",0],
["20100001",0],
["20100002",0],
["20100003",0],
["20100004",0],
["20100005",0],
["20100006",0],
["20100007",0],
["20100008",0],
["20100009",0],
["20100010",0],
["20100011",0],
["20100012",0],
["20100013",0],
["20100014",0],
["20100015",0],
["20100016",0],
["20100017",0],
["20100018",0],
["20100019",0],
["20100020",0],
["20100021",0],
["20100022",0],
["20100023",0],
["20100024",0],
["20100025",0],
["20100026",0],
["20100027",0],
["20100028",0],
["20100029",0],
["20100030",0],
["20100031",0],
["20100032",0],
["20100033",0],
["20100034",0],
["20100035",0],
["20100036",0],
["20100037",0],
["20100038",0],
["20100039",0],
["20100040",0],
["20100041",0],
["20100042",0],
["20100043",0],
["20100044",0],
["20100045",0],
["20100046",0],
["20100047",0],
["20100048",0],
["20100049",0],
["20100050",0],
["20100051",0],
["20100052",0],
["20100053",0],
["20110001",0],
["20110002",0],
["20110003",0],
["20110004",0],
["20110005",0],
["20110006",0],
["20110007",0],
["20110008",0],
["20110009",0],
["20110010",0],
["20110014",0],
["20110015",0],
["20110016",0],
["20110017",0],
["20110018",0],
["20110019",0],
["20110020",0],
["20110021",0],
["20110022",0],
["20110023",0],
["20110024",0],
["20110025",0],
["20110026",0],
["20110027",0],
["20110028",0],
["20110029",0],
["20110030",0],
["20110031",0],
["20110032",0],
["20110033",0],
["20110034",0],
["20110035",0],
["20110036",0],
["20110039",0],
["20110043",0],
["20110044",0],
["20110045",0],
["20110046",0],
["20110047",0],
["20110048",0],
["20110049",0],
["20110052",0],
["20120001",0],
["20120002",0],
["20120003",0],
["20120004",0],
["20120005",0],
["20120006",0],
["20120007",0],
["20120009",0],
["20120010",0],
["20120013",0],
["20120014",0],
["20120015",0],
["20120016",0],
["20120017",0]
]
]
Here is my javascript code:
<script class="code" type="text/javascript">
var data = [];
var chart;
$(document).ready(function() {
//hier geht es los
$.getJSON("120925_sql_bauen.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: 'line'
},
title: {
text: 'Wetterdatenprojekt'
},
xAxis: {
//categories: []
},
yAxis: {
title: {
text: 'aktuelle Wetterwerte'
},
plotLines: [{
value: 0,
width: 1
}]
},
series: json
});
});
});
</script>
Unfortunately highcharts shows no plot.
I hope, that highcharts doesn't have the same problem with strings then jqplot :-(
The problem is that you try to use your reply directly. You need to "remove" one layer of arrays. That is data should be json[0]
I updated my example: http://jsfiddle.net/GgNmY/2/
Regarding previous note that values should be numeric is only true for Y-axis (at least in earlier versions of Highcharts).
Edit: Here is to extract the data point (the values) and the categories.
var data = [];
var cats = [];
json[0].forEach(function(point){
data.push(point[1]);
cats.push(point[0]);
});
Here is an running example: http://jsfiddle.net/GgNmY/3/
In Highchart, you can set your series : data object in the form of the JSON input.
In such a case, if the JSON input is in the form:
[
[1,12],
[2,5],
[3,18],
....
[10,22]
]
Then the following attribute can be added in the chart definition:
series:[{
data: json
}]
Here is the running JSFiddle example
Highcharts not rendering data points
I'm pulling some data from a database that I'm trying to render into a Highcharts stock chart. The data is pulled from the database with PHP and passed to the chart with a $.get(..php/line-data.php) call, and the data retrieved is supposed to be the data that is rendered on the chart.
The data is being returned in the following manner, and I have verified this by logging data in the console. It appears as such, with the first value being the UNIX-to-Javascript converted date/time (x-axis), and the second being the value (y-axis):
[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]
As an experiment, I tried just plugging this data straight into a basic demo Fiddle, and it seems to render fine.
FIDDLE HERE.
So what am I doing incorrectly? Everything seems to be set up correctly, but it's not rendering. This is what I see:
Here are the relevant portions of my code. Yes, I know that mysql_* is deprecated...I'll change it.
$.get('../php/line-data.php', function(data) {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'total_mentions',
margin: [20, 10, 10, 10],
spacingTop: 0,
spacingBottom: 1,
spacingLeft: 0,
spacingRight: 0
},
series : [{
name : 'Total Mentions',
data: data,
type:'line',
lineWidth:1,
shadow:false,
states: {
hover: {
lineWidth:1
}
},
id : 'dataseries',
tooltip : {
valueDecimals: 4,
borderColor:'#DA7925',
borderRadius: 0,
borderWidth: 1,
shadow: false
},
color:'#DA7925',
fillOpacity:0.2
}]
[more options...etc.]
No problems with this code. It's pulling the correct data and echoing how I expect it to.
<?php
$expAddress = "URL";
$expUser = "USERNAME";
$expPwd = "PASSWORD";
$database = "DB";
$db = mysql_connect($expAddress, $expUser, $expPwd);
mysql_select_db($database, $db);
$ok = mysql_query("
SELECT
DATE(created_at) AS create_date,
COUNT(id) AS total
FROM
tweets
WHERE
subject LIKE 'word1'
OR
subject LIKE 'word2'
GROUP BY
DATE(created_at)");
if (!$ok) {
echo "<li>Mysql Error: ".mysql_error()."</li>";
}
else {
while($row = mysql_fetch_assoc($ok)){
extract($row);
$date = strtotime($create_date);
$date *= 1000;
$data[] = "[$date, $total]";
}
$tmp = join($data,',');
echo "[".$tmp."]";
}
?>
Have you tried parsing your data (string) into a javascript object before setting it to the series[i].data?
series : [{
data: JSON.parse(data)
}]
What you are getting from php through $.get is basically string and NOT a javascript array of array of numbers, which is what you want. It may look like that, but it is as simple as "5"!=5, but parseInt("5")==5 same is the case with json objects, you need to parse the string into such an object before javascript or highcharts can interpret it correctly, highcharts could do it on your behalf, but it is not designed that way.
Try his fiddle to get an idea of the data types in picture
var data="[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]"
console.log(typeof data); //string
var parsedData=JSON.parse(data);
console.log(typeof parsedData); //object
console.log(typeof parsedData[0]); //object [1362639600000, 8]
console.log(typeof parsedData[0][0]); //number 1362639600000
When you paste the console value directly in the fiddle, you are actually pasting it as a valid javascript array, try using your console value wrapped by " quotes " and see that the exact issue is reproduced!!
Demo # jsFiddle
An alternate approach could be using the $.getJSON() method instead. jQuery does the parsing for you before it calls your callback method
Your problem is in either the output from the PHP script or when you receive the data in your Javascript (quite obvious). First, don't do JSON by hand use json_encode (http://php.net/manual/en/function.json-encode.php). It's easier and it will guarantee that strings will be escaped properly. Secondly, inspect your data variable with a debugger. You could also post the exact content of the variable to the question. But basically, as long as it is working in the fiddle and not in your program you have not yet reproduced the error in your code properly in the fiddle. For instance, you could replace data in your callback with the data you have in your fiddle to see if the code runs.