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: 'σ (mpa)' }, gridlinewidth: 1, min: 0, max: 360, tickinterval: 20 }, yaxis: { title: { usehtml: true, text: 'τ (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