Villabon135
Posts: 1
Joined: Wed Jun 15, 2022 9:35 pm

How to correct index and current date

I have the following error with this highcharts chart library.
I need to update the date to the current one and that the date of the corresponding day appears in the index.


just change from Highcharts.chart to Highcharts.stockChart. (Attached image)

Image
Image

from here the data and graph are brought

Code: Select all

 function datagrafico(base_url){
    										
     $.ajax({
       url: base_url + "index.php/Admin/getDataDias",
       type:"POST",
       dataType:"json",
       success:function(data){
    	  var dias = new Array();
    	  var montos = new Array();
    	  $.each(data,function(key, value){
    		   dias.push(value.fecha_actualizacion);
    		   valor = Number(value.monto);
    		   montos.push(valor);
    		});
    		graficar(dias,montos);
    		}
    	   });
    	  }

    function graficar(dias, montos){
    										
    										
        Highcharts.stockChart('grafico', {
    	  chart: {
    	  renderTo: 'container',
    	  type: 'column'
    	},
    	title: {
    	   text: 'Monto acumulado por ventas diarias'
    	},
    	subtitle: {
    		text: ''
    	},
    	xAxis: {
    		categories: dias,
    		crosshair: true
    		},
    										
    	yAxis: {
    		min: 0,
    		title: {
    			text: 'Monto Acumulado (Colombiano)'
    		}
    	},
    										
    	tooltip: {
    			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    		    pointFormat: '<tr><td style="color:{series.color};padding:0">Monto: </td>' +
    			'<td style="padding:0"><b>{point.y} Colombiano</b></td></tr>',
    			footerFormat: '</table>',
    			shared: true,
    			useHTML: true
    	},
    	plotOptions: {
    			column: {
    				pointPadding: 0,
    				borderWidth: 0
    			},
    			series:{
    			    dataLabels:{
    						enabled:true,
    						formatter:function(){
    						return Highcharts.numberFormat(this.y)
    				}
    
    			}
    		}
    	},
    	rangeSelector: {
    			inputPosition: {
    			    align: 'right',
    				x: 0,
    				y: 0
    			},
    		},
    		series: [{
    			name: 'dias',
    			data: montos
    
    		}]
    	});
controller:

Code: Select all

  public function getDataDias(){
    		
    		$resultados = $this->model_venta->montos();
    		echo json_encode($resultados);
    	}
and model:

Code: Select all

public function montos(){
		$this->db->select("fecha_actualizacion, SUM(total) as monto");
		$this->db->from("venta");
		$this->db->where("pago_id","2");
		$this->db->where("estado","1");
		$this->db->group_by('DATE(fecha_actualizacion)');
		$this->db->order_by('DATE(fecha_actualizacion)');
		$resultados = $this->db->get();
		return $resultados->result();
	}
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to correct index and current date

Hello Villabon135!
Welcome to our forum and thanks for contacting us with your question!

In Highcharts Stock the x-axis is always a datetime axis. You want to use categories type on the Stock chart and that is not correct. If you want to have the navigator and range selector on the categorized chart just use a chart constructor and import the Highstock package. Next, enable extensions, which you want - you can check the demo below.

Demo: https://jsfiddle.net/BlackLabel/Lsduc7qo/
API Reference: https://www.highcharts.com/docs/chart-concepts/axes

Also, the important thing, is that if you are not using datetime axis your range selector won't work. I suggest you change your data to datetime and pass as x value a date value in milliseconds - thanks to that you will be able to use a stockChart constructor and xAxis of type datetime.

Let me know if you have any further questions!
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”