I am using dimplejs to create line charts on some sample data that I have.
The data looks like this (see html section, it is stored in data.tsv).
d3.js = dimplejs.org/lib/d3.v3.4.8.js
and the dimple code is:
<head>
<script src="d3.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = false;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text")
.each(function (d) {
// Remove all but the nth label
if (del % oneInEvery !== 0) {
this.remove();
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
del += 1;
});
}
}
};
var svg = dimple.newSvg("body", 800, 600);
d3.tsv("data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
var y =myChart.addMeasureAxis("y", "Returns");
y.overrideMax = 200;
myChart.addSeries("Name", dimple.plot.line);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
cleanAxis(x, 20);
});
/*var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];*/
/*var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.draw();*/
</script>
</body>
And the final chart looks like this:
And the questions are:
Why are the numbers not matching?
Why is there the big drop in the end of the data?
The representation of the data seems inconsistent, and there is no way this library was released with a bug like this.
Thank you for any pointers
Because you're plotting the Month field on the x axis, dimple is summing all of the returns for each month, so those are in fact month totals you are seeing (the drop at the end is presumably due to a partial month).
I think you may have more success with a time axis on x. You will not need the clean axis code then either. Try this (I haven't tested this code but it should be pretty close):
var svg = dimple.newSvg("body", 800, 600);
d3.tsv("data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
myChart.addTimeAxis("x", "Date", "%m/%d/%Y", "%b-%Y");
myChart.addMeasureAxis("y", "Returns");
myChart.addSeries("Name", dimple.plot.line);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
Related
I am using the jspdf library to create a pdf and its working out great. I am now trying to append to that pdf another existing pdf. At the moment when my user clicks the download button it fires off two separate downloads. I was thinking that a work around might be creating two images and adding them to my pdf created with Jspdf. Has anyone appended an existing pdf to a pdf generated using jspdf?
$(document).ready(function () {
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpg'
var specialElementHandlers = {
'#content': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
doc.fromHTML($('#content').get(0), 0, 0, {
'elementHandlers': specialElementHandlers
});
doc.save('TemporaryIdCard.pdf');
});
});
I ended up hacking an answer from here.
Not thrilled about it but it works. I created images from the content in the PDF I was trying to append and then added each as a page to my doc
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpeg';
var imgData2 = 'dogs.jpeg';
var imgData3 = 'kittens.jpeg';
var specialElementHandlers = {
'#content': function (element, renderer) {
return true;
}
};
var pageHeight = doc.internal.pageSize.height;
var y = 800;
var x = 800;
$('#cmd').click(function () {
doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
doc.fromHTML($('#content').get(0), 0, 0, {
'elementHandlers': specialElementHandlers
});
if (y >= pageHeight) {
doc.addPage();
doc.addImage(imgData3, 'JPEG', 45, 45, 500, 550);
y = 0;
}
if (x >= pageHeight) {
doc.addPage();
doc.addImage(imgData2, 'JPEG', 50, 70, 500, 500);
x = 0;
}
doc.save('TemporaryIdCard.pdf');
});
I have a question about the pie chart in c3.js.
How can I add the total count of a pie chart in the title??
var title = new Array('data1.sql','data2.sql')
var dtitle = new Array('title1','title2')
var chart = new Array('chart0', 'chart1')
for(var i = 0; i < title.length; i++){
chart[i] = c3.generate({
bindto : '#chart' + i,
size: {
height: 550,
width: 800
},
data : {
url : '/json/sql/data/test/' + title[i],
mimeType : 'json',
type : 'donut'
},
donut: {
title: dtitle[i] + ' - Total:' ,
label: {
format: function(value, ratio, id) {
return value;
}
}
}
});
}
The annoying thing here is that the title option can take a function, but the chart variable is not initialised within it so using the c3 api methods can't be done at this point.
So the best (maybe only) way is to add an onrendered callback that adds up the data as you'd need to anyways and then replace the text in the chart's title text using a spot of d3:
onrendered: function () {
var data = this.api.data();
var total = data.reduce (function (subtotal, t) {
return subtotal + t.values.reduce (function (subsubtotal,b) { return subsubtotal + b.value; }, 0);
}, 0);
d3.select(this.config.bindto + " .c3-chart-arcs-title").text("Total: "+total);
}
Edit: If you want it to keep track of a total as you hide/show series use this
var data = this.api.data.shown.call (this.api);
instead of
var data = this.api.data();
I'm still pretty new to JS, JQuery and Highcharts.
From the "dynamic-update" example in HighStock:
chart: {
events: {
load: function() {
var series = this.series[0];
var y = 1;
setInterval(function() {
var x = (new Date()).getTime();
$.get('get_most_recent_point_from_database.php',function(data){
alert( data);
var y = data;
// y = 10;
alert( y);
series.addPoint([x, y], true, true);
});
}, 1000);
}
}
},
"get_most_recent_point_from_database.php" produces an integer.
The alerts show the integer, but series.addPoint doesn't add the integer to the chart. The chart just goes blank.
The "y = 10;" (commented out in the code) will update the chart with 10.
I set y to integer by "var y = 1;" thinking that might help.
Any thoughts? I can put it all in JSFiddle if it helps.
THE FIX ======================
setInterval(function() {
var x = (new Date()).getTime(), y;
$.get('get_most_recent_point_from_database.php',function(data){
y = parseFloat(data).toFixed(1);
series.addPoint([x, y], true, true);
});
}, 1000);
How your data looks like? probably it is string, so try to convert it by parseFloat(data) (if it is single point) or use json_encode() in php. (All depends how your php file looks like)
I'm displaying a Bing Map (v7) in my Webmatrix2 website with a series of pushpins & infoboxes drawn from a SQL Express database using a JSON enquiry.
While the maps appears in all 3 browsers I'm testing (IE, FF & Chrome) the pushpins are sometimes not showing in FF & Chrome, particularly if I refresh with Cntrl+F5
This is my first JSON and Bing Maps app so expect there's a few mistakes.
Any suggestions on how to improve the code and get display consistency?
#{
Layout = "~/_MapLayout.cshtml";
}
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<link rel="StyleSheet" href="infoboxStyles.css" type="text/css">
<script type="text/javascript">
var map = null;
var pinLayer, pinInfobox;
var mouseover;
var pushpinFrameHTML = '<div class="infobox"><a class="infobox_close" href="javascript:closeInfobox()"><img src="/Images/close2.jpg" /></a><div class="infobox_content">{content}</div></div><div class="infobox_pointer"><img src="images/pointer_shadow.png"></div>';
var pinLayer = new Microsoft.Maps.EntityCollection();
var infoboxLayer = new Microsoft.Maps.EntityCollection();
function getMap() {
map = new Microsoft.Maps.Map(document.getElementById('map'), {
credentials: "my-key",
zoom: 4,
center: new Microsoft.Maps.Location(-25, 135),
mapTypeId: Microsoft.Maps.MapTypeId.road
});
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
AddData();
}
$(function AddData() {
$.getJSON('/ListSchools', function (data) {
var schools = data;
$.each(schools, function (index, school) {
for (var i = 0; i < schools.length; i++) {
var pinLocation = new Microsoft.Maps.Location(school.SchoolLat, school.SchoolLon);
var NewPin = new Microsoft.Maps.Pushpin(pinLocation);
NewPin.title = school.SchoolName;
NewPin.description = "-- Learn More --";
pinLayer.push(NewPin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', displayInfobox);
}
});
infoboxLayer.push(pinInfobox);
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
});
})
function displayInfobox(e) {
if (e.targetType == "pushpin") {
var pin = e.target;
var html = "<span class='infobox_title'>" + pin.title + "</span><br/>" + pin.description;
pinInfobox.setOptions({
visible: true,
offset: new Microsoft.Maps.Point(-33, 20),
htmlContent: pushpinFrameHTML.replace('{content}', html)
});
//set location of infobox
pinInfobox.setLocation(pin.getLocation());
}
}
function closeInfobox() {
pinInfobox.setOptions({ visible: false });
}
function getCurrentLocation() {
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
geoLocationProvider.getCurrentPosition();
}
</script>
<body onload="getMap();">
<div id="map" style="position:relative; width:800px; height:600px;"></div>
<div>
<input type="button" value="Find Nearest Schools" onclick="getCurrentLocation();" />
</div>
</body>
The JSON file is simply
#{
var db = Database.Open("StarterSite");
var sql = #"SELECT * FROM Schools WHERE SchoolLon != ' ' AND SchoolLon != 'null' ";
var data = db.Query(sql);
Json.Write(data, Response.Output);
}
Add your pinLayer, infobox, and infoboxLayer before calling the AddData function and see if that makes a difference. Also verify that school.SchoolLat and school.SchoolLon are numbers and not a string version of a number. If they are a string, then use parseFloat to turn them into a number. Other than that everything looks fine.
I'm having a bit of trouble understanding how to tackle the scatter and bubble chart in dojo. Does anyone have an example or good documentation I can look at to help me out?
unlike any other chart (line,bar,area which takes two inputs per point , x and y)
bubble chart takes three inputs per point ( x, y , and size of bubble)
Bubble Chart Example:
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Bubble",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
],function(Chart,theme){
var d1 = [];
for (var i = 0; i <= 10; i += 1){
d1.push({x: i, y: parseInt(Math.random() * 30), size: parseInt(Math.random() * 10)});
// or you can put "size:1" for simplicity
}
var chart = new Chart("container");
chart.addPlot("default", {
type:"Bubble"
});
chart.addAxis("x");
chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"});
// Add the series of data
chart.addSeries("Demo", d1);
chart.render();
});
Scattered charts are similar to any other point chart except the x axis values can be in float (or double) type.
Scattered Chart Example :
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Scatter",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
],function(Chart,theme){
var d1 = [];
for (var i = 0; i <= 4; i += 0.1){
d1.push({x: i, y: parseInt(Math.random() * 30)});
}
var chart = new Chart("container");
chart.addPlot("default", {
type:"Scatter"
});
chart.addAxis("x");
chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"});
// Add the series of data
chart.addSeries("Demo", d1);
chart.render();
});
Hope this helps ... ..