Highcharts - creating chart with same scale axis -

-

i'm trying create combined chart line , semi-circles numerical x , y axis. have problem because can't create chart axis in same scale. how every try different proportions of x , y scale. here example: https://jsfiddle.net/nje5cj6x/.

    var data = [         [10, 100],         [20, 150],         [30, 200],         [40, 250],         [50, 300]   ];

so, container has same width , height, both axis same, still x , y axis not same proportions: measured width , height

so, on graph each point on line should intersect corresponding semi-circle @ 90'. can done?

also, can add data in data var? example, i'd pass variable r, besides x , y radius? if that, values not calculated in same scale, if edit code to:

chart.renderer.arc(point.plotx + chart.plotleft, point.ploty + chart.plottop, point.r, point.r, -math.pi, 0)

i worse result.

thanks!

in example, canvas element has same width , height. however, there more room used @ bottom labels/legend used on left labels. result, plot area has different width , height. since x-axis , y-axis have same range, 1 unit on x-axis , 1 unit on y-axis have different lengths in canvas units. instead of rendering circle on plot area, need render ellipse (that circle).

one solution push 3 points (left, top, right) each arc circle_data array. use plot area locations of 3 points render path elliptical arc curve. example...

$(function() {    var data = [      [10, 100],      [20, 150],      [30, 200],      [40, 250],      [50, 300]    ];      var line_data = [];    var circle_data = [];    (var = 0; < data.length; i++) {      var xvalue = data[i][1] / 2;      var yvalue = 0;      var rvalue = data[i][1] / 2;        circle_data.push({        x: xvalue - rvalue,        y: yvalue,      });      circle_data.push({        x: xvalue,        y: yvalue + rvalue,      });      circle_data.push({        x: xvalue + rvalue,        y: yvalue,      });      line_data.push({        x: xvalue,        y: rvalue      });    }      $('#container2').highcharts({        title: {          text: '',        },        credits: {          enabled: false        },        exporting: {          enabled: false        },        tooltip: {          enabled: true        },        xaxis: {          title: {            usehtml: true,            text: '&sigma; (mpa)'          },          gridlinewidth: 1,          min: 0,          max: 360,          tickinterval: 20        },        yaxis: {          title: {            usehtml: true,            text: '&tau; (mpa)'          },          gridlinewidth: 1,          min: 0,          max: 360,          tickinterval: 20        },        plotoptions: {          line: {            marker: {              enabled: true            }          }        },        series: [{          // dataset za krivulju          type: 'line',          name: 'o3(mpa)',          enablemousetracking: true,          data: line_data,          point: {            events: {              mouseover: function() {                $('#row_' + this.index + ' > td').css("background-color", "yellow");              },              mouseout: function() {                $('#row_' + this.index + ' > td').css("background-color", "white");              }            }          }        }, {          // dataset za mohrove kružnice          visible: false,          data: circle_data,        }]      },      function(chart) {        // crtanje mohrovih kružnica        (var = 0; 3 * + 2 < chart.series[1].data.length; i++) {          var point0 = chart.series[1].data[3 * i];          var point1 = chart.series[1].data[3 * + 1];          var point2 = chart.series[1].data[3 * + 2];          var pathdata = [              "m",              chart.plotleft + point0.plotx,              chart.plottop + point0.ploty,              "a",              point2.plotx - point1.plotx,              point2.ploty - point1.ploty,              0,              1,              1,              chart.plotleft + point2.plotx,              chart.plottop + point2.ploty,          ];          chart.renderer.path(pathdata)            .attr({              id: 'arc_' + i,              fill: null,              stroke: 'silver',              'stroke-width': 0,              data_id: i,            })            .on('mouseover', function() {              $(this).css('stroke', 'red');              $('#row_' + $(this).attr('data_id') + ' > td').css("background-color", "yellow");            })            .on('mouseout', function() {              $(this).css('stroke', 'silver');              $('#row_' + $(this).attr('data_id') + ' > td').css("background-color", "white");            })            .animate({              'stroke-width': 3            })            .add();        }        chart.series[1].remove();      });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.highcharts.com/highcharts.js"></script>  <div id="container2" style="width: 600px; height: 600px;"></div>

note solution works radius. 3 data points in circle_data array computed radius. render computes radius 3 corresponding plot area locations.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more