my code:
function d3_chart() {
// sample data array
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data("./extra/acc.csv", {"filetype": "csv"}) // data to use with the visualization
.type("line") // visualization type
.y("x") // key to use for y-axis
.x("timestamp") // key to use for x-axis
.draw() // finally, draw the visualization!
}
my csv:
timestamp,x,y,z
0,2019-02-28 12:20:19.631,1.072,-0.153,10.113
1,2019-02-28 12:20:19.731,1.072,-0.153,10.419
2,2019-02-28 12:20:19.831,1.072,-0.153,9.96
3,2019-02-28 12:20:19.931,1.072,-0.153,10.113
4,2019-02-28 12:20:20.031,1.072,-0.153,10.113
5,2019-02-28 12:20:20.132,1.225,-0.153,9.96
6,2019-02-28 12:20:20.231,1.225,-0.153,9.96
7,2019-02-28 12:20:20.331,1.225,-0.153,9.96
8,2019-02-28 12:20:20.431,0.919,-0.306,9.5
9,2019-02-28 12:20:20.531,0.919,0.459,9.807
10,2019-02-28 12:20:20.631,1.225,0.153,10.113
11,2019-02-28 12:20:20.731,1.379,-1.992,10.113
12,2019-02-28 12:20:20.831,1.838,-0.306,9.653
13,2019-02-28 12:20:20.931,0.153,0.766,10.113
14,2019-02-28 12:20:21.032,0.459,1.532,10.266
15,2019-02-28 12:20:21.133,1.072,0.0,9.96
I just got getting message:
No Data Available
What is wrong? I don't find any example in internet with csv loading via this library
Or something know how graph chart from csv via general D3 with simple example?
d3plus seems to be using v3.5.15 of d3.js. Regardless of that, you will need to tell d3plus of how to load the data. Reading the API documentation it seems you will have to load the data using
d3plus.dataLoad(path, [formatter], [key], [callback]) as explained here.
Alternatively, you can use d3.js to parse your csv file and pass it as the data. To do this you can use the
d3.csv.parse(string[, accessor]) as provided in the d3.js CSV API.
Keep in mind in both cases you will need to format your timestamps in the correct time format (For d3.js Time Format API doc), for you to be able to use the time scales. Also at least for d3.js when the data is parsed from CSV all values are string values and hence you will need to change the type of the values using an type conversion function. You can read more about this in a great guide on how to read data by Learnjsdata (d3.js v3, or d3.js v5)
There are several examples out there for d3.js v3 on importing the data for processing which may be a better option overall. Also consider d3plus has not got a github commit in over a year so the library may not be well supported.
I hope this helps and at least gives you a start. If you need more help please leave a comment below.
Related
Whenever I've looked into how to email a chart, all the answers involve some variation on using the getAs function to save the chart as an image and then either inlining it or attaching it to the email. But I'm struggling to save the chart as an image in order to attach it. When I run the following code:
var chart = demandLastWeekSheet.getCharts().getAs("image/png");
I get this error:
TypeError: demandLastWeekSheet.getCharts(...).getAs is not a function (line 8, file "Code")
In fact, I get the same error if I try .getBlob(), .modify() or any other functions from here: https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart.html
Surely these functions have not been deprecated? Am I doing something wrong/stupid? New to the world of apps script, any pointers welcome! Sorry also if this is a badly phrased question, also I am new to stack overflow :)
Any suggestions??
getCharts() returns EmbeddedChart[]. In your script, the method of getAs is used for an array. I think that this is the reason of your issue. In order to retrieve the blob of the chart using the method of getAs, please modify as follows.
From:
var chart = demandLastWeekSheet.getCharts().getAs("image/png");
To:
var chart = demandLastWeekSheet.getCharts()[0].getAs("image/png");
In this modification, the 1st chart in the sheet of demandLastWeekSheet is retrieved. If you want to retrieve the 2nd chart, please modify from [0] to [1].
Reference:
getCharts()
I am not able to plot graph using dygraph with csv link.
If I use http://jsfiddle.net/eM2Mg/ this link it works. When I replace data with link, it just shows empty graph. I tested in debugger tool and I do get proper response from file. If I just try to plot the graph using same data from file but adding the data in javascript as static content like the example provided in jsfiddle it works.
Things I tried -
1. I tried .txt, .csv and file without extension and nothing worked
2. I tried on different data and when I insert data in static way in javascript it works. So data is in url is definitely not incorrect.
3. When checked response for url in debugger tool I get correct response
image of response
html code -
<div id="graph"></div>
Javascript -
g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
"https://files.fm/down.php?i=8v88usam&n=testing_file_2.txt",
{
});
Your dates are in the wrong format, see Dygraphs Data Format
Here are some valid date formats for CSV:
2009-07-12
2009/07/12
2009/07/12 12
2009/07/12 12:34
2009/07/12 12:34:56
Lets say I want to use JSON code from one site, particular this one, "http://coinmarketcap.com/static/generated_pages/currencies/datapoints/boostcoin-main.json", to integrate it for my highcharts. As I have seen this has following values: x_min, x_max and price_data. How can I make highcharts on my site using this JSON data? Any help with this?
Look at this example and how it uses JSON code and notice how the JSON data should be, because it changes with every chart type: http://jsfiddle.net/highcharts/YWVHx/
$.getJSON('THE LINK TO YOUR FILE',
function(data) {
// Create the chart
$('#container').highcharts(
...
data : data,
...
);
});
EDIT: More information about working with data
Problem,
I want to display the pie chart using the dynamic data from API but it does not work at all. Where as if i have a hard coded data it works perfectly fine.
I have created a Plunker
<nvd3-pie-chart
data="exampleDataPieChart"
id="toolTipExample2"
x="xFunction()"
y="yFunction()"
width="150"
tooltips="true">
</nvd3-pie-chart>
http://plnkr.co/edit/Ve9X22X7RAuRGpA74tiB?p=preview
I am using github API and want to draw the pie chart for the languages used in the user repository
Please have a look and let me know where i am doing wrong
Thanks
Plunkr
2 things: your JSON format doesn't match exampleDataPieChart, as well as AngularJS doesn't know when to run $scope.$apply() internally.
Fix #1: Match the formats
var exampleDataPieChart = [{"key":"One","y":5},{"key":"Two","y":2},{"key":"Seven","y":9}]
vs.
var collectedData = [{"key":["JavaScript","CSS"],"y":[142531,205009]}]
Fix #2: Let AngularJS know you've updated data by creating a local var data then once its' ready, trigger $scope.$apply() by running $scope.collectedData = data.
In Google visualization ChartWrapper class, the code to draw a chart (bar chart, pie chart, etc) is as follows:
wrapper = new google.visualization.ChartWrapper({
dataTable: dataTable.toJSON(),
chartType: chartType,
options: options
});
console.log("Wrapper: " + wrapper.toJSON());
console.log(" ");
wrapper.draw(result[0]);
I am curious if there's an equivalent way of doing this using Highcharts where instead of calling new google.visualization.chartWrapper(...), we can just call something like new highcharts.chartWrapper(...). The options can include the container div id where the chart will be drawn.
Even if there is no way to do, any suggestions how I should be go about doing something similar to this?
As far as I know, in dataTable I can specify my data series in JSON format. In chartType, I can specify bar, column, pie, etc. Based on the highcharts example I saw, I can even write a service that generates a HTML file on the server side as shown here -> http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/ and send back a response.
But what I don't know is how do I tell Highcharts to insert the chart right at container id specified in my options on the same page.
In this example, for instance, wrapper is just a json representation of the chart (which I can generate). What I am not sure is how do I convert that json representation to a highcharts map that gets inserted where I want on the same page.
Sorry, if this question seems complicated. I can clarify if you need additional information.