I'm working with plotly in JS, trying to draw a sunburst chart. Everything works, but i would like to make it so that the child sections on the chart each have a different color. I cant seem to figure it out, any help is extremely appreciated.
Here is how my sunburst looks:
Notice that "Enos" and "Noam" have the same color, I would like them to have either different colors, or at least different opacities.
Like so:
Here is my code:
var data = [{
"type": "sunburst",
"labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
"parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
"values": [100, 20, 80, 60, 20, 20]
}];
var layout = {
sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)
If you want to have custom colors for your traces, then you need to set the colors array of the marker object. There you can set the color for every single part of the sunburst diagram:
var data = [{
"type": "sunburst",
"labels": ["Eve", "Awan", "Seth", "Enos", "Noam","Enoch"],
"parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
"values": [100, 20, 80, 60, 20, 20],
"opacity" : 1,
"marker": {
colors: ["#ffffff","#fc6e08","#3e81ed","#3293e3","#c429ad","#d99543"]
}
}];
var layout = {
// sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)
So the first value ("Eve") has the first color of the array, the second value ("Awan")the second color, and so on. In the example, I set the opacity to 1 to get the real colors from the colors array.
Related
when I try to draw pie chart on nodered , colors are always black. I m using dashboard-ui node. What is the missing ? or What is best way draw pie chart on nodered ui ?
msg.payload=[{
"series": [ "X", "Y"],
"colors":['#8b4513','#26138b'],
"data": [ 77,23],
"labels": [ "Jan","mon" ]
}];
There are two issues with this payload, which are stopping it from doing what you would expect:
the colors option is not currently supported as an input, and
the data must be an array of arrays, with the number of inner arrays being the same as the number of series to be shown (so in your case, an array of 1 array of y-values)
This revised payload works for me:
[
{
"series": [ "X", "Y" ],
"data": [
[ 77, 23 ]
],
"labels": [ "Jan", "mon" ]
}
]
The option to specify colors for each series would be a nice feature to add to the ui_chart node. For now, you will have to select the colors you want inside the node configuration editor. Please see the chart node's README for other examples of valid data inputs.
--
Steve
I have called a webapi and I got json data
{
"orderId": 26,
"userId": "53cf1e15",
"user": {
"editablePropertyNames": [],
"email": "rajesh#tech.com",
"firstName": "Rajesh",
"id": "53cf1e15",
"identities": [],
"lastName": "kumar",
"missingProperties": [],
"phoneNumber": "45877298"
},
"locationId": 4024,
"pickupType": 1,
"pickupTimeUtc": "2015-11-27T17:33:00.417"
},
{
"orderId": 601,
"userId": "06bf5983",
"user": {
"editablePropertyNames": [],
"email": "rtest#wa.com",
"firstName": "Rakesh",
"id": "06bf5983",
"identities": [],
"lastName": "Pkumar",
"missingProperties": [],
},
"locationId": 424,
"pickupType": 1,
"pickupTimeUtc": "2016-11-16T21:30:00",
"total": 4.32,
"tax": 0.83
}
var PickupMethodEnum = _enum({
DineIn: 1, DriveThru: 2, TakeOut: 3
})
index.html
I have 5 columns
#imageIndicator Name PickupName Total scheduledTime
car.png Kumar 1 4.32 2015-11-27T17:33:00.417
my problem is
I want to display value instead of "1" in pickupName column. ( DineIn: 1, DriveThru: 2, TakeOut: 3).
show image in #imageindicaor column if pickupName ="DriveThru" otherwise hide the image.
show scheduledTime in custom format
if scheduledTime is current date then display as 12:15 pm.
if scheduled time is tomorrow date the display as 8/10 - 7:00am.
if pickupName ="TakeOut" then change that` row background color to gray and then remove that row after 2 minutes.
I want to display value instead of "1" in pickupName column. ( DineIn: 1, DriveThru: 2, TakeOut: 3).
Object.keys( objectName )[ propertyIndex ]
will return the desired property's name
The rest of your issues can be resolved with conditional statements once you've obtained the JSON data. You haven't provided your attempt so there isn't much to work with.
Hi for first point you need to write your enum properly numbers:"String" because you are getting numbers from JSON.
//Global Object
var pickupNameEnum = {
0: "DineIn",
1: "DriveThru",
2: "TakeOut"
};
Write a function as showRow(singleRowObject) in which while traversing your JSON
function showRow(singleRowObject){
var imageString="";
var hideImage=false;
var showString='';
var retutnObject={};
if(pickupNameEnum[singleRowObject.pickupType]!=undefiend){
showString='DineIn';
//DineIn
}else if(singleRowObject.pickupType==){
//DriveThru
showString='DriveThru';
imageString="<img src='abc.png' alt='img'></img>";
}else if(singleRowObject.pickupType==){
//TakeOut and change Color on basis of this flag
hideImage=true;
showString='TakeOut ';
}
retutnObject.hideImage=hideImage;
retutnObject.imageString=imageString;
retutnObject.showString=showString;
}
For date split dateString and refer to this question
For Removing Row change refer this
I decided it would be a fun project to see if i could take data from Google Analytics and display that in a custom dashboard, and hopefully learn a thing or two about using json, and javascript.
after a lot of debugging i now managed to pull the data from the Google Analytics server with their php api, and save the output into data.json on the server.
below the data.json, it's valid as per JSONLint.com:
{
"0": {
"date": "20160113",
"pageviews": "46",
"sessions": "21"
},
"1": {
"date": "20160114",
"pageviews": "66",
"sessions": "18"
},
"2": {
"date": "20160112",
"pageviews": "50",
"sessions": "14"
},
"3": {
"date": "20160116",
"pageviews": "19",
"sessions": "14"
},
"4": {
"date": "20160117",
"pageviews": "23",
"sessions": "14"
},
"5": {
"date": "20160115",
"pageviews": "38",
"sessions": "11"
},
"6": {
"date": "20160118",
"pageviews": "35",
"sessions": "9"
},
"7": {
"date": "20160119",
"pageviews": "15",
"sessions": "7"
}
}
Now i've tried to use the data from data.json and feed it into chartist's labels/series in order to draw a graph.
var labelArray = [];
var seriesArray = [];
var labelOutput = [];
$.getJSON("data.json", function(json) {
//var jsonObj = JSON.parse(json);
for (var i in json){
labelArray.push(json[i].date);
};
for (var i in json){
seriesArray.push(json[i].sessions);
};
// var myData = {
// labels:
// }
// labelOutput = labelArray.join(',')
// seriesOutput = serieArray.join(',')
console.log(labelArray);
console.log(seriesArray);
// this will show the info it in firebug console
});
new Chartist.Line('.ct-chart', {
labels: [labelArray],
series: [[seriesArray]]
});
However I'm currently out of ideas why this would not work, the labels on X and Y axis are correctly shown, but no graph shows up.
I've tried using .join to see if that makes a difference, but using labelOutput instead of labelArray also doesn't change anything.
In the console the array that is being fed into chartist seems all right to me, if I copy paste it from the console into the script everything works.
Current output for labelArray and seriesArray:
labelArray
Array [ "20160113", "20160114", "20160112", "20160116", "20160117", "20160115", "20160118", "20160119" ]
seriesArray
Array [ "21", "18", "14", "14", "14", "11", "9", "7" ]
Anyone knows why chartist.js does manage to add the correct labels along the axes but fails to read the same data and draw the chart?
Although the answer by #mnutsch works, there is an easier way to add dynamic content into the chart.
You can simply add the arrays directly as parameters, which I think is what the OP was trying to do.
response object would be the ajax data
var seriesVals = [];
var labelsVals = [];
for (var i = 0; i < response.length; i++) {
seriesVals.push(response[i].total);
labelsVals.push(response[i].response_code);
}
var pieData = {
series: seriesVals,
labels: labelsVals
};
In case anyone comes across this later, you can also do it like this:
//Create javascript arrays with the values and labels, replace this with code to read from the database/API/etc.
var array_1_values = [100, 120, 180, 200, 90]; //these are the values of the first line
var array_2_values = [20, 35, 65, 125, 245]; //these are the values of the second line
var array_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; //these are the labels that will appear at the bottom of the chart
//create a prototype multi-dimensional array
var data_chart1 = {
labels: [],
series: [
[],
[]
]
};
//populate the multi-dimensional array
for (var i = 0; i < array_1_values.length; i += 1)
{
data_chart1.series[0].push(array_1_values[i])
data_chart1.series[1].push(array_2_values[i])
data_chart1.labels.push(array_labels[i])
}
//set the size of chart 1
var options_chart1 = {
width: '300px',
height: '200px'
};
//create chart 1
new Chartist.Line('#chart1', data_chart1, options_chart1);
In case anyone else stumbles upon the problem, below is what I came up with to get it to work.
After another day of trail and error i managed to pinpoint the problem.
The problem was:
In the original situation I tried to use a plain array as input for both labels and series. However, Chartist requires objects to render the labels/series as well as the graph.
The below works for me pulling the data from the data.json, adding it to an object and provide it to chartist.
var labelArray = {};
var seriesArray = {};
var labelOutput = [];
var Output
// $.getJSON("data.json", function(json) {
$.ajax({
url: 'data.json',
async: false,
dataType: 'text',
success: function(json) {
labelArray = JSON.parse(json);
data = {
labels:
[
labelArray[0].date,
labelArray[1].date,
labelArray[2].date,
labelArray[3].date,
labelArray[4].date,
labelArray[5].date,
labelArray[6].date
],
series: [[
labelArray[0].sessions,
labelArray[1].sessions,
labelArray[2].sessions,
labelArray[3].sessions,
labelArray[4].sessions,
labelArray[5].sessions,
labelArray[6].sessions
]]
}
}
});
new Chartist.Line('.ct-chart', data);
Decided to go with $.ajax to get the json file rather than getJSON as this allows me to disable asynchronous loading, ensuring the data is available when the graph is drawn.
Also, it is possible to set the dataType to Json rather than text, but this gives error in the JSON.parse line. Assuming that is because it tries to parse json as json, and fails to do so. But this is the only way i managed to get it to work, and add the json to an object.
Most likely the whole labelArray[0].date, labelArray[1].date is rather inefficient and should be improved but it works for now.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm growing desperate with amCharts doing the simplest task. Well, at least what I think is simple. I want to create a normal line chart with "normal" data. What do I mean with normal? Well, having an array with my y values, and maybe also one for x:
x = [1,2,3,4]
y = [5,6,7,8]
Shouldn't it be pretty easy to put something like this in a chart? And still I'm sitting here having no idea how to do this properly(!) in amcharts. I'm using Flask (Python) and can use jsonify to get my arrays into JSON files and send it to the client, but I'm not able to go any further.
Any ideas? I mean, shouldn't this be the most basic task? But all examples using amCharts doing special stuff with date formats for x..
Thank you very much!
First things first, if you are looking at plotting a line graph out of arbitrary X and Y coordinates (as opposed plotting series-based data), you're better off using XY chart than serial one.
Also, amCharts will not be able to plot data in separate arrays of coordinates.
You can either convert the data to a proper format at the moment of generation of data, so it looks like this:
chartData = [ {
x: 1,
y: 5
}, {
x: 2,
y: 6
}, {
x: 3,
y: 7
}, {
x: 4,
y: 8
}];
Or add some code that converts your data to amCharts-compatible data before supplying it to the chart:
/**
* Source data
*/
var x = [1,2,3,4];
var y = [5,6,7,8];
/**
* Convert source data to AmCharts-compatible format
*/
var chartData = [];
for( var i = 0; i < x.length; i++ ) {
chartData.push( {
"x": x[ i ],
"y": y[ i ]
} )
}
/**
* Create the chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"graphs": [ {
"bullet": "circle",
"bulletSize": 8,
"lineAlpha": 1,
"lineThickness": 2,
"fillAlphas": 0,
"xField": "x",
"yField": "y",
} ]
} );
Here's a working demo of the above:
http://codepen.io/amcharts/pen/15b2c710357a7e29eda11dc5caa07d44
following is the simpliest definition possible. The dateProvider is an array of objects where each element represents the x-axis item with it's y values.
AmCharts.makeChart("your element id",{
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "category",
"graphs": [
{
"valueField": "column-1"
}
],
"dataProvider": [
{
"category": "1",
"column-1": "8"
},
{
"category": "2",
"column-1": 6
},
{
"category": "3",
"column-1": 2
},
{
"category": "4",
"column-1": 1
}
]
});
Live sample:
http://live.amcharts.com/2JmYT/edit/
Using D3, I am creating a dial with a nice lighting effect using SVG with a filter. When displayed at the top of the webpage, everything looks great. When displayed lower down in the page, it usually (9 times out of 10) gets corrupted somehow during page load. I guess this is something to do with the dial being rendered and then moved, with the filter not catching up somehow, but I'm not sure. I hope someone can tell me why. I don't think I can reproduce this in a Fiddle but if I can I'll add a link. Here are the essential parts.
Just the circle without the filter.
The circle with filter applied and looking good.
The circle with filter applied and corrupted. It looks like maybe the filter position is slightly down and right relative to the simple circle.
Filter code:
var defs = svg.append("defs");
defs.append("path").attr({ id: "curve", d: "M20,20 A43,40 0 0,0 66,20" });
var f1 = defs.append("filter").attr({ id: "f1", x: "-10%", y: "-10%", width: "120%", height: "120%" });
f1.append("feGaussianBlur").attr({ "in": "SourceAlpha", stdDeviation: "4", result: "blur" });
f1.append("feOffset").attr({ "in": "blur", dx: 4, dy: 4, result: "offsetBlur" });
f1.append("feSpecularLighting").attr({ "in": "blur", surfaceScale: "5", specularConstant: ".75", specularExponent: "20", "lighting-color": "#eeeeee", result: "specOut" })
.append("fePointLight").attr({ x: "-5000", y: "-10000", z: "20000" });
f1.append("feComposite").attr({ "in": "specOut", in2: "SourceAlpha", operator: "in", result: "specOut" });
f1.append("feComposite").attr({ "in": "SourceGraphic", in2: "specOut", operator: "arithmetic", k1: "0", k2: "1", k3: "1", k4: "0", result: "litPaint" });
var merge = f1.append("feMerge");
merge.append("feMergeNode").attr({ "in": "offsetBlur" });
merge.append("feMergeNode").attr({ "in": "litPaint" });
Filter application:
svg.append("circle").attr({ cx: mid, cy: mid, r: radius, "class": "edge", filter: "url(#f1)" });