I create a line chart using dojo. Recently, I have been applying multiple axis on the chart. But there was a problem here. It is applied to multiple axes in one place I have raised the issue of overlapping tick value. and do not change the properties of leftBottom, is there a way to adjust the shaft position? For example, x: 10, y: 20?
my code
var axisXRef = {labels : labelsample, titleOrientation : "away", stroke : {}, natural : true};
var axisYRef = {vertical : true, stroke : {}};
var chart = new Chart("chartNode");
chart.addPlot("lines", { type: Lines, tension: 3 ,min:0});
chart.addPlot("stacklines", { type: StackedLines, tension: 3 ,hAxis:"x",vAxis:"y1"});
chart.addPlot("areas", { type: Areas, tension: 3,hAxis:"x",vAxis:"y2" });
chart.custom.axisX = lang.clone(axisXRef);
chart.custom.axisY = lang.clone(axisYRef);
chart.addAxis("x", chart.custom.axisX);
chart.addAxis("y", chart.custom.axisY);
chart.addAxis("y1", {
vertical: true,
min : 50,
max:70,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"red",length:50},
minorLabels: true, minorTicks:true, minorTick:{color:"red",length:50},
microTicks: true, microTick:{color:"red",length:50},
fixUpper: "major",
fixLower:"minor"
});
chart.addAxis("y2", {
vertical: true,
min : 0,
max:49,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"blue",length:25},
minorLabels: true, minorTicks:true, minorTick:{color:"blue",length:25},
microTicks: true, microTick:{color:"blue",length:25},
fixUpper: "major",
fixLower:"minor"
});
Unfortunately Dojo charting only supports two axis per direction both axis being on different side of the chart. In other words you can't have two axis both on the left side of the chart. You have to have one right side using leftBottom: false property.
Related
I'm using react-native-charts-wrapper for creating a chart and I was wondering if there is a way to change the x-axis label style for just one bar? I have a whole week in the chart and I want to change the color of the current day. So if today is Monday I just want the M to be a different color. I don't want to change the color of the bar, just the letter under it.
These are settings for xAxis:
xAxis: {
drawAxisLine: true,
drawGridLines: false,
position: 'BOTTOM',
labelCount: 7,
valueFormatter: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
textColor: formatedColor,
axisMinimum: -1,
axisMaximum: 7,
avoidFirstLastClipping: true,
},
I checked the documentation and properties but couldn't find anything.
I think I know
core:google.charts.load('current');
ChartType: ColumnChart;
Don't use the bar
google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ],
],
options: {'title': 'Countries'},
containerId: 'columnchart_values'
});
wrapper.draw();
}
is there any way to create shape or create marks on chart in custom indicator using tradingview charting library. I am using this way to create custom indicators. Thanks in advance.
Yes you can. Here is the guide.
For the callouts/Markers on chart you can follow this guide in the JS API.
https://github.com/tradingview/charting_library/wiki/JS-Api#gettimescalemarkssymbolinfo-from-to-ondatacallback-resolution
For getmarks you can do this
getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
var Arr = [
{
id: 1,
time: 1551448800000 / 1000,
color: 'blue',
text: 'Hello world',
label: 'B',
labelFontColor: 'yellow',
minSize: 20
},
]
onDataCallback(Arr);
console.log("=====getMarks running");
},
It will plot the marks above the bars as shown in the below image.
For Timescalemarks.
getTimescaleMarks: (symbolInfo,startDate,endDate,onDataCallback,resolution) => {
onDataCallback([
{
id: 1,
time: / 1000,
color: 'Turquoise',
label: 'The test you want to show on marker',
minSize: 20,
tooltip:[
"Information you want to print",
]
},
]);
})
The Time scale marks will look like this. And they will be plotted below the bars.
And for the shapes like circles and arrows you can follow this documentation. And use the createMultipointShape(points, options) methos to plot your shapes.
https://github.com/tradingview/charting_library/wiki/Chart-Methods#createmultipointshapepoints-options
I used this exmaple http://dygraphs.com/tests/smooth-plots.html to draw smooth lines. When I anable the smoothing by plotter: smoothPlotter small dots at data points disappear. I have set drawPoints: true. Dot is displayed when mouse is on the curve.
How can I enable small dots at data points ( http://dygraphs.com/options.html#drawPoints ) and still use smoothing?
I have not found a way to enable pointdrawing. But you can make a second series with the same data and draw only the points, not the lines. Like so:
new Dygraph(document.getElementById('graph'),
functionData,
{
series: {
Straight: {
color: 'red',
strokeWidth: 0,
drawPoints: true,
pointSize: 7
},
Smoothed: {
plotter: smoothPlotter,
color: 'red',
strokeWidth: 2
}
},
});
http://jsfiddle.net/wLxs4ju1/
I have a working chart with Dojo 1.8.
chart1 = new dojox.charting.Chart2D("chart1");
chart1.addPlot("default", {type: "Lines", ...
chart1.addSeries("Series A", [{ x: 1, y: 2.3, tooltip: "Value 1"}, ...
My data from the series gets displayed correctly as line and the whole line (series) gets the color 'Green'.
I know how to change the color for the whole series, but would it be possible that the line changes its color based on the data values? Lets assume the x-axis is a time axis and I need the line (series) to be green for until today, and then red for the future values.
Would this be possible and how ?
(I am using markers for the values. If these could change based on the value it would be enough)
I found something something like this in the documentation:
chart.addSeries("Series A", [
{y: 4, color: "red"},
{y: 2, color: "green"},
{y: 1, color: "blue"},
{y: 1, text: "Other", **color: "white", fontColor: "red"**}
]);
But it only works for PIE-charts and not for LINES-charts.
Thank you in advance.
You could try this http://jsfiddle.net/jUS54/
Use styleFunc in the addPlot method for change the markers colors:
var chart1 = new Chart("simplechart");
chart1.addPlot("default", {type: Lines, markers:true, styleFunc: function(item {
if(item <= 2){
return { fill : "red" };
}else if(item > 3){
return { fill: "green" };
}
return {};
}});
You can change the color by adding 'fill' to your chart data. Basically, loop through your input data deciding what to set your fill too while constructing the JSON for chartData.
var chartData = [{y: 10000,fill: "red"},{y:9200,fill: "yellow"},{y:11811,fill: "green"},{y:12000,fill: "blue"},{y:7662,fill: "blue"},{y:13887,fill: "black"},{y:14200,fill: "gray"},{y:12222,fill: "purple"},{y:12000,fill: "green"},{y:10009,fill: "purple"},{y:11288,fill: "green"},{y:12099,fill: "blue"}];
http://jsfiddle.net/goinoff/QnNk2/1/
I have a enhancedgrid and used on two pages. When check box (component of data enhanced grid) is checked on page1, the equivalent row(s) on pg 2 are then ticked. My enhancedgrid code is
grid = new dojox.grid.EnhancedGrid({
loadingMessage:"Please wait",
store:newStore,
structure:layoutQL,
autoWidth:false,
autoHeight:true,
columnReordering:false,
rowsPerPage:3,
indirectSelection: true,
//noDataMessage:"No transactions have been processed for posting.",
//selectionMode:'single',
plugins: {
pagination: {
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 6,
/*position of the pagination bar*/
position: "bottom",
indirectSelection: true
},
filter : {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "records"
}
}
I am using EnhancedDataGrid as in dojo framework. Any help will be appreciated.
Try "grid.selection.deselectAll()" when you move from one page to the next.