Modules/Chart/resource/Chart.js
//Here, the chart magic takes place. C3js is called
Here, the chart magic takes place. C3js is called
Here the chart magic takes place . C3js is called
function GenerateChart(chartData)
{
	if (chartData == undefined)
	{
		chartData = {}
	}
	if (dataLabels == undefined)
	{
    dataLabels = []
	}
	var groupLabels = [];
	if (chartData.m_StackedData == true)
	{
    groupLabels = dataLabels
  }
	var barRatio;
  try
  {
		barRatio = 0.8*Math.exp(-0.015*xValues[0].length);
	}
  catch (err)
  {
		barRatio=0.42
	}
	var formatCharacter;
	if (chartData.m_UsePercentageInPieChart == true)
	{
		formatCharacter = '%'
	}
	else
	{
		formatCharacter = '.1f'
	}
  chart = c3.generate({
	title:{
		text: chartData.m_diagramTitle,
		position: 'top-center'
	},
    data: {
        xs: {}, 
        columns: [],  
        types: chartTypes,
        selection: {
          enabled: false,
          multiple: false,
        },
		colors: dataColors,
		regions: lineStyle,
		groups: [groupLabels]
    },
    legend: {
        position: chartData.m_LegendPosition,
		show: chartData.m_ShowLegend
    },
    grid: {
      y: {
        lines: [{value:0}] 
      }
    },
    bar: {
        width: {
            ratio: barRatio
        }
    },
	pie:{
		label: {
		   format: function (value, ratio, id) {
				if (chartData.m_UsePercentageInPieChart==true){
					return d3.format('%') (ratio);
				}
				else{
					return value;
				}
			}
		}
	},
    zoom: {
        enabled: true,
    },
    subchart: {
        show: chartData.m_ShowSubchart  
    }, 
    axis: {
        x: {
          tick: {
            multiline: false,
            fit: false, 
            centered: true,
			format: d3.format(".1f"),
          },
		  label: {
			text: chartData.m_xAxisLabel,
			position: 'outer-center'
		  }
        },
        y: {
          tick: {
            format: d3.format(formatCharacter)
          },
		  label: {
			text: chartData.m_yAxisLabel,
			position: 'outer-middle'
		  },
		  scale: {
            name: chartData.m_YAxisScale
          }
        }
    },
	tooltip: {
		format: {
			title: function (x) { return chartData.m_xAxisLabel +  ': ' +  d3.format(".2f")(x)}
		},
	},
    point: {
        r: chartData.m_DataPointSize,
        focus: 
        {
          expand: {
            r: chartData.m_DataPointSize + 2
          }
        }
    },
  });
}
function GenerateChart ( chartData ) { if ( chartData == undefined ) { chartData = { } } if ( dataLabels == undefined ) { dataLabels = [ ] } var groupLabels = [ ] ; if ( chartData . m_StackedData == true ) { groupLabels = dataLabels } var barRatio ; try { barRatio = 0.8 * Math . exp ( - 0.015 * xValues [ 0 ] . length ) ; } catch ( err ) { barRatio = 0.42 } var formatCharacter ; if ( chartData . m_UsePercentageInPieChart == true ) { formatCharacter = '%' } else { formatCharacter = '.1f' } chart = c3 . generate ( { title : { text : chartData . m_diagramTitle , position : 'top-center' } , data : { xs : { } , columns : [ ] , types : chartTypes , selection : { enabled : false , multiple : false , } , colors : dataColors , regions : lineStyle , groups : [ groupLabels ] } , legend : { position : chartData . m_LegendPosition , show : chartData . m_ShowLegend } , grid : { y : { lines : [ { value : 0 } ] } } , bar : { width : { ratio : barRatio } } , pie : { label : { format : function ( value , ratio , id ) { if ( chartData . m_UsePercentageInPieChart == true ) { return d3 . format ( '%' ) ( ratio ) ; } else { return value ; } } } } , zoom : { enabled : true , } , subchart : { show : chartData . m_ShowSubchart } , axis : { x : { tick : { multiline : false , fit : false , centered : true , format : d3 . format ( ".1f" ) , } , label : { text : chartData . m_xAxisLabel , position : 'outer-center' } } , y : { tick : { format : d3 . format ( formatCharacter ) } , label : { text : chartData . m_yAxisLabel , position : 'outer-middle' } , scale : { name : chartData . m_YAxisScale } } } , tooltip : { format : { title : function ( x ) { return chartData . m_xAxisLabel + ': ' + d3 . format ( ".2f" ) ( x ) } } , } , point : { r : chartData . m_DataPointSize , focus : { expand : { r : chartData . m_DataPointSize + 2 } } } , } ) ; }
Here, the chart magic takes place.
Here the chart magic takes place .
//adaption for bar ratio independent of amount of data points //otherwise, bars could be covered. //use first "column" as x axis values //initialize empty. Data will be loaded in function setupChart(chartData) //Draws a horizontal line at y=0 //Shows a subchart that shows the region the primary chart is zoomed in to by overlay. //to make more x labels appear on zoom //Style data points in linegraph