Dojo 1.5.0 Charting Legend missing - dojo

I just upgraded from Dojo 1.4.3 to 1.5.0 and noticed that my legend is now missing.
Anyone else have this problem??
I keep receiving the following error:
o is undefined in dojo.js line 73
This error occurs when
chart1.render(); //Graph shows but error causes the rest of the code in that javascript function to not execute (So, not legend because it's created after chart1.render(); line.
executes. Works perfect in release 1.4.3.

Does charting tests work for you? Go to Dojo Nightly Charting Tests and select a test, which uses Tooltips, e.g., test_event2d.html. If it works for you, see what is different in your setup. If you found the difference, and it is related to Dojo, please file a bug. Don't forget to mention a browser you use, and attach a minimalistic test case as a file.

Found the problem..It seems like a bug but not 100% sure...Here is how to recreate it using
the Dojo Nightly Charting Tests code and dojo version 1.5.0 (Any web browser):
NOTE: This error occurs when adding a series to plot "other" and calling chart1.render(); more than once. If chart1.render(); is only called once, no error and everything works as it should. See addSeries for "Series B"...Remove plot: "other" from "Series B" and everything works OK even if chart1.render() is called twice. This problem can also be recreated by just removing "markers: true" from the "default" addPlot and calling char1.render(); twice.
Warning: The HTML below in the code section isn't displaying 100% correctly but all the javascript code is present to recreate this problem easily.
Eugene: Thanks for the link to the testing page, that helped out. Also, should I file a bug report on this??
Event 2D
#import "dojo-release-1.5.0/dojo/resources/dojo.css";
#import "dojo-release-1.5.0/dijit/tests/css/dijitTests.css";
.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PlotKit.green");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.Magnify");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Shake");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojo.colors");
dojo.require("dojo.fx.easing");
var dc = dojox.charting;
var dur = 450;
var chart1;
makeObjects = function(){
chart1 = new dc.Chart2D("test1");
//chart1.setTheme(dc.themes.PlotKit.green);
chart1.addPlot("default", {type: "Default", lines: true, markers: true, tension:2});
chart1.addPlot("other", {type: "Lines",
hAxis: "other x",
vAxis: "other y"
});
chart1.addPlot("grid", {type: "Grid",
hMajorLines: true,
hMinorLines: false,
vMajorLines: true,
vMinorLines: false
});
chart1.addAxis("x", {min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addAxis("y", {vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addAxis("other x", {leftBottom: false, min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addAxis("other y", {leftBottom: false, vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addSeries("Series A", [{x: 0.5, y: 5}, {x: 1.5, y: 1.5}, {x: 2, y: 9}, {x: 5, y: 0.3}]);
chart1.addSeries("Series B", [{x: 0.3, y: 8}, {x: 4, y: 6, tooltip: "Custom tooltip"}, {x: 5.5, y: 2}], {plot: "other"});
var anim1a = new dc.action2d.Magnify(chart1, "default");
var anim1b = new dc.action2d.Tooltip(chart1, "default");
chart1.render();
chart1.render();
var legend1 = new dojox.charting.widget.Legend({chart: chart1, horizontal: false}, "legend1");
};
dojo.addOnLoad(makeObjects);
Event 2D
Go-->
Hover over markers, bars, columns, slices, and so on.
1: Markers, lines, 2D data, custom axis. Actions: Magnify, Tooltip.
That's all Folks!

Related

Unable to use line tension for scatter chart with 'showLine' enabled

I'm trying to chart a time scatter plot using vue-chartjs but am having trouble getting the line tension to work. If I set the tension option for the data set to anything but 0 the line disappears.
The chart data and options (just some dummy data for now):
const chartOptions = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: false
}
};
const chartData = ref({
datasets: [
{
data: [
{ x: 0, y: 5 },
{ x: 3, y: 4 },
{ x: 5, y: 7 },
{ x: 8, y: 13 },
{ x: 13, y: 6 },
{ x: 18, y: 2 },
{ x: 25, y: 11 },
],
backgroundColor: "#ED1369",
borderColor: "#ED1369",
showLine: true,
tension: 0,
pointRadius: 3.5,
pointHoverRadius: 3.5,
borderWidth: 2
}
]
});
Result with no tension (tension: 0):
Chart showing lines with no tension
Result with tension (tension > 0):
Chart breaking and no longer showing lines
I've tried using both "tension" and "lineTension" options, as well as the "cubicInterpolationMode" option. I have also tried various combinations of those options. I have tested and found that Chart.js does support curved lines on scatter plots.
Turns out you have to register the Filler component.
https://github.com/apertureless/vue-chartjs/issues/988

I am facing problem with - Error: <circle> attribute r: Expected length, "NaN" using Billboard js chart

I am try to display a billboardjs bubble chart using javascript and html.
I included the lib in my index.html file as:
src="/lib/billboard.pkgd.js"
The codes are very simple but when ran, I got the "NaN" error.
this.d3Chart = bb.generate({
bindto: "#d3bubbleChart",
data: {
type: "bubble",
label: false,
xs: {
data1: "x1",
data2: "x2"
},
columns: [,
["x1", 10, 20, 50, 100, 50],
["x2", 30, 40, 90, 100, 170],
["data1", [20, 50], [30, 10], [50, 28], [60, 70], [100, 80]],
["data2", [350, 50, 30], [230, 90], [200, 100],[250, 150],[200, 200]]
]
},
bubble: {
maxR: 50
},
grid: { y: { show: true } },
axis: {
x: {
label: { text: "AOV", position: "outer-left"},
height: 50,
tick: { format: function(x) { return ("$"+x);}}
},
y: {
fit: false,
min: {fit: true, value: 0},
max: 450,
labels: "yes",
label: { text: "Conversion Rate", position: "outer-bottom"},
tick: { format: function(x) { return (x+"%");}}
}
}
});
Checkout the allowed data for bubble type from API doc:
For 'bubble' type, data can contain dimension value:
- an array of [y, z] data following the order
- or an object with 'y' and 'z' key value
'y' is for y axis coordination and 'z' is the bubble radius value
I'm seeing from your example, that the first data of data2 contains additional value. Removing that will work fine.
this.d3Chart = bb.generate({
data: {
...
columns: [,
// the length for each bubble should be 2
["data2", [350, 50, 30], ...]
]

React Native image mapper (How to make touchable area on image)

How to make touchable area on image [click on position 1 show effect and same effects and different effects show on another position 2, 3, 4, 5.]
Actually when i am Clicking on Particular Position On an image, getting the Corresponding x and y co-ordinates but not getting touchable area on image
Please follow this
we have to create a mapping object similar to this
const MAPPING = [
{
id: '0',
name: 'First Area Name',
shape: 'rectangle',
width: 30,
height: 40,
x1: 80,
y1: 500,
prefill: 'red',
fill: 'blue'
},
{
id: '1',
name: 'Second Area Name',
shape: 'rectangle',
x2: 155,
y2: 540,
x1: 125,
y1: 500
},
]
using of ImageMapper
<ImageMapper
imgHeight={500}
imgWidth={250}
imgSource={imageSource}
imgMap={MAPPING}
onPress={(item, idx, event) => this.onAnyAreaPress(item, idx, event)}
containerStyle={styles.myCustomStyle}
selectedAreaId="my_area_id"
/>
It provided touch points based on mappings we pass.
Please go through this doc for more info.
Library

kivy bind textiput to slider vlaue

I want to create a control panel which provides a slider for quick input but also an textinput to type in the exact value as float number. Additionally there shall be a label, which displays the actual value.
The problem is, that I am not quit shure how to link all three widgets to each other AND auto update them if one changes the value...
Everything is done in an external .kv file.
Here is my first attempt via id. It works but the textinput does not change its content if I change the sliders value. Does anyone have a better solution for my problem?
Thanks for your help :)
That's the content of test.kv:
<MainLayout>:
BoxLayout:
pos: self.parent.x + self.parent.width*0.1, self.parent.y
orientation: 'vertical'
BoxLayout:
orientation: 'horizontal'
Label:
color: 0, 0, 0, 1
font_size: 20
text: 'Position: ' + str(linear_pos_slider.value) + ' mm'
size: self.texture_size
Slider:
id: linear_pos_slider
orientation: 'horizontal'
max: 50
min: -50
padding: 1
value: float(linear_pos_ti.text)
step: 0.1
TextInput:
id: linear_pos_ti
size_hint: 0.2, 0.8
font_size: 20
text_color: 0, 0, 0, 1
input_filter: 'float'
multiline: 'False'
text: '0'
And here is the content of the test.py to make the application run:
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.slider import Slider
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
Window.clearcolor = (1, 1, 1, 1)
class MainLayout(BoxLayout):
pass
class Test(App):
def build(self):
return MainLayout()
if __name__ == "__main__":
Test().run()
You should just be able to bind them to each other:
Label:
color: 0, 0, 0, 1
font_size: 20
text: 'Position: ' + str(linear_pos_slider.value) + ' mm'
size: self.texture_size
Slider:
id: linear_pos_slider
orientation: 'horizontal'
max: 50
min: -50
padding: 1
value: float(linear_pos_ti.text)
step: 0.1
TextInput:
id: linear_pos_ti
size_hint: 0.2, 0.8
font_size: 20
text_color: 0, 0, 0, 1
input_filter: 'float'
multiline: 'False'
text: str(linear_pos_slider.value)
Although in practice, it would be better if you used a NumericProperty (or StringProperty) in the code and bound them to that. This has all the same advantages but it is cleaner and gives you easy access from the code side too.
Note that since the bindings are one-way (property -> widget), you will need to set it with on_* events:
Slider:
id: linear_pos_slider
orientation: 'horizontal'
max: 50
min: -50
padding: 1
value: root.value
on_value: root.value = self.value
step: 0.1
TextInput:
id: linear_pos_ti
size_hint: 0.2, 0.8
font_size: 20
text_color: 0, 0, 0, 1
input_filter: 'float'
multiline: 'False'
text: str(root.value)
on_text: root.value = float(self.text)
with:
from kivy.properties import NumericProperty, StringProperty
class MainLayout(BoxLayout):
value = NumericProperty(0.0)
pass

Change the colour of bubbles in Google visualization motion chart

I there a way where by I can define the colours of bubbles in a motion chart provided by Google visualization API ? I do not want to use the default colour scheme.
Thank you in advance.
I've not found an inbuilt way to do this. However, what you can do is assign each bubble a "colour" variable. Then you can set the colour of the bubbles to this variable. I have found that for 3 bubbles, setting one to 1, another to 1.5 and the third to 3 projects reasonable well (on the default colour scheme, yellow projects very poorly). This approach gives you limited control over the colour scheme.
It's 2017 and I have yet to find a good update for this. So here is the solution I came up with. HTH.
#views.py
# Bubble Chart: ID, X, Y Color, Size
data.append(['ID', 'X', 'Y', 'Category', 'Z'])
data.append(['', 0, 0, 'Cat 1', 0]) #<-- the order of
data.append(['', 0, 0, 'Cat 2', 0]) #<-- these fakeout items
data.append(['', 0, 0, 'Cat 3', 0]) #<-- is important
data.append(['', 0, 0, 'Cat 4', 0]) #<-- Blue, Red, Orange, Green - in that order
... for r in source:
data.append(r.a, r.b, r.c, r.d, r.e)
return render(
request,
'Template.html',
{
'title':'',
'year':datetime.now().year,
'org': org,
'data': json.dumps(data),
}
#in the scripts block of template.html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable({{data|safe}});
var options = {
title: 'Bubble By Category Strategy',
hAxis: { title: 'X', ticks: [{v: 0, f:''}, {v: 1, f:'L'}, {v: 2, f:'M'}, {v: 3, f:'H'}, {v: 4, f:''}] },
vAxis: { title: 'Y', ticks: [{v: 0, f:''}, {v: 1, f:'L'}, {v: 2, f:'M'}, {v: 3, f:'H'}, {v: 4, f:''}] },
bubble: {
textStyle: {
fontSize: 11,
fontName: 'Lato',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('riskChart'));
chart.draw(data, options);
}
</script>