chartnew.js/demo_program/chart_list.js

Simple HTML5 Charts using the canvas element

// JavaScript Document

var lst=[];

// Field0 : name
// Field1 : source file
// Field2 : Key words (the first key words is the category for the menu)
// Field3 : Wiki links separated by a comma
// Field4 : description

lst[lst.length]=["Demo","../Samples/demo.html","00.Demo Demo","","Demo"];
lst[lst.length]=["format.js","../Samples/add-ins_format.html","90.Add-ins Format Date Time","","Displays charts with date/time format using the format.js Add-ins"];
lst[lst.length]=["Animation","../Samples/animation_bar.html","10.Bar Animation","","Displays all kinds of animation for Bar charts"];
lst[lst.length]=["Animation","../Samples/animation_doughnut.html","35.Doughnut Animation","","Displays all kinds of animation for Doughnut charts"];
lst[lst.length]=["multi doughnut","../Samples/animation_doughnut_multi.html","35.Doughnut Animation","","Displays all kinds of animation for Doughnut charts"];
lst[lst.length]=["Animation","../Samples/animation_HorizontalBar.html","20.HorizontalBar Animation","","Displays all kinds of animation for HorizontalBar charts"];
lst[lst.length]=["Animation","../Samples/animation_HorizontalStackedBar.html","25.HorizontalStackedBar Animation","","Displays all kinds of animation for HorizontalStackeBar charts"];
lst[lst.length]=["Animation","../Samples/animation_lines.html","05.Lines Animation","","Displays all kinds of animation for Lines charts"];
lst[lst.length]=["Animation","../Samples/animation_pie.html","30.Pie Animation","","Displays all kinds of animation for Pie charts"];
lst[lst.length]=["multi Pie","../Samples/animation_pie_multi.html","30.Pie Animation","","Displays all kinds of animation for Pie charts"];
lst[lst.length]=["Animation","../Samples/animation_polararea.html","40.PolarArea Animation","","Displays all kinds of animation for PolarArea charts"];
lst[lst.length]=["multi Polar","../Samples/animation_polararea_multi.html","40.PolarArea Animation","","Displays all kinds of animation for PolarArea charts"];
lst[lst.length]=["Animation","../Samples/animation_radar.html","45.Radar Animation","","Displays all kinds of animation for Radar charts"];
lst[lst.length]=["Animation","../Samples/animation_stacked_bar.html","15.StackedBar Animation","","Displays all kinds of animation for StackedBar charts"];
lst[lst.length]=["Mouse Action 3","../Samples/annotateFunction.html","50.Varia Mouses actions function","","This is a similar sample than the previous one; When you enter a hover area a function is called and when you leave an hover area another function is called."];
lst[lst.length]=["Annotate Variables","../Samples/annotateVars.html","05.Lines Annotations Vars","","Displays basic annotate variables in a line chart"];
lst[lst.length]=["Option detectAnnotateOnFullLine","../Samples/bar_and_lines_with_detectAnnotateOnFullLine.html","10.Bar Annotations function lines detectAnnotateOnFullLine","","Lines are added in a bar chart and the annotate for the lines is displayed when the mouse is vertically above or below the point. The displayed annotation is a user written function."];
lst[lst.length]=["Legend and Annotate","../Samples/bar_and_lines_with_detectAnnotateOnFullLine_with_box_legend.html","15.StackedBar Annotations Box Legend function","","Through a user written function, the annotation displays a box with the color of each element in the stackedbar"];
lst[lst.length]=["Bootstraps","../Samples/bootstrap.html","90.Add-ins Bootstrap  Tab","","In this samples, we use bootstrap; Each tab has is own graph."];
lst[lst.length]=["Click on text","../Samples/clicktextwithmouse.html","50.Varia Click text mouse function","","Each text zone in those charts is associated to a user written function. If you click on the text, the function is called."];
lst[lst.length]=["CrossImages","../Samples/crossImages.html","90.Add-ins Doughnut image jpg gif ","","In those charts, images are displayed; In the first chart, an image is drawn at serveral place in the chart; IN the second chart, a background image is displayed. Thoses samples uses the ShapesInShart Add-ins."];
lst[lst.length]=["Div in annotations","../Samples/div_in_annotate.html","50.Varia Div tag annotations","","div tags can be displayed in annotations; This example shows how to implement."];
lst[lst.length]=["Double Y Axis","../Samples/doubleYAxis.html","05.Lines Double Y Axis ","","Line charts can have lines with different scales/axis. Two axis can be defined; On axis is displayed on the left and the other one on the right."];
lst[lst.length]=["Double Y Axis","../Samples/doubleYAxisBarLine.html","10.Bar Double Y Axis ","","Bar charts can have bars with different scales/axis. Two axis can be defined; On axis is displayed on the left and the other one on the right. In this sample, a line is displayed in the Bar chart ; The Bars and the Lines have different scales."];
lst[lst.length]=["doughnut","../Samples/doughnut.html","35.Doughnut doughnut function color","","Simple doughnut sample"];
lst[lst.length]=["DrillDown","../Samples/drillDown.html","90.Add-ins DrillDown Bar Mouse Function Click","","In this sample, you can see how to implement a DrillDown in a Bar Chart."];
lst[lst.length]=["evolutive Text","../Samples/evolutiveText_in_chart.html","35.Doughnut Text Evolutive Animation ShapesInChart Add-ins","","In a chart, you can display a text; This text can change during the animation. It uses the ShapesInChart Add-ins."];
lst[lst.length]=["Function Gauss","../Samples/function_gauss.html","05.Lines Function xend xbegin xpos","","With ChartNew.js, you can plot the chart of a function. In this sample, we plot the chart of the Gauss function."];
lst[lst.length]=["Function Sin/Cos","../Samples/function_sinus_cosinus.html","05.Lines Function xend xbegin xpos","","With ChartNew.js, you can plot the chart of a function. In this sample, we plot the chart of the Sinus and the Cosinus function."];
lst[lst.length]=["Function 1/X","../Samples/function_X-1.html","05.Lines Function xend xbegin xpos","","With ChartNew.js, you can plot the chart of a function. In this sample, we plot the chart of the 1/X function."];
lst[lst.length]=["Function x2","../Samples/function_x2.html","05.Lines Function xend xbegin xpos","","With ChartNew.js, you can plot the chart of a function. In this sample, we plot the chart of the X2 function."];
lst[lst.length]=["Half Pie/Doughnut/PolarArea","../Samples/half_pie.html","50.Varia Half Pie Doughnut PolarArea","","The Pie/Doughnut/PolarArea charts can be limited to a portion of the circle."];
lst[lst.length]=["Multi Half Pie/Doughnut/PolarArea","../Samples/half_pie_multi.html","50.Varia Half Pie Doughnut PolarArea Multi","","The Multi Pie/Doughnut/PolarArea charts can be limited to a portion of the circle."];
lst[lst.length]=["Hatch 1","../Samples/hatch1.html","90.Add-ins Hatch Lines two ","","If you have two lines in your chart, the Add-ins 'hatch.js' make it possible to draw hatch between the two lines."];
lst[lst.length]=["Hatch 2","../Samples/hatch2.html","90.Add-ins Hatch Lines two ","","If you have two lines in your chart, the Add-ins 'hatch.js' make it possible to draw hatch between the two lines. In this second sample, the space between the two lines is completely filled."];
lst[lst.length]=["highLight 1","../Samples/highLight1.html","50.Varia highLight","","This is the sample program with option highLight : true"];
lst[lst.length]=["highLight 2","../Samples/highLight2.html","50.Varia highLight","","This is a sample with usage of highLight with function isHighLight and other features around highLighting."];
lst[lst.length]=["highLight 3","../Samples/highLight3.html","90.Add-ins highLight add-ins shapesInChart.js","","This is a sample with usageof hightLight option associated to the shapesInChart.js add-ins"];
lst[lst.length]=["highLight 3 Multi","../Samples/highLight3_multi.html","90.Add-ins highLight add-ins shapesInChart.js","","This is a sample with usageof hightLight option associated to the shapesInChart.js add-ins"];
lst[lst.length]=["highLight 4","../Samples/highLight4.html","90.Add-ins highLight add-ins shapesInChart.js","","This is a sample with usageof hightLight option associated to the shapesInChart.js add-ins"];
lst[lst.length]=["inPieData.html","../Samples/inPieData.html","30.Pie InGraphData overwritten avoid","","In Pie(Doughnut) charts, when you have small slices, it can be that InGraphData overlaps other InGraphData. In this sample, you will see how you can avoid this. <BR>This method is a bit deprecated; An Add-ins has been developped for it. See Add-ins 'specialInChartData.js'."];
lst[lst.length]=["issue 0102","../Samples/issue_102.html","95.Issues GradientColor Add-ins","","Request made to add gradient colors"];
lst[lst.length]=["issue 0107","../Samples/issue_107.html","95.Issues Logarithm scale Lines","","Problem with logarithm scale"];
lst[lst.length]=["issue 0130","../Samples/issue_130.html","95.Issues reverseOrder horizontalBar","","Option reverseOrder added"];
lst[lst.length]=["issue 0169","../Samples/issue_169.html","95.Issues Function arrays options","","Function and Array for options"];
lst[lst.length]=["issue 0187","../Samples/issue_187.html","95.Issues Bar Negative values","","ChartNew.js updated such that negative values in Bar charts are displayed from the Zero and not from the bottom of the Chart"];
lst[lst.length]=["issue 0205","../Samples/issue_205.html","95.Issues StackedBar inGraphData","","Possibilities to display inGraphData in stackeBar Chart when you have small values that overlaps others."];
lst[lst.length]=["issue 0023","../Samples/issue_23.html","95.Issues Bar Lines ","","Enhancement : display lines in a bar chart"];
lst[lst.length]=["issue 0261","../Samples/issue_261.html","95.Issues Lines InGraphData overlaps function array","","Solution to displays inGraphData in a better way when values overlaps each other; Also a solution to display the inGraphData in different colors. In this chart, functions and arrays of values are associated to options."];
lst[lst.length]=["issue 0370","../Samples/issue_370.html","95.Issues Mutiple charts","","Multiple charts in one HTML page"];
lst[lst.length]=["issue 0004","../Samples/issue_4.html","95.Issues Bar","","Simple Bar Chart"];
lst[lst.length]=["issue 0400","../Samples/issue_400.html","95.Issues radar function array color ","","Solution for issue 400 - Two set of data in a radar chart; Avoid an overwrite of the labels"];
lst[lst.length]=["issue 0440","../Samples/issue_440.html","95.Issues shapesInChart lines ","","Solution for issue 440 - Draw dashed lines from axis to the points."];
lst[lst.length]=["issue 0051","../Samples/issue_51.html","95.Issues StackedBar Annotations Variable CR LF","","Change default value for the inGraphDataTmpl options; Also show how to display the inGraphData in two lines."];
lst[lst.length]=["issue 0059","../Samples/issue_59.html","95.Issues Animation start ","","Sample of an animation not starting at the beginning but at the middle of the chart."];
lst[lst.length]=["issue 0062","../Samples/issue_62.html","95.Issues Doughnut text in the middle Add-ins shapesInChart ","","Example of a Doughnut with a text in the middle."];
lst[lst.length]=["issue 0068","../Samples/issue_68.html","95.Issues Lines datasetFill","","Example of a line chart with datasetFill set to false"];
lst[lst.length]=["issue 0211","../Samples/issue211.html","95.Issues detectAnnotateOnFullLine Annotation line user function","","Request made to add option 'detectAnnotateOnFullLine' and user written function to display all values from a group in the annotation"];
lst[lst.length]=["issue 0265","../Samples/issue265.html","95.Issues graphMin","","Add option graphMin if you want to display all values of the chart"];
lst[lst.length]=["issue 0396","../Samples/issue396.html","95.Issues line function color point ","","Solution for issue 396 - Two charts are displayed; When you click on a point in the first chart, the corresponding point on the second chart is highlighted."];
lst[lst.length]=["linear_regression","../Samples/linear_regression_date.html","05.Lines Add-ins stats.js linear regression dates ","","Example of a linear regression chart with dates on the X Scale."];
lst[lst.length]=["lineStyles","../Samples/lineStyles.html","05.Lines Lines LineStyles","","Example of line styles available in ChartNew.js"];
lst[lst.length]=["LinkType","../Samples/linkType.html","05.Lines Lines LinkType","","Example of linkType option"];
lst[lst.length]=["LinkType With Origin","../Samples/linkType_with_origin.html","05.Lines Lines LinkType origin","","Example of linkType=1 option with origin in the data so that the bar does not start at zero but at the defined origin."];
lst[lst.length]=["Markers","../Samples/makers.html","05.Lines Lines MarkerShapes Markers","","Example of markers available."];
lst[lst.length]=["Math 1","../Samples/math.html","50.Varia Math function standardDeviation Mean Bar ","","In this example, the computed standard deviation and the computed mean are plotted in the Bar Chart."];
lst[lst.length]=["Math 2","../Samples/math2.html","50.Varia Math function standardDeviation Mean Bar  Color","","In this example, the user defined standard deviation is plotted for each bar. You can also see that a different color has been associated to each bar."];
lst[lst.length]=["Math 3","../Samples/math3.html","50.Varia Math function standardDeviation Mean Lines  Color","","In this example, the user defined standard deviation is plotted for each point of the lines. "];
lst[lst.length]=["Mouse Action 1","../Samples/mouse_actions.html","50.Varia Mouses actions function","","For each action of the mouse (right, left, middle click - mouse hover), you can detect on which element you did the action and you can associate a function to this action. In this sample all actions are detected."];
lst[lst.length]=["Mouse Action 2","../Samples/mouse_detect_position.html","50.Varia Mouses actions function","","In this sample, a function is associated to the mouse position. For each movement, a function which displays the position is activated; When you enter a hover area another function is called and when you leave an hover area a third function is called."];
lst[lst.length]=["Multi Charts","../Samples/multigraphonsinglecanvas.html","50.Varia Multiple charts Multigraph","","Example with multiple charts on the same canvas."];
lst[lst.length]=["Animation Neg. Val.","../Samples/negativeLineAnim.html","05.Lines Animation Negative values ","","Example of an animation with negative values"];
lst[lst.length]=["Original Samples","../Samples/original_sample.html","50.Varia samples ","","This is the sample program that was initialy provided with ChartNew.js"];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_Bar.html","10.Bar Bar Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_Doughnut.html","35.Doughnut Doughnut Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_HorizontalBar.html","20.HorizontalBar HorizontalBar Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_HorizontalStackedBar.html","25.HorizontalStackedBar HorizontalStackedBar Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_Line.html","05.Lines Lines Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_Pie.html","30.Pie Pie Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_PolarArea.html","40.PolarArea PolarArea Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_Radar.html","45.Radar Radar Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["inGraphData with Images","../Samples/personal_inChartData_StackedBar.html","15.StackedBar StackedBar Add-ins shapesInChart inGraphData","","When ChartNew.js is used in combination with the add-ins ShapesInChart, it is possible to have a personnalized inGraphData. In this sample, images are displayed at some places. "];
lst[lst.length]=["Plot Chart","../Samples/plot_graph.html","05.Lines Plot Lines Chart xpos","","Example of a chart with plotting points. In the data, a xpos variable has been defined."];
lst[lst.length]=["Resize Canvas","../Samples/resize_canvas.html","50.Varia Resize","","Before a chart is plotted, you can resize the canvas to a more adequate value. In this page, there are always two examples : the first one is not resized; The second one is resized."];
lst[lst.length]=["responsiveChart.html","../Samples/responsiveChart.html","50.Varia ResponsiveChart maintainAspectRatio","","Try to reduce the size of the browser : the size of the chart and the text inside the chart are automatically adapted. The chart is resized to the width of the window. This can be achieved with option responsive and maintainAspectRatio."];
lst[lst.length]=["inGraphData for Pie 1","../Samples/shapesInChart_for_issue346.html","90.Add-ins inGraphData shapesInChart Add-ins Doughnut","","Another way for displaying inGraphData in a Bar Chart."];
lst[lst.length]=["shapesInChart Sample 1","../Samples/shapesInChart_for_LineChart.html","90.Add-ins Add-ins ShapesInChart Lines","","Example of the add-ins ShapesInChart"];
lst[lst.length]=["inGraphData for Pie 2","../Samples/shapesInChart_for_PieChart.html","90.Add-ins Add-ins ShapesInChart Pie","","Example of use of the shapesInChart.js add-ins. In this sample, inGraphData are displayed through the shapesInChart.js add-ins."];
lst[lst.length]=["inGraphData for Pie 3","../Samples/shapesInChart_for_PieChartV2.html","90.Add-ins add-ins shapesInChart.js specialInChartData","","You could have overlaps in inChartData displays. To avoid this situation, you can use the combination of two add-ins : shapesInChart.js and specialInChartData.js"];
lst[lst.length]=["shapesInChart Sample 2","../Samples/shapesInChart_for_PolarAreaChart.html","90.Add-ins Add-ins shapesInChart.js PolarArea stats.js","","In this example, two add-ins are used : shapesInChart and Stats.js. "];
lst[lst.length]=["Background GradientColor","../Samples/shapesInChart_gradientColors.html","90.Add-ins add-ins shapesInChart.js background color gradientColor Lines","","In this example, two add-ins are used : shapesInChart and gradientColor.js. The background of the chart is colored."];
lst[lst.length]=["inGraphData for Pie 4","../Samples/specialInChartData_example.html","90.Add-ins add-ins shapesInChart.js specialInChartData","","You could have overlaps in inChartData displays. To avoid this situation, you can use the combination of two add-ins : shapesInChart.js and specialInChartData.js"];
lst[lst.length]=["StackedBar and Lines","../Samples/StackedBar_with_line.html","15.StackedBar StackedBar Lines ","","Example where you put a line in a stackedBar chart"];
lst[lst.length]=["stats.js Bar","../Samples/stats_bar.html","90.Add-ins Add-ins Stats.js Bar Lines mean ","","Example that uses the add-ins Stats.js in a Bar chart with lines. The position of the lines is computed by the stats.js add-ins."];
lst[lst.length]=["stats.js Doughnut","../Samples/stats_doughnut.html","90.Add-ins Add-ins stats.js Doughnut Total","","Example that uses the add-ins Stats.js and the shapesInChart.js add-ins : the total is displayed in the middle of the Doughnut."];
lst[lst.length]=["Stats with var","../Samples/stats_with_variables.html","90.Add-ins Stats variable add-ins","","Insert variable value in chart"];
lst[lst.length]=["Time Chart","../Samples/time_graph.html","50.Varia Time Lines xpos format.js add-ins","","In this example, the x Axis has a time scale and point are displayed for a specific time.  It uses add-ins format.js and the xPos feature."];
lst[lst.length]=["UpdateChart.html","../Samples/UpdateChart.html","50.Varia UpdateChart evolutive chart","","If you want to display an evolutive chart, you can do it with ChartNew.js and with the updateChart function."];
lst[lst.length]=["Update Pie","../Samples/updateChartPie.html","30.Pie Pie","","Update Pie Chart"];
lst[lst.length]=["ZERO Line","../Samples/xAxisScale.html","05.Lines line zero drawXScaleLine","","If you want to display a line at the ZERO position on the y Scale, it is possible. To produce this, use the drawXScaleLine option."];
lst[lst.length]=["Different_colors","../Samples/stackedBar_with_diff_colors.html","90.Add-ins inGraphData shapesInChart Add-ins StackedBar","","StackedBar with different colors and space between bars"];
lst[lst.length]=["Total_on_top","../Samples/stackedBar_with_total.html","90.Add-ins inGraphData shapesInChart Add-ins StackedBra","","StackedBar with the total on the top"];
lst[lst.length]=["date_chart","../Samples/date_chart.html","05.Lines line chart date","","date chart"];
lst[lst.length]=["bar_over_others","../Samples/third_bar.html","50.Varia bar chart over others","","bar chart with a bar over all the other ones"];
lst[lst.length]=["LegendSample2","../Samples/legendSample2.html","90.Add-ins add-ins drawLegend","","example of the add-ins drawLegend.js"];
lst[lst.length]=["LegendSample3","../Samples/legendSample3.html","90.Add-ins add-ins drawLegend","","example of the add-ins drawLegend.js"];
lst[lst.length]=["LegendSample4","../Samples/legendSample4.html","90.Add-ins add-ins drawLegend","","example of the add-ins drawLegend.js"];
lst[lst.length]=["arrow_annotate","../Samples/annotate_arrow.html","90.Add-ins add-ins annotate.js","","example of annotates with arrow shape"];
lst[lst.length]=["bubble_annotate","../Samples/annotate_bubble.html","90.Add-ins add-ins annotate.js","","example of annotates with bubbles"];
lst[lst.length]=["annotate_bar","../Samples/annotate_for_bar_charts.html","90.Add-ins add-ins annotate.js","","example of annotates positions for bar charts"];
lst[lst.length]=["annotate_circular","../Samples/annotate_for_circular_charts.html","90.Add-ins add-ins annotate.js","","example of annotates position for circular charts"];
lst[lst.length]=["annotate_lines","../Samples/annotate_for_line_charts.html","90.Add-ins add-ins annotate.js","","example of annotates positions for line charts"];
lst[lst.length]=["annotate_stackedBar","../Samples/annotate_for_stackedbar_charts.html","90.Add-ins add-ins annotate.js","","example of annotates positions for stackedbar charts"];
lst[lst.length]=["attendance_chart","../Samples/attendance_chart.html","90.Add-ins add-ins shapesInChart","","example of attendance chart"];
lst[lst.length]=["background_for_bars","../Samples/bars_with_background_color.html","90.Add-ins add-ins shapesInChart","","example of charts with background colors"];
lst[lst.length]=["highlight5","../Samples/highLight5.html","90.Add-ins add-ins shapesInChart","","example highlights with rectangle"];
lst[lst.length]=["click_on_point","../Samples/issue_0486.html","50.Varia Line Mouse Action","","Action performed when you click on a point"];
lst[lst.length]=["Percentage","../Samples/issue_475.html","90.Add-ins add-ins shapesInChart specialInChartData stats","","example with percentage as label"];
lst[lst.length]=["test_result","../Samples/testChartIsDrawn.html","50.Varia test chart is drawn","","example on how to test if chart is drawn"];