Step Chart from FlexChart

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  
  <h1>FlexChart</h1>
  <p>This FlexChart uses the itemFormatter function to customize plot elements in the FlexChart to craete a custom chart type</p>
  <h3>
  Step Chart
  </h3>
  <div id="chart" style="width:400px;height:200px"></div>

</div>

JavaScript

var data = [];
        for (var i = 0; i < 10; i++) {
            data[i] = {
                x: i,
                y: 20 + 80 * Math.random()
            }
        }

        // create and setup chart
        var chart = new wijmo.chart.FlexChart("#chart");
        chart.initialize({
            itemsSource: data,
            bindingX: 'x',
            binding: 'y',
	    chartType: wijmo.chart.ChartType.Scatter,
            series: [{ }]
        });

        chart.itemFormatter = function (engine, hitTestInfo, defaultFormat) {
        	if (hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {
            	var item = hitTestInfo.item;
				var series = hitTestInfo.series;
				var pi = hitTestInfo.pointIndex;

            	if( pi > 0) {
					var xvals = series.getValues(1);		
					// previous data point
                	var prevX = xvals ? xvals[pi - 1] : pi - 1;
					var prevY = series.getValues(0)[pi - 1];
					// convert to pixel coordinates
                	var pt1 = chart.dataToPoint( item.x, prevY);
                	var pt2 = chart.dataToPoint( prevX, prevY);
					// draw lines
                	engine.drawLine( hitTestInfo.point.x, hitTestInfo.point.y, pt1.x, pt1.y);  
                	engine.drawLine( pt1.x, pt1.y, pt2.x, pt2.y);  
            	}
            // draw default symbol\
            console.log(defaultFormat);
            defaultFormat();
            }
        };