Entonces la idea es que durante todos los días de la semana tenga combustible consumido y recargado. Lo pensé como un gráfico de columnas de rango básico (canvas js) pero el color y el ancho tienen que cambiar cuando la barra va por debajo del eje horizontal.

Quiero decir, quiero un gráfico como este

this is how the graph should look like

Intenté esto usando la biblioteca canvasjs

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    animationEnabled: true,
    title: {
        text: "Brent Crude Oil Price - 2016"
    },
    axisY: {
        title: "Price(USD/bbl)",
        includeZero: false
    },
    data: [{
        color: "#98fb98",
        type: "rangeColumn",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM YYYY",
        toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
        dataPoints: [       
            { x: new Date(2016, 0), y: [0, 38.99] },
            { x: new Date(2016, 1), y: [0, 37.00] },
            { x: new Date(2016, 2), y: [0, 42.54] },
            { x: new Date(2016, 3), y: [0, 48.50] },
            { x: new Date(2016, 4), y: [0, 50.51] },
            { x: new Date(2016, 5), y: [0, 52.86] },
            { x: new Date(2016, 6), y: [0, 50.75] },
            { x: new Date(2016, 7), y: [0, 51.22] },
            { x: new Date(2016, 8), y: [0, 50.14] },
            { x: new Date(2016, 9), y: [0, 53.73] },
            { x: new Date(2016, 10), y: [0, 50.49] },
            { x: new Date(2016, 11), y: [0, 57.89] }
        ]
    },
 {
        color: "#ffb6c1",
        type: "rangeColumn",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM YYYY",
        toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
        dataPoints: [       
            { x: new Date(2016, 0), y: [-27.10, 0] },
            { x: new Date(2016, 1), y: [-29.92, 0] },
            { x: new Date(2016, 2), y: [-35.95, 0] },
            { x: new Date(2016, 3), y: [-37.27, 0] },
            { x: new Date(2016, 4), y: [-43.33, 0] },
            { x: new Date(2016, 5), y: [-46.69, 0] },
            { x: new Date(2016, 6), y: [-41.80, 0] },
            { x: new Date(2016, 7), y: [-41.51, 0] },
            { x: new Date(2016, 8), y: [-45.09, 0] },
            { x: new Date(2016, 9), y: [-47.98, 0] },
            { x: new Date(2016, 10), y: [-43.57, 0] },
            { x: new Date(2016, 11), y: [-51.51, 0] }
        ]
    }          
          ]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

El gráfico que obtuve es este:

The graph I was able to create

¿Cómo obtener el gráfico como en la primera imagen?

0
sruthi sripathi 14 feb. 2018 a las 14:41

2 respuestas

La mejor respuesta

Puede utilizar una combinación de gráficos de columna y de rango-columna.

var chart = new CanvasJS.Chart("chartContainer", {        
	data: [
	{
		color: "#98fb98",
		type: "column",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}: {y}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: 38.99 },
			{ x: new Date(2016, 1), y: 37.00 },
			{ x: new Date(2016, 2), y: 42.54 },
			{ x: new Date(2016, 3), y: 48.50 },
			{ x: new Date(2016, 4), y: 50.51 },
			{ x: new Date(2016, 5), y: 52.86 },
			{ x: new Date(2016, 6), y: 50.75 },
			{ x: new Date(2016, 7), y: 51.22 },
			{ x: new Date(2016, 8), y: 50.14 },
			{ x: new Date(2016, 9), y: 53.73 },
			{ x: new Date(2016, 10), y: 50.49 },
			{ x: new Date(2016, 11), y: 57.89 }
		]
	},
	{
		color: "#ffb6c1",
		type: "rangeColumn",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}: {y[0]}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: [-27.10, 0] },
			{ x: new Date(2016, 1), y: [-29.92, 0] },
			{ x: new Date(2016, 2), y: [-35.95, 0] },
			{ x: new Date(2016, 3), y: [-37.27, 0] },
			{ x: new Date(2016, 4), y: [-43.33, 0] },
			{ x: new Date(2016, 5), y: [-46.69, 0] },
			{ x: new Date(2016, 6), y: [-41.80, 0] },
			{ x: new Date(2016, 7), y: [-41.51, 0] },
			{ x: new Date(2016, 8), y: [-45.09, 0] },
			{ x: new Date(2016, 9), y: [-47.98, 0] },
			{ x: new Date(2016, 10), y: [-43.57, 0] },
			{ x: new Date(2016, 11), y: [-51.51, 0] }
		]
	} 				
	]
});

chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
3
Vishwas R 14 feb. 2018 a las 12:10

Puede utilizar un gráfico de columna de rango de una serie de datos junto con la configuración del color para cada punto de datos.

var chart = new CanvasJS.Chart("chartContainer", {        
data: [{
		type: "rangeColumn",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: [0, 38.99] },
			{ x: new Date(2016, 1), y: [0, 37.00] },
			{ x: new Date(2016, 2), y: [0, 42.54] },
			{ x: new Date(2016, 3), y: [0, 48.50] },
			{ x: new Date(2016, 4), y: [0, 50.51] },
			{ x: new Date(2016, 5), y: [0, 52.86] },
			{ x: new Date(2016, 6), y: [0, 50.75] },
			{ x: new Date(2016, 7), y: [0, 51.22] },
			{ x: new Date(2016, 8), y: [0, 50.14] },
			{ x: new Date(2016, 9), y: [0, 53.73] },
			{ x: new Date(2016, 10), y: [0, 50.49] },
			{ x: new Date(2016, 11), y: [0, 57.89] },
			//Second Set
			{ x: new Date(2016, 0), y: [-27.10, 0] },
			{ x: new Date(2016, 1), y: [-29.92, 0] },
			{ x: new Date(2016, 2), y: [-35.95, 0] },
			{ x: new Date(2016, 3), y: [-37.27, 0] },
			{ x: new Date(2016, 4), y: [-43.33, 0] },
			{ x: new Date(2016, 5), y: [-46.69, 0] },
			{ x: new Date(2016, 6), y: [-41.80, 0] },
			{ x: new Date(2016, 7), y: [-41.51, 0] },
			{ x: new Date(2016, 8), y: [-45.09, 0] },
			{ x: new Date(2016, 9), y: [-47.98, 0] },
			{ x: new Date(2016, 10), y: [-43.57, 0] },
			{ x: new Date(2016, 11), y: [-51.51, 0] }
	]
	}]
});

addColor(chart);
chart.render();

function addColor(chart){
	for(var i = 0; i < chart.options.data.length; i++){
		for(var j = 0; j < chart.options.data[i].dataPoints.length; j++){
			chart.options.data[i].dataPoints[j].color = chart.options.data[i].dataPoints[j].y[0] == 0 ? "#ffb6c1" : "#98fb98";
		}
	}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
3
Manoj Mohan 14 feb. 2018 a las 13:55