I was given the task of finding a way to graph my company's manufacturing data from each batch of material (specifically density) with an overlay of process changes in some sort of timeline format. It needs to be easy for an end user to add new data and events. Doing a google search I found timeplot, which seems to do exactly the sort of thing I'm looking for.
My only issue with it is it seems to only be able to plot continuous data. I want to be able to have a scatter plot of my material properties with events similar to how timeplot implements them. From their example on that page, the plot information looks like this:
var plotInfo1 = [
Timeplot.createPlotInfo({
id: "Population",
dataSource: dataSource2,
timeGeometry: timeGeometry,
valueGeometry: geometry2,
lineColor: green,
dotColor: lightGreen,
showValues: true
}),
Timeplot.createPlotInfo({
id: "Immigration",
dataSource: dataSource1,
timeGeometry: timeGeometry,
valueGeometry: geometry1,
lineColor: blue,
dotColor: blue,
showValues: true
}),
Timeplot.createPlotInfo({
id: "Events",
eventSource: eventSource1,
timeGeometry: timeGeometry,
lineColor: red
})
];
Well, almost like that I switched around the event sources in my testing. Looking at the api script for this, it looks like I should be able to edit the lineWidth. But adding that parameter makes the script no longer plot anything.
Is there a way to do what I want? Is there a better tool for this? I was planning on writing a VBA macro to extract all my data from some excel files and dump them into the proper text and XML formats this application needs.
Related
Context
I am working under Phaser (which is a Javascript Framework for game development) and I followed this totorial. All the code works perfectly. But to make the map the tutorial use a .json file which content a data part in order to display the map.
Problem
I would like to change the map and display my own map. Here is the map.json that display the map:
{ "backgroundcolor":"#000000",
"height":10,
"infinite":false,
"layers":[
{
"data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAADwAAAA8AAAAPAAAADwAAAA8AAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAA",
"encoding":"base64",
"height":10,
"name":"World",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
}],
"nextobjectid":31,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2018.03.21",
"tileheight":70,
"tilesets":[
{
"columns":4,
"firstgid":1,
"image":"tiles.png",
"imageheight":280,
"imagewidth":280,
"margin":0,
"name":"tiles",
"spacing":0,
"tilecount":16,
"tileheight":70,
"tilewidth":70
},
{
"columns":1,
"firstgid":17,
"image":"coinGold.png",
"imageheight":70,
"imagewidth":70,
"margin":0,
"name":"coin",
"spacing":0,
"tilecount":1,
"tileheight":70,
"tilewidth":70
}],
"tilewidth":70,
"type":"map",
"version":1.2,
"width":30
}
I know that the part used in order to display the map is layers.data.
What are these letters all about? Is is a kind of special format that I never heard about so far?
How can I should I know which letters correspond to which tiles?
If you need more informations or if you have any question please let me know, thanks !
That map was made using Tiled which allows you to make tiled maps using a set of tiles (aka sprites). Exporting it in json allows you to import it into game engines with ease, in this case, Phaser.
Doing these by hand could be troublesome so a tilemap editor like Tiles helps you accelerate your map development. You can also create and place each tile programmatically but it would depend on which type of game you're aiming at.
here's an introductory tutorial on how to use Tiled to create a map. Be sure to save it as json instead of .tmx so you can import it in phaser.
I'm trying to use this widget to display 3 sets of data. the first set should be shown as a bar chart, and the rest can be displayed as lines on the chart.
From what I've read, Rickshaw Graphs should be able to do this by using the 'multi' renderer but I can't get that render to work at all.
Here is the ruby Array data object I'm sending, formatted to make it more readable:
iterationData:
[
{
:name=>"Delivered",
:renderer=>"bar",
:data=> [
{:x=>1, :y=>0},
{:x=>2, :y=>4},
{:x=>3, :y=>4},
{:x=>4, :y=>11}
]
},
{
:name=>"Estimated",
:renderer=>"line",
:data=> [
{:x=>1, :y=>2.7},
{:x=>2, :y=>5.4},
{:x=>3, :y=>8.10},
{:x=>4, :y=>10.8},
{:x=>5, :y=>13.5},
{:x=>6, :y=>16.2},
{:x=>7, :y=>18.9},
{:x=>8, :y=>21.59},
{:x=>9, :y=>24.29},
{:x=>10, :y=>26.99}
]
},
{
:name=>"Outlook",
:renderer=>"line",
:data=> [
{:x=>1, :y=>2.75},
{:x=>2, :y=>5.5},
{:x=>3, :y=>8.25},
{:x=>4, :y=>11.0},
{:x=>5, :y=>13.75},
{:x=>6, :y=>16.5},
{:x=>7, :y=>19.25},
{:x=>8, :y=>22.0},
{:x=>9, :y=>24.75},
{:x=>10, :y=>27.5}
]
}
]
and here is my calls to show the graph and to send data to the graph:
send_event in the ruby job:
send_event("#{projectID}-burnup-chart", {:series => iterationData})
dashboard.erb code:
<div data-id="23405488441-burnup-chart" data-view="Rickshawgraph" style="background-color:#ff9618" data-legend=true data-unstack=true data-renderer="bar" data-color-scheme="compliment" data-max="40"></div>
This just displays a blank widget with an orange background. The graph hasn't rendered at all. Can anyone suggest how I might achieve this? Or has anyone used a different widget to create a working burn up chart like this that they might be able to suggest?
I believe what you are trying to do is impossible because of the way that this widget marshals parameters from Dashing to Rickshaw.
Specifically, these complicated lines of code:
https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L193-L253
I'm not sure if Rickshaw gets mad if you send it extra data, but the author of the widget seems very concerned about sending it incorrectly. Essentially, you are falling into this case:
https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L237-L245
You might be able to get it to work if you added a line to that else if, like this:
else if series?.data?
# Rickshaw data. Need to clone, otherwise we could end up with multiple graphs sharing
# the same data, and Rickshaw really doesn't like that.
answer = {
renderer: series.renderer # add your renderer
name: series.name
data: series.data
color: series.color
stroke: series.stroke
}
Or better yet, just use jQuery Extend to make a new copy:
answer = $.extend(true, {}, series);
Let me know how it goes and I'll update my answer to assist if further problems arise.
I'm trying to create a pie chart with javascript that will allow users to click on a slice and "view what makes up that slice." If you've ever used mint.com you'll know what I mean - say you're viewing an expenses pie chart and you click the "Automobile" slice, then you see the slice expand into a new chart of Gas, Maintenance, etc.
To take this a step further, I'm dealing with a large amount of data, so being able to fetch (ajax) the new data when the slice is clicked would be a useful option as well (though I can probably get away without it).
Perhaps "nested", "multi-level" and "drill-down" are not the right terms because I've been searching all day and cannot seem to find a solution.
Does anyone know of a library for this? Thanks in advance!
I've implemented similar drilldown systems using the HighCharts point click event. Here's the rough syntax:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: myInitialDataArray, // make sure each data point has an id
point: {
events: {
click: function () {
$.post('/get/data/by/id/' + this.id, function(data) {
// you may need to format your data here
chart.series[0].setData(data);
});
}
}
}
}]
});
In this example, you define a click event that uses the point's id value (this.id) to perform an Ajax post to a URL. You then use the data from your post to re-bind the chart series.
Please note that each time you use the setData function to update the chart, each data point needs to have an id value in order for the drilldown to continue.
Hope this helps!
Try psd3 pie chart library
Demo - https://pshivale.github.io/psd3
Source - https://github.com/pshivale/psd3
It supports multi-level pie charts, donut charts and sunburst charts. It also supports drilling down a pie slice by double clicking it.
I believe what I am trying to accomplish should be a fairly common task, yet I'm having difficulty getting it to work. I simply wish to create a multi-series plot from a data set containing (for each record) an ISO8601 timestamp along with multiple data points. The data is in JSON format and I'm using dojox.charting.chart "Lines" type.
I'm already aware that the Dojo charts cannot directly handle time-based axis data, let alone ISO8601. So I've already dealt with converting the x-axis to milliseconds-since-T0 server-side.
Here is a distilled example excerpt of my JSON:
[{"Offset_ms":0,"CP":250.58368,"TP":181.88211},
{"Offset_ms":360000,"CP":233.18443,"TP":119.94824},
{"Offset_ms":540000,"CP":227.15465,"TP":117.99422},
{"Offset_ms":720000,"CP":222.87495,"TP":117.55895},
{"Offset_ms":896000,"CP":218.19876,"TP":117.64221},
{"Offset_ms":900000,"CP":219.77487,"TP":117.93475}]
And the distilled JavaScript (assume the above JSON is in the variable 'sequenceData'):
var chart = new dojox.charting.Chart("sequenceDataGraph");
chart.addPlot("default", {
type: "Lines",
tension: "X"
});
chart.addAxis("x", { labelFunc: labelTimeAxis });
chart.addAxis("y", { vertical: true });
var sequenceDataStore = new dojo.store.Observable(new dojo.store.Memory({
data: {
label: "Sequence",
items: sequenceData
}
}));
addSequenceDataSeries(chart, sequenceDataStore, "TP");
addSequenceDataSeries(chart, sequenceDataStore, "CP");
chart.render();
function addSequenceDataSeries(chart, sequenceDataStore, sColumnName) {
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
}
What appears to be happening, is that Dojo Chart is not using the x-axis data at all, but instead plotting each point at a fixed interval based on the number of data points. That is, each data point seems to be assigned an ordinal, such as if Offset_ms was merely 1, 2, 3... Since my data points are not always at fixed intervals, the resulting graph is distorted.
How do I instruct Dojo Chart to use the "Offset_ms" field in the JSON data for the x-axis component?
I've scoured the tutorials, the API docs and performed numerous Google & SO searches to no avail. I've even browsed portions of the Dojo source, particularly StoreSeries.js.uncompressed.js, but I'm not finding any answers. Surely this is possible, and hopefully trivial!
Unfortunately, the official dojo documentation is seriously lacking, and I only figured out how to do something similar by browsing the dojo source. Specifically, line 135 of the StoreSeries test, http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_StoreSeries.html
The StoreSeries constructor's third argument accepts an object that maps the X and Y axis to specific fields in your data store.
Change the following line in your code from this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
to this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
{ x: "Offset_ms", y: sColumnName }));
sColumnName becomes { x: "Offset_ms", y: sColumnName }
I want to implement a javascript graph plot application (ie http://people.iola.dk/olau/flot/examples/turning-series.html) to the existing admin view, where the instances of a model at the listing view also showing charts of these items and can be filtered through by using the already implemented list_filter option which I added at the admin.py of my application.
I would be greatful for any direction, example or already existing tutorial
Cheers.
If you follow the FLOT tutorials they are pretty complete.
include jQuery
include flot
Then just follow the examples / API
Essentially you "attach" the chart to a container...
<div id="myChartGoesHere" style="width:500px;height:250px;"></div>
Then populate it with the data you want:
<script>
//data can be points [ [x1, y1], [x2, y2], ... ]
var data = [ [3,4], [5,7], [2,9] ]
//options is an object containing all your desired features
var options = {
lines: { show: true },
points: { show: true }
};
var plot = $.plot($('myChartGoesHere'), data, options)
</script>
I would look into django admin templates.
http://www.djangobook.com/en/1.0/chapter17/ is a good place to start. At the top of the page, do a for loop over all your data, and print it out as a variable to your javascript. I hope this can help you in the right direction.