dimple.js | 易学教程

Dimple.js multi series bar not stacked

阅读更多关于 Dimple.js multi series bar not stacked

Here is sample code... var svg = dimple.newSvg("#chartContainer", 600, 400), chart = null, s1 = null, s2 = null, x = null, y1 = null, y2 = null, data = [ { "ID" : "1", "Value 1" : 100000, "Value 2" : 110000 }, { "ID" : "2", "Value 1" : 90000, "Value 2" : 145000 }, { "ID" : "3", "Value 1" : 140000, "Value 2" : 60000 } ]; chart = new dimple.chart(svg, data); x = chart.addCategoryAxis("x", "ID"); y1 = chart.addMeasureAxis("y", "Value 1"); y2 = chart.addMeasureAxis("y", "Value 2"); s1 = chart.addSeries(null, dimple.plot.bar, [x, y1]); s2 = chart.addSeries(null, dimple.plot.bar, [x, y2]); chart

Multi-series in dimplejs

阅读更多关于 Multi-series in dimplejs

问题 I am tinkering with a multi-series chart in dimplejs and got a bit stuck with the multi axis logic. With the following data: var data = [ {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4}, {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3}, {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5}, {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1}, {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4} ] I try to get a chart showing, by months, my

Measure axis - limit tick values

阅读更多关于 Measure axis - limit tick values

I have chart looking like that: I use measure axis for Y: y = myChart.addMeasureAxis("y", "rate"); y.tickFormat = ",.4f"; As you can see ticks starts from 0.0000 while data has values starting from a bit above 3.0000. Is it possible to display y ticks starting from 2.5000 for example? I tried: y.overrideMin = 2; but it does not work as I expect. The x axis disappears: Thank you. I'm afraid overriding minimum axis values is a little suboptimal at the moment. There is a workaround but it's a bit of a hack. Basically you just hide the x axis entirely and draw a second chart with no series over

D3 Dimple - How to show multiple dimple charts on same page?

阅读更多关于 D3 Dimple - How to show multiple dimple charts on same page?

I'm making an html page with several examples of charts that I will be using. On the page I have a Dimple line graph, a pie chart, a wordcloud etc. When I try to add a second dimple graph - this time a bar graph, the first dimple line graph that I already have on the page is drawn on top of my bar graph: My HTML file looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3 Graphs</title> <link rel="stylesheet" type="text/css" href="_/base.css"> <link rel="stylesheet" type="text/css" href="_/c3CSS.css"> <script type="text/javascript" src="_/d3.min.js"></script>

Dual x-axes for line-graphs in SVG

阅读更多关于 Dual x-axes for line-graphs in SVG

问题 I have started to work on D3.js and Dimple.js. Our requirement is to create a line-graph with dual x-axes. Post basic research on this requirement, I found that D3.js or Dimple.js supports dual y-axes but not dual x-axes. My first question is "Does D3.js or Dimple.js support dual x-axes like box model?". 回答1: D3 does support dual x-axes already. You can call d3.svg.axis() as many times as you want to create as many axes lines as you want. You'll need to position them via transform="translate

How to rotate x-axis text in dimple.js?

阅读更多关于 How to rotate x-axis text in dimple.js?

This is my dimple bar chart (powered by d3): var sidechart = new dimple.chart(chart_svg, data); sidechart.setBounds(60, 30, 200, 300) var x = sidechart.addCategoryAxis("x", "Long name"); sidechart.addMeasureAxis("y", "Measure"); sidechart.addSeries(["Short name", "Long name"], dimple.plot.bar); sidechart.draw(); Text on x-axis is quite long and by default dimple rotates it so it is displayed vertically. I want to rotate it by 45 degrees instead. Using d3 this would be done by doing this: myAxis.attr("transform", "rotate(-45)"); Unfortunately I am unable to find a similar way of doing that in

How do you reduce the number of Y-axis ticks in dimple.js?

阅读更多关于 How do you reduce the number of Y-axis ticks in dimple.js?

In dimple.js is there a way to, for example, reduce the number of y-axis ticks by half so that it would only show every other y tick instead of all of them? You can modify it after draw with some d3. Here is a method which will remove the labels leaving every nth one: // Pass in an axis object and an interval. var cleanAxis = function (axis, oneInEvery) { // This should have been called after draw, otherwise do nothing if (axis.shapes.length > 0) { // Leave the first label var del = 0; // If there is an interval set if (oneInEvery > 1) { // Operate on all the axis text axis.shapes.selectAll(

R: interactive plots (tooltips): rCharts dimple plot: formatting axis

阅读更多关于 R: interactive plots (tooltips): rCharts dimple plot: formatting axis

I have some charts created with ggplot2 which I would like to embed in a web application: I'd like to enhance the plots with tooltips. I've looked into several options. I'm currently experimenting with the rCharts library and, among others, dimple plots. Here is the original ggplot: Here is a first attempt to transpose this to a dimple plot: I have several issues: after formatting the y-axis with percentages, the data is altered. after formatting the x-axis to correctly render dates, too many labels are printed. I am not tied to dimple charts, so if there are other options that allow for an

How to draw labels on Dimple.js donut or pie chart?

阅读更多关于 How to draw labels on Dimple.js donut or pie chart?

问题 Trying to show the percentages right on the donut charts in dimple.plot.pie Here is some code that kind of works but places the labels right onto the slices. Having trouble making the labels show up outside the pie. rings = chart.addSeries("series", dimple.plot.pie); rings.afterDraw = function(shape, data) { var bbox, ctm; ctm = shape.getCTM(); bbox = shape.getBBox(); return this.chart.svg.append("text") .attr("x", ctm.e + bbox.x + bbox.width/2) .attr("y", ctm.f + bbox.y + bbox.height/2)

dimple js straight line y-axis over bar chart

阅读更多关于 dimple js straight line y-axis over bar chart

问题 I am trying to draw Average, High and Low value straight line on a dimple js bar chart. I have no clue how they can be drawn on y-axis (cost) as straight line that will cut through the bars. Here is the fiddle that has high, low and average values saved into corresponding variable that needed to be drawnon the chart. Any solution? jsfiddle link: http://jsfiddle.net/Ra2xS/14/ var dim = {"width":590,"height":450}; //chart container width var data = [{"date":"01-02-2010","cost":"11