JSFiddle

softwarefx's public fiddles

  • Adding Axis Sections

    This sample shows how to add and configure axis sections.

  • Zoom ScrollBar

    This sample shows how to combine two charts to create a full view of the data in order to navigate it and display it in a detailed (zoomed) view. Both the top and bottom chart contain the same data. The top chart displays the data highlighted on the bottom chart. The highlighted area can be dragged left and right as well as resized..

  • HandDrawn Chart

    jChartFX provides an attractive feature that allows you to render any Chart using a hand drawn style. This sample shows a basic sample of how to set it up. // check line 23 of javascript (needs img reference)

  • Filtering (missing resources:flag img)

    This sample shows how you can use external controls such as checkboxes to control what the chart displays

  • Drill Down Chart ( missing img)

    The drill down sample shows a master/detail scenario in which clicking on a slice replaces the pie with a Bar chart for a detailed view.

  • Customized Tooltips

    This sample shows how to create a complex custom tooltip, including data and extra chart. Place your pointer over any of the bars to see additional information on that point.

  • Multiple Axes

    Frequently, the individual series passed to a single chart can have value ranges that make it difficult to read when plotted against a single axis scale. This sample shows how to use additional axes to plot each series against its own scale.

  • Mapping Fields to Chart Elements

    This sample shows how to assign data fields to different elements of the chart by using the FieldMap class. It shows numerical values on the Y axis and date values on the X axis.

  • Formatting Point Labels

    This sample shows how to manipulate point labels to show the desired information fo each point.

  • Equalizer Chart

    This sample shows how to make use of the EqualizerBars feature of jChartFX to create an attractive Equalizer chart.

  • Custom GridLines

    This sample shows how to create constant lines by using the Custom Gridlines feature of the Chart.

  • Configuring Series Attributes

    jChartFX allows you to individually configure the properties for each series. This sample shows how to set different galleries for two series and to assign them to different axes.

  • Configuring Point Attributes

    The PointAttributes class provides ways to configure how datapoints are displayed. This sample shows how to individually modify the look of two points in a scatter chart.

  • Chart Tooltips

    This sample displays a tooltip containing a Chart with detail data for each point. Simply place your pointer over any bar to trigger the tooltip.

  • Configuring 3D charts

    This sample takes advantage of the View3D class of jChartFX to provide atractive 3D representations of the Chart.

  • Multiple Panes

    jChartFX allows you do isolate series for easier reading by placing them in separate panes. This sample shows how to assign tow series to two different panes with their own Y axes.

  • Controlling Multi-Pane Charts

    Panes are among the most useful features to plot data with different datasets. With panes you can have different chart sections with independent axes, scales and visual attributes. This sample shows how to configure your chart to separate series into multiple panes and to use external sliders to control proportion and separation.

  • Assigning Data to the Chart (JqueryUI)

    When multiple data fields are passed to the chart, it may be necessary to tell jChartFX how to use those fields. This sample shows how to assign data fields to different elements of the chart.