I'm trying to create chart using Dojox charting. I created plot and added Series.
this.addPlot("st", {type: Lines, markers: false, tension:"X"});
this.addSeries("Series A",
[{x:0, y:0}, {x:5, y:10},
{x:10, y:12}, {x:15, y:14},
{x:20, y:15}, {x:25, y:16},
{x:30, y:18}],
{plot: "st"});
Then I added MouseIndicator
new MouseIndicator (this, "st",
{series: "Series A",
labels: false,
mouseOver: true,
lineStroke: { color: "blue" }
});
So it has added indicator but with default colors.
Tried to change indicator with lineStroke, lineOutline or lineShadow. Nothing changed.
According to API docs it should change the line style^ http://bill.dojotoolkit.org/api/1.9/dojox/charting/action2d/MouseIndicator
Does anybody knows how to change MouseIndicator line style?
Here is my Hack of a solution.
Using dojo/aspect (http://dojotoolkit.org/reference-guide/1.10/dojo/aspect.html) to listen on the "_onMouseSingle" of the MouseIndicator object, and after this event occurs, change the marker and line stroke colors:
var mouseHoverIndicator = new MouseIndicator (this, "st",{
series: "Series A",
labels: false,
mouseOver: true,
lineStroke: { color: "blue" }
});
aspect.after(mouseHoverIndicator, "_onMouseSingle", function (value) {
var plot = mouseHoverIndicator.chart.getPlot(mouseHoverIndicator._uName);
plot.opt.markerStroke= {color:"blue"};
plot.opt.lineStroke= {color:"blue"};
plot.dirty = true;
mouseHoverIndicator.chart.render();
});
Related
render chart view
how the chart looks
So I feel like I've tried everything under the sun to remove that red rectangle above the chart. Anyone know how to remove it? Most of the examples with setting up options and legend like below might work with chartjs but not vue-chartjs if I'm not mistaken.
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You litterly posted the answer yourself, the second object in the renderChart function is the options object so if you put it like this it will work:
{ responsive: true, maintainAspectRatio: true, legend: { display: false } }
Next time please dont post a screenshot of your code but include it as text in your post since it is a lot easyer to read and use for people
I'm trying to migrate my application which currently uses react-bootstrap-table to react-bootstrap-table-next but I'm having a problem.
What I am trying to do:
is to get the object of the selected line.
My code
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
}
};
<div className="col-lg-12">
<BootstrapTable keyField='id' data={ products } columns={ columns } selectRow={ selectRow } />
</div>
result obtained
When I click on the line, it assigns the color red and prints the object to the selected line
but when I try to put the object in the state:
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
this.setState({banco: row});
}
};
The selected line object is assigned to {banco} property as expected, but the line does not turn red.
I think you need to check this. As the above link mention, right now there's only one workaround is when you need to call setState in selectRow.onSelect, please also manage the selection by yourself via selectRow.selected I'm the creator of react-bootstrap-table and we will improve this issue in the future. Please follow above link to have a workaround, thanks
Dojo version: 1.10.4 downloaded 11/24/2015
When I create a new Tooltip, there is an error returned:
TypeError: invalid 'in' operand source
thrown from dojox/lang/utils.js line 46
if(x in source && !(x in empty)){...}
where source is the text, "default", but it is expecting an object.
The text, "default" appears to be from the call to create the Tooltip,
indicated in the code below.
(I've removed code that I think is unnecessary to understand the problem.)
require([ "dojox/charting/Chart", "dojox/charting/widget/Legend",
"dojox/charting/axis2d/Default", "dojox/charting/action2d/Tooltip",
"dojox/charting/plot2d/Bars", "dojox/charting/plot2d/ClusteredBars",
"dojox/charting/plot2d/StackedBars", "dojo/domReady!"],
function(Chart, Legend, Tooltip){
var barChart = new Chart("WPDDashboard_DojoBarChart3_1",
{ title: 'Finance Comparison', titleFont: 'bold 100% Arial});
barChart.addPlot("default", {
type: 'ClusteredBars' , gap: 5, stroke: {
color: 'black', width: 2}, fill: '#3366cc', shadow: {
dx: 2, dy: 2}});
barChart.connectToPlot("default" ........);
barChart.addAxis(.......);
//I think this is the offending line
var tip = new Tooltip(barChart, "default");
barChart.render();
});
Your ordering of the required objects doesn't line up with the declaration. You're requiring Chart, Legend, Default, and then Tooltip while you're declaring Chart, Legend, and then Tooltip. So what you've done is you named the Default chart to Tooltip and tried using it. Try fixing the order and that should work.
How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear.
Here is the code I use for the plot :
<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, {
title: 'Test_figs',
legend: {show:false},
series: [{
showMarker: false,
color: '#ED0E0E',
label: 'R spectrum',
neighborThreshold: -1
}],
axes:{
xaxis:{
label:'Restframe Wavelength'
},
yaxis:{
label:'Flux',
tickOptions:{formatString:'%.3e'}
}
},
cursor:{
show:true,
zoom:true,
tooltipLocation:'sw'
},
Canvasoverlay: {
show: false,
objects: [
{verticalLine: {
name: 'Na-ID',
x: 5893.000000,
lineWidth: 2,
color: '#F0630C',
lineCap:'butt',
yOffset:0,
shadow: true
}}
]
}
});
});
function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>
I then use :
<button onclick="NaID_trigger()">Na-ID</button>
to trigger the overlay on or off for instance.
PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.
I finally found the solution myself :
to not display the overlays when the jqplot loads I set the overall overlays "show" option to true.
Then within each object I set show to false.
Instead of the external to the plot function I used before I switched to an even handler of the form:
$("input[type=checkbox][name=Na-ID]").change(function(){
plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
plot1.replot();
});
Now the plot display the selected overlay when checkbox is ticked and not at the beginning.
Hope this will help someone who has the same issues.
I am trying to draw an pie chart using ExtJS but something is going wrong. I can see following warnings in firebug window :
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing height attribute.
Code for my pie chart is as follows :
xtype: 'chart',
title: 'Location wise candidate distribution',
itemId: 'CandidateDistributionChart',
store: 'CandidateDistribution',
width: 250,
height: 260,
shadow: true,
animate: true,
theme: 'Base:gradients',
legend: {
position: 'right'
},
series: [{
type: 'pie',
field: 'candidateCount',
showInLegend: true,
label: {
field: 'name',
contrast: true,
font: '18px Arial'
}
}]
Why do those warnings are coming? Currently chart is not getting drawn even though I have mentioned all the necessary values.
Please help...
You used a string to define the store, but it needs a store object.
2 solutions :
1) store: Ext.getCmp('CandidateDistribution'),
Or 2) Define the store into a variable this way chartStore = Ext.create('Ext.data.Store', { ... }); and then pass it to the chart config : store: chartStore
But maybe it's not the problem according to the errors... Can you post the code of your store, your model, and the container of your chart ?
Make sure the value at least one value is not null or not zero. If all zeros or null you will have this type of error.
this is the model. I added the return and it worked. is a quick fix
{name: 'HD', type: 'number', convert: function(value,record){
if (value == 0)
return 0.0001 // The graphic needs at least one of the values to be more than 0 or will throw an error.
else
return value;
}
},