Forum Replies Created by Anjali

Viewing 15 posts - 46 through 60 (of 171 total)
  • in reply to: Render error on second monitor #8499

    Robert,

    We have fixed the issue and we’ll be releasing it tomorrow.

    Thanks for reporting.

    __
    Anjali

    in reply to: Graph a CSV file #8498

    There are few issues in your code. So please correct the below mentioned points:

    1) You are using jQuery file in the end because of which $ is not define when you are trying to do $(document).ready. Please use jQuery before $(document).ready.

    2) While rendering the chart you are using data object twice

    data: [
    {
    indexLabelPlacement: “outside”,
    indexLabelFontWeight: “bold”,
    indexLabelFontColor: “black”,
    data: [
    {
    type: “column”
    dataPoints: dataPoints
    }
    ]

    Below is the code with the issues fixed.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    
    	$.ajax({
    		type: "GET",
    		url:"data2.csv",
    		dataType: "text",
    		success: function(data) {processData(data);}
    	});
    
    	function processData( allText ) {
    		var allLinesArray = allText.split("\n");
    		if( allLinesArray.length > 0 ){
    			var dataPoints = [];
    			for (var i = 0; i <= allLinesArray.length-1; i++) {
    				var rowData = allLinesArray[i].split(",");
    				dataPoints.push({ label:rowData[0], y:parseInt(rowData[1]) });
    			}
    			drawChart(dataPoints);
    		}
    	}
    
    	function drawChart( dataPoints) {
    		var chart = new CanvasJS.Chart("chartContainer", {
    			title:{
    				text: "ID"
    			},
    			axisX:{
    				labelAngle: 0,
    				labelWrap:true,
    				labelAutoFit: false,
    				labelFontSize: 15,
    				labelMaxWidth: 200,
    				labelFontColor: "black"
    			},
    			data: [
    			{
    				indexLabelPlacement: "outside",
    				indexLabelFontWeight: "bold",
    				indexLabelFontColor: "black",
    				type: "column",
    				dataPoints: dataPoints
    			}
    			]
    		});
    		chart.render();
    	}
    });
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body style="background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center">
    <div id="chartContainer" style="height: 800px; width: 100%; background-image:url("fonto1.png"); background-repeat:no-repeat; background-position:center; background-size:100% 100%"></div>
    <div style="text-align: center; color:red; font-size:25px;"><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>
    </body>
    </html>

    __
    Anjali

    in reply to: DateTime Series Charts #8497

    nirmala,

    Yes, CanvasJS supports dateTime values, please refer this article. We have replied with an example in the other thread which you have created.

    __
    Anjali

    in reply to: x axis time from different days with breaks #8486

    tom,

    You can either use labels or set interval property of Axis to override this behaviour. If this doesn’t help, please create a jsfiddle with your sample code so that we can have a look.

    __
    Anjali

    • This reply was modified 9 years, 9 months ago by Anjali.
    in reply to: MathJax & CanvasJS #8485

    brouzdalek,

    As of now it is not possible to integrate MathJax output with CanvasJS Charts.

    __
    Anjali

    in reply to: Render error on second monitor #8484

    Robert,

    Thanks for the reporting, we will look into the issue and get back at the earliest.

    __
    Anjali

    in reply to: Y axis valueFormatString #8483

    pepelopez,

    Y Axis does not support dateTime values as of now. It is available only on x axis.

    __
    Anjali

    in reply to: MathJax & CanvasJS #8474

    brouzdalek,

    With the existing API of CanvasJS itself you can show exponent values in axis labels. Please use valueFormatString property for formatting the numbers and suffix/prefix for any additional characters. Here is an example.

    __
    Anjali

    in reply to: Title as link #8421

    repazol,

    This feature is not available yet.

    __
    Anjali

    in reply to: Get the color of the last line added to a Trend #8418

    As of now it is not possible to find out automatically set colors of dataSeries. But you can set color to dataSeries yourself so that you can use the same for checkbox.

    __
    Anjali

    in reply to: Automate chart image export #8410

    06chaynes,

    Can you please explain what you mean by “automatically export”? In case you meant saving to the disk, then it is not possible because of browser restrictions.

    __
    Anjali

    in reply to: Remove all paddings and margins #8307

    dodo,

    As you are looking to remove margin from all four sides, you can add a dummy dataSeries with no dataPoints and secondary axisX and axisY. Code snippet shared below shows the same:

    var chart = new CanvasJS.Chart("chartContainer",{
      backgroundColor: "red",
      axisX: {
        valueFormatString: " ",
        lineThickness: 0,
        gridThickness: 0,
        tickLength: 0,
        margin: -10,
      },
      axisY: {
        valueFormatString: " ",
        lineThickness: 0,
        gridThickness: 0,
        tickLength: 0,
        margin: -10
      },
      axisX2: {
        valueFormatString: " ",
        lineThickness: 0,
        gridThickness: 0,
        tickLength: 0,
        margin: -10,
      },
      axisY2: {
        valueFormatString: " ",
        lineThickness: 0,
        gridThickness: 0,
        tickLength: 0,
        margin: -10
      },
      data: [
        {
          type: "bar",
          dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55},
            { x: 30, y: 50 },
            { x: 40, y: 65 },
            { x: 50, y: 95 },
            { x: 60, y: 68 },
            { x: 70, y: 28 },
            { x: 80, y: 34 },
            { x: 90, y: 14}
          ]
        },
        {
          type: "bar",
          axisXType: "secondary",
          axisYType: "secondary",
          dataPoints: []
        }
      ]
    });
    
    chart.render();

    Please take a look at this JSFiddle for a working example with sample code.

    CanvasJS basic bar chart with negative margin for axes

    __
    Anjali
    Team CanvasJS

    in reply to: place axis x up #8306

    megarog4,

    Sorry, it is not possible yet.

    __
    Anjali

    in reply to: How to update chart data every second #8295

    elvinas,

    For every update you shouldn’t recreate the chart. Instead you should create chart only once and later updated only its values as shown below:

    var chart = new CanvasJS.Chart("chartContainer", {
    	data: [
    		{
    			dataPoints: null
    		}
    	]
    });

    and don’t render the chart here. Inside getJSON access the chart’s options and assign the result’s data to dataPoints and render the chart. Below is the code snippet:

    $.getJSON("data.php", function (result) {
    	
    	chart.options.data[0].dataPoints = result;
    	chart.render();	
    });

    and update the dataPoint’s data at a given interval.

    var updateChart = function() {
                
    	$.getJSON("chart.php", function (result) {
    	
    		chart.options.data[0].dataPoints = result;
    		chart.render();	
    	
    	});   
    }            
    setInterval(function(){updateChart()},1000);

    Also, you can checkout this example which updates chart data every 1500 milliseconds.

    Dynamic Line Chart

    __
    Anjali
    Team CanvasJS

    in reply to: Remove all paddings and margins #8290

    dodo,

    As of now the margins for the plot area are automatically calculated and can’t be customized. For removing the extra margin from the bottom and left you can set axisX margin and axisY margin to -10 as shown below:

    axisX: {
      margin: -10
    },
    axisY: {
      margin: -10
    }

    Please take a look at this JSFiddle for a working example with sample code.

    CanvasJS Basic Bar Chart with negative axisX margin

    __
    Anjali
    Team CanvasJS

Viewing 15 posts - 46 through 60 (of 171 total)