So I tried to put hovertemplate inside go.Parcats but not sure which way to put it. I want something like when you hover on any line it shuold show the custom discription like names of attributes and count and percentage on hover.
Also is there any wat to blank out those labels at the bottom of the chart so that it looks less busy and nicer but also when you hover on it shuold show up details. I know it's too much of customization but hoping it's doable.
dimensions.append(dict(values = df[dim], label = dim, categoryarray = df[dim].unique(), categoryorder = 'array', ticktext = slabel))
fig = go.Figure(data = [go.Parcats(dimensions= dimensions,
line = {'color': color, 'colorscale':colorscale,},
)]
)
To the Word-Awesomeness example in dimplejs documentation, I have added 2 series with dimple.plot.bar and dimple.plot.line plotFunctions as shown below:
Chart with 2 series:
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = dimple.newSvg("body", 800, 600);
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.addSeries(null, dimple.plot.line);
chart.draw();
</script>
</body>
This displays the chart with both line and bar. I would like to hide/show the line and bar based on user selection. I tried removing a series using chart.series.splice (0,1) and redrawing. That did not work. The chart always shows both bar and line series.
However, the documentation of dimple.chart.series states that:
This collection is provided for viewing series which have been added with the addSeries method. However it may be modified directly to remove or move a series.
Example:
// Add three series and remove the middle one using a standard JavaScript array operation
myChart.addSeries("Brand", dimple.plot.bar);
myChart.addSeries("Brand", dimple.plot.bubble);
myChart.addSeries("Brand", dimple.plot.line);
myChart.series.splice(1, 1);
Please let me know how to hide/show a series selectively in dimplejs. Thanks.
The chart.draw code doesn't remove old series from the chart, splicing out the series will just prevent it from being updated the next time you call draw. You'll have to manually remove the elements from the chart :
myChart.addSeries("Brand", dimple.plot.bar);
myChart.addSeries("Brand", dimple.plot.bubble);
myChart.addSeries("Brand", dimple.plot.line);
chart.series[1].shapes.remove();
chart.series.splice(1, 1);
Here are some other options for toggling series :
http://jsbin.com/sacaze/3/edit?css,js,output
Add and remove the series each time. The loop to find the series can vary depending on how you're generating the series, it could just look for a specific combination of dimple.series.plot and dimple.series.categoryFields.
http://jsbin.com/sacaze/4/edit?html,js,output
Use the same logic to find the series, but just hide/show the shapes instead of removing the series. For toggling this is probably the approach I'd use.
To find the series you could also add a custom key to each series object :
var mySeries = chart.addSeries('category', dimple.plot.bar);
mySeries.my_custom_key = 'barSeries';
//somewhere else...
var barSeries = _.find(chart.series, function(series){ return series.my_custom_key === 'barSeries' });
Just make sure it doesn't conflict with a key on dimple.series : https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/series/begin.js
I am using Dojo to generate alternate chart on click event of previous chart.
Firstly, i am drawing stacked line chart(say for Customers) and on clicking one of the line i need to draw another pie chart for further details of that Customer(say revenue by that customer). All that is happening for a single line chart.
Here Problem is to find id for that particular line, now i am getting array of ids for all plotted lines.
Following graph is drawn for three Customers.
And Following I am presenting my code :
var colorArray =["#2cabe2","#57E964","#736AFF","#B93B8F","#151B8D","#EE9A4D",...];
for(var i =0 ; i<length ; i++)
{
chart.addSeries(response.legend + " "+ i,response.data[i],{color: colorArray[i]});
}
chart.connectToPlot("default", function(evt) {
var shape = evt.shape, type = evt.type;
if (type == "onclick") {
url="/ritl/chart/getProcessPieData.htm?customerId="+dijit.byId('customerId').get('value'); // url to the next (pie) chart in the same jsp.
processPie(url); // calling function for pie Chart
}
});
Data Response is in the form of JSONArray. JSON pattern is as:
{"data":[[{"text":"January","value":1,"customerID":"RITL00013","y":0},{"text":"February","value":2,"customerID":"RITL00013","y":0},{"text":"March","value":3,"customerID":"RITL00013","y":0},{"text":"April","value":4,"customerID":"RITL00013","y":0},{"text":"May","value":5,"customerID":"RITL00013","y":0},{"text":"June","value":6,"customerID":"RITL00013","y":0},{"text":"July","value":7,"customerID":"RITL00013","y":0},{"text":"August","value":8,"customerID":"RITL00013","y":0},{"text":"September","value":9,"customerID":"RITL00013","y":0},{"text":"October","value":10,"customerID":"RITL00013","y":119951.2},{"text":"November","value":11,"customerID":"RITL00013","y":430827.04},{"text":"December","value":12,"customerID":"RITL00013","y":0}],[{"text":"January","value":1,"customerID":"RITL00002","y":0},{"text":"February","value":2,"customerID":"RITL00002","y":0},{"text":"March","value":3,"customerID":"RITL00002","y":0},{"text":"April","value":4,"customerID":"RITL00002","y":0},{"text":"May","value":5,"customerID":"RITL00002","y":0},{"text":"June","value":6,"customerID":"RITL00002","y":0},{"text":"July","value":7,"customerID":"RITL00002","y":0},{"text":"August","value":8,"customerID":"RITL00002","y":0},{"text":"September","value":9,"customerID":"RITL00002","y":0},{"text":"October","value":10,"customerID":"RITL00002","y":41996.52},{"text":"November","value":11,"customerID":"RITL00002","y":566353.8099999999},{"text":"December","value":12,"customerID":"RITL00002","y":0}],[{"text":"January","value":1,"customerID":"RITL00016","y":0},{"text":"February","value":2,"customerID":"RITL00016","y":0},{"text":"March","value":3,"customerID":"RITL00016","y":0},{"text":"April","value":4,"customerID":"RITL00016","y":0},{"text":"May","value":5,"customerID":"RITL00016","y":0},{"text":"June","value":6,"customerID":"RITL00016","y":0},{"text":"July","value":7,"customerID":"RITL00016","y":0},{"text":"August","value":8,"customerID":"RITL00016","y":0},{"text":"September","value":9,"customerID":"RITL00016","y":0},{"text":"October","value":10,"customerID":"RITL00016","y":132784.45},{"text":"November","value":11,"customerID":"RITL00016","y":571506.6},{"text":"December","value":12,"customerID":"RITL00016","y":0}]],"Success":true,"dataLength":3}
How to find out the individual id for the line in the above Chart. Suggest me to get out of this situation. Thanks in advance for active suggestions..
What about something like the following in your connectPlot callback:
event.run.data[event.index].customerID
I am working on dojo pie chart. When I feed data to the chart as
[ {y:10}, {y:40}, {y:30}]
I want to see the values displayed on the chart as 10%, 40% and 30%. But the chart displays as 12.5%, 37.5% and 50%. What should I do, to enable the pie chart display the values, which I send as it is?
Any help is appreciated
The solution is simple: set labels as you want them: [{y: 10, text: "10%"}, ...] and so on. You can easily automate it. A sketch:
var items = [10, 40, 30];
addSeries("default", dojo.map(values, function(item){
return {y: item, text: item + "%"};
});
The same way you can add custom tooltips, or some other attributes (e.g., colors).